Components

Sixty-eight components, each with live examples you can interact with and the API read off the source.

Every page here follows the same shape: a live preview, the usage, the examples, the props, emits and slots, what the component does for accessibility, and where to go next. The Preview and the Code tabs are the same file, so what you read is what is running.

What is not here

The shadcn-vue primitives under src/shared/components/ui/ are not documented on this site. They are regenerable from the shadcn-vue CLI and the template does not modify them; see the shadcn-vue docs for those.

A handful of shell pieces are documented where they belong rather than as components of their own: the theme customizer and its trigger in Theme customizer, the responsive preview and the pinned menu in Global config and Navigation, and the confirm host in Confirm dialog. The five skeleton loaders sit with Spinner, and the empty-state illustrations with Empty state.

Form inputs

Component	What it is
Combobox	A single-select that opens a searchable list.
Multi-select	The same, with removable chips inside the field.
Date picker	A date field over a themed calendar, holding YYYY-MM-DD.
Date and time picker	One field for a day and a time, holding a Date.
Time picker	Hour and minute columns, holding HH:mm.
Color input	A swatch that opens the system picker, with a hex box.
OTP input	A segmented one-time code that fills from a paste.
Password input	A password field with a reveal toggle out of the tab order.
Rating	Stars, fractional when read-only.
File upload	A drop zone with previews, validation and progress.
Human verification	A verify-you-are-human widget with the whole flow.

Data display

Component	What it is
DataTable	Sorting, selection, row actions, inline editing, export, cards on a phone.
List group	The list of rows that is not a table.
Carousel	Scroll-snap slides, with arrows, dots, autoplay and a cross-fade.

Stats and dashboard widgets

Stats and dashboard widgets covers sixteen on one page: StatsSimple, StatsComparison, StatsProgress, StatsChart, Sparkline, StatCard, HeroCard, SectionCard, DashboardGreeting, ActivityTimeline, AssetRows, FunnelBars, Leaderboard, ProjectRows, RecordRows and UpcomingList.

Charts

Component	What it is
Bar chart	Vertical bars for one or two series.
Donut chart	A ring with a legend and an optional center label.
Radial gauge	Progress toward a target.
Ranked list	A top-N list with proportional bars, and no chart library.

Feedback

Component	What it is
Alert	An inline status message, soft or solid.
Spinner	Indeterminate loading, plus the five skeletons.
Empty state	An illustrated placeholder for a list with nothing in it.
Error boundary	Catches a render error and shows a fallback.
Confirm dialog	A controlled yes-or-no, or an awaited promise.
Destructive confirm	Type the name to enable the button.
Multi-step confirm	Acknowledge, then confirm again.
Offline banner	Appears when the network goes, confirms when it returns.
Toasts	Short confirmations and failures, raised from anywhere.

Overlays and dialogs

Component	What it is
Schema form dialog	A create or edit form in a modal, from the same field list.
Two-factor setup dialog	Scan or copy the key, then type the code.
Command palette	Fuzzy search over every registered command.
Shortcut cheat sheet	Every shortcut that works right now, grouped.
Tour spotlight	A guided tour that cuts a hole in a dimmed page.
Notification center	The navbar bell, with a count and a filter.

Page layouts

Component	What it is
Page header	Breadcrumb, title, description, actions, and a pin.
Smart breadcrumb	Built from the matched route records.
List page layout	Header, filters, table, footer.
Detail page layout	Header, tabs, and a two-column body.
Form page layout	The shell every add and edit page uses.
Dashboard page layout	A stats row, a chart pair and a free-form slot.
Error page layout	One shell for 404, 403, 500 and the rest.
Legal document layout	Terms and privacy, from data.

Brand and utility

Component	What it is
Logo	The brand mark, following the theme color.
Flag	The circular flag for a locale.
Card brand	A payment-brand logo on its own chip.
Export button	The dashboard Export action, gating itself on its flag.
Print button	Opens the print dialog and stays off the page.
Export column picker	Choose which columns go into the file.

Backgrounds

Backgrounds covers six: SaBackground and the five patterns, PatternDots, PatternGrid, PatternWaves, PatternGeometric and PatternGradientMesh.

Conventions

• Imports are absolute, through the template's aliases:

  import DataTable from '@shared/components/common/DataTable/DataTable.vue'
  import EmptyState from '@shared/components/feedback/EmptyState.vue'

• Event names are camelCase in the source and kebab-case where you bind them. The lint rule requires the first, and Vue maps the second, so a component declaring rowClick is listened to as @row-click.

• Defaults in the tables come from the component's own withDefaults call. A default that looks like 'common.save' is a translation key, resolved at render, so it follows the language switcher and a string you pass wins over it.

• Figures you pass are already formatted, except where a type says number. The component cannot know whether 1200 is money, a count or a duration.

Where to go next

• Schema — the field list behind the forms and the tables.
• Forms — the form engine.
• DataTable — how the table's pieces fit together.
• Theming — where the colors come from.