Vue 3 · Nuxt 4 · Tailwind v4

One component library.
Every interface you'll ever ship.

Midnight Owl UI is a fully-typed, accessible Vue 3 component library with Tailwind v4 theming and genuine dual compatibility, plain Vite apps and Nuxt 4 SSR, from one shared source.

MIT LicensedFree to use

Light & DarkBuilt-in

Fully TypedTypeScript first

Nuxt ReadyAuto Import

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')

37+Components

2Runtime targets

100%TypeScript coverage

MITLicense

Why teams choose Midnight Owl UI

A free, fully-typed component library built for real production apps — themeable end-to-end, dual-runtime by design, and zero-setup exactly where setup usually gets tedious.

Full range, one place

From the most basic building block to advanced panels and data display, every component lives in a single source of truth.

Themeable end-to-end

Tailwind v4 design tokens drive every color and spacing value, live-editable in Theme Studio and applied instantly, no rebuild step.

Fully typed

Props, emits, and state are typed throughout, so you never have to guess what a component accepts.

SSR-safe, dual runtime

The same source ships for a plain Vue 3 + Vite app and a Nuxt 4 SSR app, with no framework-specific APIs baked in.

Toast, zero setup

useToast() auto-mounts itself the first time it is called, no provider component to place in your tree.

Accessible by default

Keyboard navigation, focus-visible rings, and ARIA attributes are wired into every interactive component.

Capability Comparison

Capability	Midnight Owl UI	Typical component kit
Component pricing	Every component is MIT-licensed and free, forever — no paywalled "pro" components.	Core kit is free, but richer components or page blocks often sit behind a paid tier.
Toast setup	Call useToast().add() anywhere — it auto-mounts itself on first use.	Usually needs a provider service registered, plus a component placed in your app tree.
Theming model	Tailwind v4-native design tokens, live-editable in Theme Studio, no rebuild step.	Often a separate Sass or CSS-variable theming layer bolted on top of Tailwind.
Runtime targets	One source ships for a plain Vite SPA and Nuxt 4 SSR, contract-tested for both.	Frequently tuned for one meta-framework, with SSR support an afterthought.
TypeScript coverage	Every prop, emit, and piece of state is typed — enforced across the whole library.	Coverage varies from component to component.
Styling footprint	Pure Tailwind utility classes — nothing to import beyond one stylesheet.	Often ships a separate global theme/CSS file you must import regardless of usage.

Styled with classes you can actually read

Nothing below is invented for the pitch — every swatch and preview reads straight from defaultTheme, the same design-token object Theme Studio's own editors read and write live.

bg-primary-500

defaultTheme.colors.primary — the raw scale Theme Studio's palette editor reads.

primarysecondarysuccesswarningdangerinfo

bg-{key} · text-{key}

The six semantic keys in defaultTheme.light — edited live on Theme Studio's mode editor.

rounded-{key}

defaultTheme.layout.borderRadius — edited in Theme Studio's Architecture Core card.

Aa Aa Aa Aa

text-{key}

defaultTheme.layout.fontSize — the same scale behind Theme Studio's Font Scalings panel.

Edit these tokens live in Theme Studio

See it composed, not just listed

These are the real components, rendered exactly as they'd appear in a dashboard or a form — not a screenshot, not code, try them.

Dashboard

2,481Active users

4.8%Conversion

99.98%Uptime

Checkout flowHealthy

Billing syncDegraded

Email deliveryHealthy

82%

From install to UI in two files

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')

App.vue

<template>
  <div class="flex flex-col gap-3">
    <InputText v-model="email" icon-start="lucide:mail" placeholder="[email protected]" />
    <div class="flex items-center gap-2">
      <Button label="Subscribe" severity="primary" icon="lucide:send" />
      <Badge value="Ready" severity="success" variant="outline" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const email = ref('')
</script>

A calendar that's headless and turnkey

Month, week, day, agenda, and year views, recurring events, drag-to-move, timezone-aware rendering, and pluggable ICS / Google sources — the same <Calendar /> you'd drop into an app, live below.

July 2026

Month

Sun

