Components

Displays a button or a component that looks like a button.

Smart back button. Uses browser history when available, otherwise navigates to a fallback destination derived from the current path. Bound to the B keyboard shortcut by default.

Icon button that copies text to the clipboard. Cross-fades to a check icon when copied with a tippy tooltip.

Glassmorphic button with layered shadows, blur, and 3D press animation. Use for hero CTAs, marketing pages, and over-image overlays where a regular Button feels flat.

Joins a row or column of Buttons (or inputs) so adjacent corners and borders collapse cleanly. Use for segmented controls, attached input + button, or toolbars.

Chunky game-style button: a bevelled face on a darker ledge, an inset rim lit from the top left, two specks of shine and an outlined label. Every proportion is a fraction of the height.

Pill button with a spring-tracked light inside and mirrored edge glows that crossfade as the pointer changes sides. Vue port of MicroKit UI's Cursor Edge Glow Button.

Two-state pressable button. Use inside toolbars for formatting controls (bold, italic, align).

Group of Toggles where at most one (single) or many (multiple) can be pressed at a time. Often used as a visual filter or text-alignment picker.

Inline date picker built on reka-ui. One component for every selection mode — single (default), multiple, and range — plus three heading layouts, an optional ISO week-number column, and a fully custom day slot.

Binary input. Supports checked, unchecked, and indeterminate states via modelValue.

Swatch trigger opening a popover with a saturation/lightness area, a hue slider, an optional alpha slider, and hex plus HSL value fields. Built on the Reka UI color primitives; the model value is a hex string.

Searchable dropdown that filters items as you type. Built on reka-ui. Use for pickers with many options where a flat Select feels cumbersome.

Renders a form field from a JSON definition instead of hand-written markup: one field with CustomFieldRenderer, a whole set with CustomFieldGroup. Covers 30+ types (text, choice, date and range pickers, sliders, rating, color, country, file) and ships the value helpers that go with them.

The date family: DatePicker (date/date-range, optional time, presets), TimePicker & TimeRangePicker (segmented clock fields), and Month/Year pickers. Popover-triggered pickers built on Calendar and reka-ui. For inline picking without a trigger, use Calendar directly.

A growable list of email fields with add and remove, for the "who gets notified" half of a settings form. Binds to a plain string array, so the value goes straight into a JSON settings column with no reshaping.

Wrapper for form controls. Vertical, horizontal, or responsive orientation, with companion components (FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet) for every layout need.

vee-validate form primitives wrapped to match the design system. Use FormField + FormItem + FormControl + FormLabel + FormMessage to build accessible forms with built-in validation rendering.

Searchable picker for choosing an icon from the project's icon sets (hugeicons + lucide). Stores the icon name as a string.

Single-line text field. Supports every native HTML input type (text, email, number, date, file). Pair it with Field to add a label, description, or error message.

Wraps an input with addons (prefix/suffix icons, text labels, or buttons) into a single composite control. The seams between the parts are flattened so it looks like one element.

URL / social handle input that auto-prefixes with the right base URL. Pass label='Instagram' and the input prepends https://instagram.com/. Pasting a full URL strips the prefix automatically.

Numeric input with increment/decrement buttons. Use for quantities and bounded numbers. For unstyled number entry, use Input type="number".

One-time password input with per-character slots. Used for 2FA, email verification, and sign-in codes. Built on vue-input-otp.

Password input with a built-in show/hide toggle.

International phone input with a searchable country selector. Auto-formats the number for the chosen country and emits a parsed E.164 string.

Form field label. Connects an input through the for attribute; clicking the label focuses the matching control.

Combobox tuned for picking countries, cities, or any location-like option. Supports a pinned section at the top for recent or featured items.

A styled native HTML select element with consistent design system integration. For search, multi-select, or custom option markup, use Select or Combobox instead.

Compose a numeric input from primitives: NumberField + NumberFieldContent + Increment/Decrement buttons + NumberFieldInput. Use when you need a different layout than the bundled InputNumber.

