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.
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.
Button
Triggers an action. Seven visual variants and five sizes. Renders as a NuxtLink when the to prop is set.
Card
A container with separate header, content, and footer slots. Useful for dashboard stats, list items, or any block that needs a visual boundary.
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.
Field
Wrapper for form controls. Vertical, horizontal, or responsive orientation, with companion components (FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet) for every layout need.
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.
Select
Single-value dropdown built on reka-ui. For pickers that need search across many options, use Combobox instead.
Table
Table primitives for static data. For sort, filter, search, and pagination out of the box, use TableData (documented separately).
Tabs
View switcher with three visual variants (pill, segmented, underline) and three sizes. Optional swipe gesture on mobile and automatic horizontal overflow scroll.