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.

Get started Browse components

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

Modal confirmation prompt that interrupts the user with critical content. Use for destructive actions and authorisation prompts; reach for Dialog when the modal is informational.

Aspect Ratio

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

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.

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.

Button

Triggers an action. Seven visual variants and five sizes. Renders as a NuxtLink when the to prop is set.

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. Three layouts: month-and-year (default), month-only, year-only. Supports single, multiple, and range selection modes.

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. A PM One custom component (not from shadcn-vue) 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.

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.

Date Picker

Button + Popover + Calendar bundled into one component. Supports optional time selection. For inline picking without a trigger, use Calendar directly.

Dialog

Modal overlay for confirmations, short forms, or extra detail. For modals that should turn into bottom drawers on mobile, use DialogResponsive instead.

Dialog Responsive

Dialog on desktop, Drawer (vaul-vue) 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.

Drawer

Bottom-sheet modal built on vaul-vue. Best for mobile-first flows; on desktop, prefer DialogResponsive which auto-swaps between Dialog and Drawer.

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 Error Message

Small destructive-coloured text used to display validation errors under a form control. A lightweight alternative to FieldError when you are not using a Field wrapper.

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.

Menubar

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

Multi Select

Tag-style multiple-choice picker. Selected items render as removable chips inside the input. Supports search, fixed (un-removable) items, and disabled items.

Design

Eng

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.

Pagination Custom

Single-component pagination ready to drop in. Renders first/last, prev/next, page numbers, and an ellipsis for long ranges.

Payment Method Badge

Branded badge for credit-card networks and bank-transfer logos. Pass a method id (visa, mastercard, amex, bca, ...) and the right logo and colour render automatically.

Pin Input

Per-character input for short codes. Similar to InputOTP; PinInput is the more general reka-ui primitive (any pattern, any length), InputOTP is the OTP-tuned wrapper with paste support and complete event.

Popover

Floating panel anchored to a trigger, opened on click. For hover-triggered panels use HoverCard; for menus use DropdownMenu.

Pricing Calendar

Calendar where each date cell shows a price tag. Use for hotel rooms, vehicle rentals, or any per-day inventory with variable pricing.

Progress

Horizontal progress bar. Set modelValue between 0 and 100.

Radio Group

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

Range Calendar

Inline calendar for selecting a start and end date. Built on reka-ui. For a button + popover wrapper, use RangeCalendarPicker.

Range Calendar Picker

Button + Popover + RangeCalendar bundle. The DatePicker equivalent for date ranges.

Rating

Star rating with fractional display, half-star input, hover preview, and keyboard support. Interactive by default; set readonly for display-only.

Resizable

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

Scroll Area

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

Scroll Spy

Auto-generated "On this page" sidebar that tracks the currently visible heading. Powers the right rail of every UI Library doc page.

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. For pickers that need search across many options, use Combobox instead.

Separator

Horizontal or vertical divider between sections.

Sheet

Side-anchored drawer that slides in from any edge. Use for filter panels, navigation drawers, and detail views that complement the main page.

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.

Slide Drawer

Side-sliding drawer styled like Sheet but with a fixed body, header, and footer layout. Use for detail panels that always need a sticky header and footer.

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.

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

Tab Nav

Underline-style nav tabs that map to NuxtLink routes. Use for page-level navigation between related routes (Settings > Account / Notifications / Security).

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.

Table Switch

Switch sized for use inside TableData rows. Tracks state in a shared useState keyed by itemId + statusKey so multiple instances on the same page stay in sync.

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.

vue

nuxt

Textarea

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

Time Picker

Segmented hour/minute input built on reka-ui's TimeFieldRoot. Value is a Time instance from @internationalized/date.

Time Range Picker

Pick a start and end time as Time instances. Used for opening hours, shift schedules, and event blocks. Built on reka-ui's TimeRangeFieldRoot.

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

Small floating label that appears on hover or focus. Use for icon button names and brief shortcut hints.