Mon

Tue

Wed

Thu

Fri

Sat

9:30 AMStandup

2:00 PMWeekly Sync

11:00 AMDesign Review

2:00 PMWeekly Sync

Ship v1.2

Offsite

Explore the Calendar component

Built for the hard components, not just the easy ones

Buttons and badges are table stakes. These three ship with the depth that usually takes teams weeks to build in-house — try them right here, this is the real component.

Rich Text Editor

A full Tiptap and ProseMirror editor, themed to match your app instead of looking bolted on. ProseMirror renders straight to the DOM with no virtual-DOM diffing, so typing stays smooth in a long document. A max-length guard blocks input past the limit as you type, and a live character count is built in.

0 / 240

Range Date Picker

Single-date and range selection live in the same component, with quick presets like "Last 7 Days" and "This Month" for the ranges people actually pick. min/max bounds disable dates outside your allowed window, and typing a date is mask-guided so a malformed value never gets halfway committed.

Tree Select

Nested option trees, multi-select with removable chips, and instant search — for data a plain <select> can't express, like an org chart or a category tree. Selecting a parent cascades to its children, and tree-line styling keeps deep hierarchies readable instead of just indented text.

FrontendBrand

Toasts that write themselves

useToast() is a global singleton — call add() (or a severity shorthand) from anywhere and it lazily mounts its own host on first use. No <ToastProvider> ever gets placed in the tree by hand.

Zero setupuseToast().add() auto-mounts itself — no <ToastProvider> in your tree

top-center by defaultconfirm() interrupts dead-center instead

Duration by severitydanger and warning stay up longer than success, automatically

Awaitableconfirm() and promise() both return real Promises you can await

Theme savedSynced to the cloud — auto-dismisses in 4s.

Could not sync themeDanger stays up longer — 6s by default.

Saving theme...Non-closable while loading — the result can't be lost.

Delete this theme?This can't be undone.

CancelDelete

Try the two safe to spam-click:

See it composed as a real workspace

A batch-entry form adds new rows above the table; a Table bound through useList handles search, per-column filters, sorting and pagination; inline InputText/Select/DatePicker/Toggle cells validate live via useDataValidator; a guarded Save button wraps toast.promise() — the same patterns your own app would use, working together instead of shown one at a time.

Add team memberFill in the fields below to add a new row to the roster.

Full name *

Role *

Select role

Start date *

Name	Role	Start date	Active
	Role... +0 Selected
SJ	Engineering +0 Selected
MC	Design +0 Selected
ET	Product +0 Selected
WZ	Engineering +0 Selected

1 to 4 of 8 records

4 / page

Go to

Not reinvented from scratch

The hard problems above are handed off to proven, widely-used libraries, not homegrown one-offs.

Tiptap & ProseMirrorThe rich-text editing engine behind TextEditor.

date-fnsDate parsing, formatting, and range math behind DatePicker.

Floating UIAnchored, collision-aware positioning for Popover, DropDown, and Select.

MaskaInput masking behind InputMask and InputOtp.

IconifyThe lucide: icon set used throughout the library.

Free library, optional hosted extras

@midnight-owl/ui itself is 100% free and MIT-licensed — every component, no gating, no crippled 'lite' versions. Pro and Plus are low-cost annual plans that only cover the hosted Theme Studio, the one part of the stack that runs on a server we control.

Free

The component library, unrestricted

Every component in @midnight-owl/ui — no exceptions, no locked components
The full theming engine and semantic design tokens
The auto-mounting toast system

Pro

Up to 10 saved themes

Everything in Free
Advanced Theme Studio customization — per-shade color editing, semantic token overrides, typography & layout control
Up to 10 cloud-saved themes, synced across devices

Plus

Unlimited saved themes

Everything in Pro
Unlimited cloud-saved themes
Team/org sharing of a saved theme preset

See full pricing & feature comparison

Explore by category

Panel12 components

Buttons2 components

Form Elements15 components

Data Display8 components

Ready to build?

Install the package, register the plugin, and start composing your interface in minutes.

One component library. Every interface you'll ever ship.