Two amount fields for a from/to budget, with an optional slider once a ceiling exists. Emits { start, end }, or null while both ends are empty, so an untouched field stays distinguishable from a range of zero.

A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.

One-of-many selection. Pair RadioGroup with RadioGroupItem entries; bind selected value with v-model.

Star rating with fractional display, half-star input, hover preview, and keyboard support. Interactive mode is built on the reka-ui Rating primitives (a radiogroup with one radio per step); readonly mode renders a static star row so any decimal value stays exact.

Single-value dropdown built on reka-ui. There is no multiple prop: selecting several values is Combobox with multiple and ComboboxChips. For pickers that need search across many options, use Combobox instead.

Continuous or stepped range input for numeric values. Supports single or multi-thumb selection.

On/off toggle. Use for binary settings where the result is immediate (no Save button needed).

Free-form tag entry. Type, press Enter or comma, get a chip. Backspace removes the last chip.

Multi-line text input. Pair with Field for label + description + error.

Rich text editor built on @tiptap/vue-3. Ships with a styled toolbar covering headings, bold/italic, lists, links, images, code blocks, and an embedded media picker. Heavy component — see existing posts/blog form for full usage.

A modal dialog that interrupts the user with important content and expects a response.

Command palette pattern. Composable input + grouped item list with fuzzy search. CommandDialog wraps it in a modal for global ⌘K menus.

Right-click menu. Same shape as DropdownMenu but triggered by contextmenu events instead of a button. Supports nested submenus and checkbox/radio items.

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.

Click-triggered menu attached to a button. Supports items, separators, labels, shortcuts, checkbox and radio items, and nested submenus.

Floating panel that opens on hover with a small delay. Good for previews and inline context that should not require a click.

Full-screen image and video viewer with zoom, keyboard navigation, fullscreen, download, share, thumbnails, and a slide counter. Highly slot-driven for custom chrome.

Displays rich content in a portal, triggered by a button.

An edit surface beside a live preview, each scrolling on its own, collapsing to a tab switch when the panel is too narrow to hold both. The split is a container query on the panel's own width, not a viewport breakpoint.

Dialog on desktop, Drawer on mobile. Use this for almost every modal in the app. Reach for plain Dialog only for short confirmations that still look fine on a phone.

Extends the Dialog component to display content that complements the main content of the screen.

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

A tab bar for the bottom of a phone screen.

Path-based navigation showing where the user is in a hierarchy. Compose with BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, and BreadcrumbSeparator.

The menu behind a site header's menu button. A sheet that opens under the header instead of over it, follows the finger and closes on a swipe.

Dropdown for changing the active locale. Reads available locales from the @nuxtjs/i18n config and writes to the store on selection.

A navigation menu with one shared panel. Moving between triggers slides the content in the direction you moved while the panel resizes to fit.

Persistent application menu bar (File, Edit, View ...). Each top-level item opens a DropdownMenu-style panel. Use for desktop-app-style UIs.

Horizontal navigation with hover-triggered mega-menu panels. Best for marketing-site headers where each top-level item reveals a grid of categorised links.

Composable page-number navigation. Combine PaginationFirst/Last/Previous/Next with PaginationItem and PaginationEllipsis to build any layout.

Makes the browser Back button and the Android back gesture close the panel on top instead of leaving the page. One shared stack and one listener for every Drawer, Sheet, Dialog and Lightbox on screen.

Auto-generated "On this page" navigation that tracks every heading currently on screen. Powers the right rail of every UI Library doc page, plus the sticky collapsible bar you see on mobile.

Floating button that scrolls the page to the top. Appears after the user scrolls past a threshold, and takes the surface under it the way Surface Header does: the glass variant over a dark section or a photo, cn-glass-light over a light one.

Full sidebar layout primitive — handles desktop/mobile collapse, off-canvas mode, icon-only mode, and a persistent rail for resizing. The UI Library itself uses this for its left nav.

Multi-step process visualisation with numbered indicators, titles, and connectors. Good for checkout flows and onboarding.

View switcher with three visual variants (pill, segmented, underline) and three sizes. Optional swipe gesture on mobile and automatic horizontal overflow scroll.

