A modern Vue component library.
Components used across the admin and marketing sites. Built on reka-ui, styled with Tailwind, and shipped with a few project-specific additions.
Accordion
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.
Alert
Inline message for status, warnings, or callouts. Two visual variants and slots for an icon, title, and description.
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Aspect Ratio
Locks child content to a fixed width-to-height ratio. Built on reka-ui.
Attachment
Renders files and images with media, metadata, upload state, actions, and a full-card trigger that keeps the action buttons separately clickable.
Avatar
User profile image with initials fallback, colourful mesh background, and status indicator. Pass a model object with name and optional profile_image to render.
Avatar Group
Stacked avatar list with automatic overlap masking. Optional max limit shows the remainder count as a hover-card with the full list.
Badge
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.
Blur Image
Image with low-quality image placeholder (LQIP) blur-up effect. Shows a tiny blurred preview while the full image loads, then crossfades in.
Border Beam
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.
Bottom Nav
Mobile bottom navigation bar with a sliding active indicator. Three surfaces, four indicator styles, optional center action, badges, and hide-on-scroll.
Breadcrumb
Path-based navigation showing where the user is in a hierarchy. Compose with BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, and BreadcrumbSeparator.
Bubble
The message surface. Seven tonal variants, start/end alignment, grouping, and absolutely-positioned reactions.
Button
Displays a button or a component that looks like a button.
Button Back
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.
Button Copy
Icon button that copies text to the clipboard. Cross-fades to a check icon when copied with a tippy tooltip.
Button Glass
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.
Button Group
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.
Calendar
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.
Card
A container with separate header, content, and footer slots. Useful for dashboard stats, list items, or any block that needs a visual boundary.
Card Notch
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.
Carousel
Horizontal slider built on embla-carousel-vue. Compose CarouselContent and CarouselItem; add Previous/Next buttons and dot navigation as needed.
Carousel 3D
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.
Chart
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.
Chart Area
Area charts built on unovis-vue. One ChartArea handles single or multi-series data, with optional gradient fills and stacking.
Chart Bar
Bar charts built on unovis-vue. One ChartBar covers vertical/horizontal orientation, single or grouped series, and stacking.
Chart Composed
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.
Chart Line
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.
Chart Pie
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.
Chart Radar
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.
Chart Radial Bar
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.
Chart Semi Circle
A radial gauge for progress, usage, or percentages. Built with plain SVG, an animated reveal, and a count-up centre value.
Checkbox
Binary input. Supports checked, unchecked, and indeterminate states via modelValue.
Circular Progress
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.
Collapsible
Show/hide a single block of content. A simpler primitive than Accordion when you do not need multiple panels or item-level state.
Color Mode Buttons
Three-way colour mode picker (light, dark, system) with thumbnail previews. Drop into a settings panel to let users pick a theme.
Color Mode Toggle
One-click colour mode flip for the header. Cycles through light, dark, and system. For a settings-page picker, use ColorModeButtons.
Color Picker
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.
Combobox
Searchable dropdown that filters items as you type. Built on reka-ui. Use for pickers with many options where a flat Select feels cumbersome.
Command
Command palette pattern. Composable input + grouped item list with fuzzy search. CommandDialog wraps it in a modal for global ⌘K menus.
Context Menu
Right-click menu. Same shape as DropdownMenu but triggered by contextmenu events instead of a button. Supports nested submenus and checkbox/radio items.
Custom Field
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.
Data Table
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.
Date Picker
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.
Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Drawer
A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.
Dropdown Menu
Click-triggered menu attached to a button. Supports items, separators, labels, shortcuts, checkbox and radio items, and nested submenus.
Empty
Placeholder for lists, tables, and views that have no data yet. Compose EmptyMedia (icon or illustration), EmptyTitle, EmptyDescription, and EmptyContent for actions.
Field
Wrapper for form controls. Vertical, horizontal, or responsive orientation, with companion components (FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet) for every layout need.
Flag
Country flag icon. Pass an ISO 3166-1 alpha-2 country code; the image is loaded from /flags/{code}.png at runtime.
Form
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.
Grid Fill
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.
Hover Card
Floating panel that opens on hover with a small delay. Good for previews and inline context that should not require a click.
Icon Picker
Searchable picker for choosing an icon from the project's icon sets (hugeicons + lucide). Stores the icon name as a string.
Input
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.
Input Group
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.
Input Link
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.
Input Number
Numeric input with increment/decrement buttons. Use for quantities and bounded numbers. For unstyled number entry, use Input type="number".
Input OTP
One-time password input with per-character slots. Used for 2FA, email verification, and sign-in codes. Built on vue-input-otp.
Input Password
Password input with a built-in show/hide toggle.
Input Phone
International phone input with a searchable country selector. Auto-formats the number for the chosen country and emits a parsed E.164 string.
Item
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.
Kbd
Inline keyboard hint, styled to look like a physical key cap. KbdGroup chains multiple together for sequences like ⌘ K.
Label
Form field label. Connects an input through the for attribute; clicking the label focuses the matching control.
Language Switcher
Dropdown for changing the active locale. Reads available locales from the @nuxtjs/i18n config and writes to the store on selection.
Lightbox
Full-screen image and video viewer with zoom, keyboard navigation, fullscreen, download, share, thumbnails, and a slide counter. Highly slot-driven for custom chrome.
Location Combobox
Combobox tuned for picking countries, cities, or any location-like option. Supports a pinned section at the top for recent or featured items.
Marker
Status updates, system notes, bordered rows, and labeled separators for a conversation - streaming state, tool activity, date breaks, and the like.
Menubar
Persistent application menu bar (File, Edit, View ...). Each top-level item opens a DropdownMenu-style panel. Use for desktop-app-style UIs.
Message
Lays out a row in the conversation - avatar, alignment, header, content, and footer - and groups consecutive turns from the same sender.
Message Scroller
The scroll container for a conversation. It handles the parts that are easy to get wrong: pinning to the bottom while a reply streams, anchoring each new turn near the top, preserving position when history is prepended, jump-to-message, scroll controls, and visibility tracking.
Metal FX
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.
Native Select
A styled native HTML select element with consistent design system integration. For search, multi-select, or custom option markup, use Select or Combobox instead.
Navigation Menu
Horizontal navigation with hover-triggered mega-menu panels. Best for marketing-site headers where each top-level item reveals a grid of categorised links.
Notifications
Header bell with an unread badge and a popover list of notifications. Reads from the global notifications store. For ad-hoc toast messages, use Sonner instead.
Number Field
Compose a numeric input from primitives: NumberField + NumberFieldContent + Increment/Decrement buttons + NumberFieldInput. Use when you need a different layout than the bundled InputNumber.
Pagination
Composable page-number navigation. Combine PaginationFirst/Last/Previous/Next with PaginationItem and PaginationEllipsis to build any layout.
Popover
Displays rich content in a portal, triggered by a button.
Progress
Horizontal progress bar. Set modelValue between 0 and 100.
QR Code
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.
Questionnaire
A multi-step question form. One item is active at a time; choices, free text, skipping, keyboard shortcuts, and validation are handled for you. It renders a real form, so submission and autofill work without extra wiring.
Radio Group
One-of-many selection. Pair RadioGroup with RadioGroupItem entries; bind selected value with v-model.
Rating
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.
Resizable
Split-pane layout with drag-to-resize handles. Compose ResizablePanelGroup with ResizablePanel children and ResizableHandle between them.
Responsive Dialog
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.
Result
Terminal outcome screen for a finished flow: payment confirmed, form submitted, order received. Animates a drawn checkmark and a staggered text reveal on mount.
Scroll Area
Themed scrollable container with custom scrollbars that match the design system. Use when default OS scrollbars look out of place.
Scroll Fade
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.
Scroll Spy
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.
Scroll To Top
Floating button that scrolls the page to the top. Appears after the user scrolls past a threshold.
Select
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.
Separator
Horizontal or vertical divider between sections.
Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Shimmer
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.
Sidebar
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.
Skeleton
Animated placeholder block. Build loading states by stacking Skeletons in the rough shape of the eventual content.
Slider
Continuous or stepped range input for numeric values. Supports single or multi-thumb selection.
Sonner
Toast notification system. Drop Toaster once at the app root and call toast() from anywhere to show a transient message. For a persistent inbox the user can revisit, use Notifications.
Spinner
Looping loading indicator. Use inside buttons, empty states, or inline next to text.
Stack
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.
Status Indicator
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.
Stepper
Multi-step process visualisation with numbered indicators, titles, and connectors. Good for checkout flows and onboarding.
Switch
On/off toggle. Use for binary settings where the result is immediate (no Save button needed).
Table
Table primitives for static data. For sort, filter, search, and pagination out of the box, use TableData (documented separately).
Table Data
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.
Tabs
View switcher with three visual variants (pill, segmented, underline) and three sizes. Optional swipe gesture on mobile and automatic horizontal overflow scroll.
Tags Input
Free-form tag entry. Type, press Enter or comma, get a chip. Backspace removes the last chip.
Textarea
Multi-line text input. Pair with Field for label + description + error.
Thinking Orb
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.
TipTap Editor
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.
Toggle
Two-state pressable button. Use inside toolbars for formatting controls (bold, italic, align).
Toggle Group
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.
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Typeset
A styling system for HTML and rendered markdown, from blog posts to streaming chat. One CSS file you own. There is no component to import; add the .typeset class to a container and everything inside it is styled.
Typography
Utility-class recipes for headings, paragraphs, and lists. There is no Typography component to import; copy the classes. For rendered markup use the .typeset container class (or format-html) instead.