Installation

Requires Vue 3.3+. No Tailwind setup needed on your end — components ship with their own pre-built stylesheet.

1. Install the package

Terminal

npm install @midnight-owl/ui

2. Register the plugin

The same components ship for both a plain Vue 3 + Vite app and Nuxt 4 (SSR) — pick the one that matches your project.

// main.ts
import { createApp } from 'vue'
import { MidnightOwlUI } from '@midnight-owl/ui'
import '@midnight-owl/ui/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(MidnightOwlUI)
app.mount('#app')

Optional: fetch a saved theme remotely (Premium) Premium

Premium accounts can save a theme in Account, which mints a public key. fetchRemoteTheme() resolves that key to the theme's tokens at runtime, so any project can load it without copy-pasting JSON by hand — and it stays in sync if you edit the theme again later.

1. Store the key

The key isn't secret — it's the same trust tier as a Paddle client-side token — but keep it in an env var rather than hardcoding it, so swapping themes doesn't need a code change:

.env

# .env — never commit this file
THEME_KEY=your-public-key-here

2. Await it before mounting

app.use() can't be awaited, so resolve the theme first and pass the plain tokens object in — same install call as above, just fed asynchronously:

main.ts

import { createApp } from 'vue'
import { MidnightOwlUI, fetchRemoteTheme } from '@midnight-owl/ui'
import '@midnight-owl/ui/style.css'
import App from './App.vue'

const tokens = await fetchRemoteTheme(globalThis._importMeta_.env.THEME_KEY)

const app = createApp(App)
app.use(MidnightOwlUI, tokens)
app.mount('#app')

plugins/midnight-owl-ui.ts

// plugins/midnight-owl-ui.ts
import { defineNuxtPlugin, useRuntimeConfig } from '#imports'
import { MidnightOwlUI, fetchRemoteTheme } from '@midnight-owl/ui'
import '@midnight-owl/ui/style.css'

export default defineNuxtPlugin(async (nuxtApp) => {
  // Reads NUXT_PUBLIC_THEME_KEY from .env — Nuxt maps env vars onto
  // runtimeConfig.public automatically, no extra config needed.
  const { themeKey } = useRuntimeConfig().public
  const tokens = await fetchRemoteTheme(themeKey as string)
  nuxtApp.vueApp.use(MidnightOwlUI, tokens)
})

A brief blank/loading state on first paint is expected — that's the tradeoff for never flashing the wrong theme. Cancelling or lapsing the subscription revokes the key within minutes; renew or upgrade to restore it.

3. Use a component

Every component is globally registered by the plugin, so it's available in any template without an extra import.

App.vue

<template>
  <Button label="Get Started" severity="primary" icon="lucide:arrow-right" iconPos="right" />
</template>

That's it — you're set up

Browse the full component list to see what's available and copy real usage examples.