Vertically stacked panels that expand to reveal their content. Built on reka-ui. Single-open by default; switch type to multiple to allow several at once.

Locks child content to a fixed width-to-height ratio. Built on reka-ui.

Renders files and images with media, metadata, upload state, actions, and a full-card trigger that keeps the action buttons separately clickable.

User profile image with an initials fallback in one of two colour styles, and a status indicator. Pass a model object with name and optional profile_image to render.

Stacked avatar list with automatic overlap masking. Optional max limit shows the remainder count as a hover-card with the full list.

A small pill for status, counts, or category labels. Seven color variants with a dot prefix by default, swappable for an icon or stripped of chrome entirely with the plain prop.

A short run of values as columns of lights, one column picked.

Image with low-quality image placeholder (LQIP) blur-up effect. Shows a tiny blurred preview while the full image loads, then crossfades in.

A container with separate header, content, and footer slots. Useful for dashboard stats, list items, or any block that needs a visual boundary.

Card with a true transparent notched cutout where a circular element meets the card body. Uses an SVG clip-path for crisp corners. Falls back to a plain card when no notch slot is present.

Horizontal slider built on embla-carousel-vue. Compose CarouselContent and CarouselItem; add Previous/Next buttons and dot navigation as needed.

Carousel with a perspective tilt effect. Items rotate in 3D as they enter and leave the centre. Use for hero showcases and product galleries where flat carousel feels static.

Show/hide a single block of content. A simpler primitive than Accordion when you do not need multiple panels or item-level state.

Build a data table from the Table primitives and TanStack Table. Each section adds one capability on top of the previous one: formatting, row actions, pagination, sorting, filtering, column visibility, and row selection. For the batteries-included version, use TableData.

A ranked list of labels, each with a bar to scale, a count and its share of the whole.

Country flag icon. Pass an ISO 3166-1 alpha-2 country code; the image is loaded from /flags/{code}.png at runtime.

A canvas of nodes joined by edges, that you pan, zoom and rearrange.

Composable SVG gauge primitives: arcs, zones, needles, ticks, dots, tooltips and a slider control. A Vue port of gauge-ui.

List row primitive. Composes ItemMedia, ItemContent (with ItemTitle and ItemDescription), ItemActions, and ItemFooter into a flexible row that fits navigation lists, settings, and contact cards.

Inline keyboard hint, styled to look like a physical key cap. KbdGroup chains multiple together for sequences like ⌘ K.

One number and what it is doing: its change, its shape over time, its progress to a target.

Entries ranked by a value, with the top three on a podium.

Displays an inline status, system note, bordered row, or labeled separator in a conversation.

Client-rendered QR code drawn as inline SVG, with square or rounded modules. The encoder loads lazily on mount, so nothing ships to the server render. The paired useQRCode composable downloads the same code as SVG or an image.

A reading on a ruler of ticks that rises where the value is, with the number above it.

One figure written large, with a label over it, a unit after it and a badge beside it.

Table primitives for static data. For sort, filter, search, and pagination out of the box, use TableData (documented separately).

Batteries-included data table built on TanStack Table. Pass columns, data, and a paginator meta object; you get search, sort, filter, pagination, row selection, bulk actions, and column visibility out of the box. For static tables, use the primitive Table.

A styling system for HTML and rendered markdown, from blog posts to streaming chat. One CSS file you own.

Inline message for status, warnings, or callouts. Two visual variants and slots for an icon, title, and description.

Radial progress ring (0-100) with an optional centered percentage label. The ring colour shifts by threshold: red below 34, amber up to 66, green at 67 and above.

Placeholder for lists, tables, and views that have no data yet. Compose EmptyMedia (icon or illustration), EmptyTitle, EmptyDescription, and EmptyContent for actions.

Header bell with an unread badge and a popover list of notifications. Reads from the global notifications store. For ad-hoc toast messages, use Toast instead.

Horizontal progress bar. Set modelValue between 0 and 100.

Terminal outcome screen for a finished flow: payment confirmed, form submitted, order received. Animates a drawn checkmark and a staggered text reveal on mount.

A CSS utility that sweeps a soft highlight across text for live status - 'Thinking…', 'Generating response…', running tools, streaming markers. Honors prefers-reduced-motion. Ships in main.css.

Animated placeholder block. Build loading states by stacking Skeletons in the rough shape of the eventual content.

Looping loading indicator. Use inside buttons, empty states, or inline next to text.

Colour-coded dot with a status label. Maps a string status to a colour and animates a slow ping ring. Hide the label for a pure dot.

Transient messages. Toasts pile up with the newest in front, and fan out on hover.

Charting foundation built on unovis-vue. ChartContainer provides the theming, config context, tooltip wiring, and legend that every chart shares. For ready-made charts see Line, Area, Bar, Pie, and Semi Circle.

Area charts built on unovis-vue. One ChartArea handles single or multi-series data, with optional gradient fills and stacking.

Bar charts built on unovis-vue. One ChartBar covers vertical/horizontal orientation, single or grouped series, and stacking.

Composed charts overlay more than one geometry on the same axes. ChartComposed draws a filled area behind a line, useful for forecast or target zones.

Time-series line charts built on unovis-vue. Pass an array of rows plus a config that maps each series key to a label and color.

Pie and donut charts built on unovis-vue. One ChartPie renders a full pie, a donut, a donut with a centre total, or nested rings.

Radar charts plot one series across several axes on a polar grid. Built as a self-contained SVG component with gradient fill, glow, and dot markers.

Radial bar charts render each value as a concentric arc. Built as a self-contained SVG component with gradient bars, a glow, background tracks, and inline labels.

Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.

The box someone types a message into: text, files, and the two keys that send it. Paste a screenshot, drop a file, Enter to send and Shift+Enter for a newline. It knows nothing about where a message goes or what a reply looks like.

The small parts every transcript repeats: the day a run of messages belongs to, the clock beside a turn, a human's message with its links made clickable, pictures that open in the lightbox, files that can only be named, and a turn that never reached the server. Assemble them inside message-scroller, message and bubble.

Displays a message in a conversation, with optional avatar, header, footer, and alignment.

A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.

Dotted thought orb for AI and agent UIs. Six hand tuned animated states at any size, drawn on a plain 2D canvas (no WebGL, no filters). Vue port of thinking-orbs by Jakub Antalik, MIT licensed.

Animated glow that wraps any element. A beam travels around the border (rotate family) or the glow breathes in place (pulse family). Vue port of border-beam by Jakub Antalik, MIT licensed.

A panel of rows set into a tray, with the tray's top strip carrying the title.

Responsive grid that auto-fills empty cells with a placeholder pattern, so the last row always looks complete. Use for galleries, masonry-style lists, or stat tiles.

Lanes of cards that can be dragged within a lane and from one lane to another.

Wraps a button or icon in an animated liquid-metal ring. One shared WebGL renderer drives every instance on the page. Vue port of metal-fx by Jakub Antalik, MIT licensed.

A thin thumb drawn over the page in place of the window's scrollbar, so sections of different colours meet without a stripe down the right edge.

Split-pane layout with drag-to-resize handles. Compose ResizablePanelGroup with ResizablePanel children and ResizableHandle between them.

Themed scrollable container with custom scrollbars that match the design system. Use when default OS scrollbars look out of place.

A CSS utility that masks the edges of a scroll container, hinting at more content without overlays or scroll listeners. Scroll-driven where supported, with a static fallback. Ships in main.css.

Horizontal or vertical divider between sections.

Isometric 3D card-stack illustration. Layers lift apart on hover and assemble on entrance; the thickness, outline, and motion all follow the chosen recede direction.

A site header that takes the colour of the section under it: clear over a photo, the section's own colour over a dark fill, the regular header everywhere else.

Three-way colour mode picker (light, dark, system) with thumbnail previews. Drop into a settings panel to let users pick a theme.

One-click colour mode flip for the header. Cycles through light, dark, and system. For a settings-page picker, use ColorModeButtons.