shadcn-vue

name	shadcn-vue
description	shadcn-vue component docs in-repo: CLI install, Vue usage, Reka API when applicable. Use for shadcn-vue / Reka UI questions in Vue.

shadcn-vue

Per-component reference files live under references/. Each file mirrors the shadcn/vue docs: Installation (pnpm / npx / yarn / bun), Usage (imports + template), and ## Reka UI API reference only when Reka UI documents that primitive.

How to use this skill

1. Identify the component from the shadcn/vue Components sidebar (first column); use the short Summary to tell similar items apart.
2. Open the linked reference (third column). Full official one-line description is in that file’s YAML description, same as the doc page.
3. Follow that file for Installation, Usage, and optional Reka API. Do not invent APIs; stub upstream pages may have an empty or placeholder Usage block.

Component → summary → reference file

Component (shadcn-vue)	Summary	Reference file
Accordion	Expandable sections with headings	Accordion.md
Alert	Inline callout for attention	Alert.md
Alert Dialog	Modal that needs explicit response	AlertDialog.md
Aspect Ratio	Constrain content to a ratio	AspectRatio.md
Avatar	User image + fallback	Avatar.md
Badge	Small label / count chip	Badge.md
Breadcrumb	Hierarchy path links	Breadcrumb.md
Button	Primary clickable control	Button.md
Button Group	Grouped related buttons	ButtonGroup.md
Calendar	Pick / edit a date	Calendar.md
Card	Header + content + footer	Card.md
Carousel	Swipeable slides (Embla)	Carousel.md
Chart	Charts (Unovis)	Chart.md
Checkbox	Checked / unchecked	Checkbox.md
Collapsible	Show / hide a panel	Collapsible.md
Combobox	Autocomplete + list	Combobox.md
Command	Command palette / menu	Command.md
Context Menu	Right-click menu	ContextMenu.md
Data Table	TanStack data grid	DataTable.md
Date Picker	Dates, range, presets	DatePicker.md
Dialog	Modal overlay	Dialog.md
Drawer	Mobile slide-over	Drawer.md
Dropdown Menu	Menu from a button	DropdownMenu.md
Empty	Empty state UI	Empty.md
Field	Label + control + help	Field.md
Form	VeeValidate + Zod	Form.md
Hover Card	Preview on hover / focus	HoverCard.md
Input	Text field	Input.md
Input Group	Input with add-ons	InputGroup.md
Input OTP	OTP / copy-paste codes	InputOtp.md
Item	Generic content row / block	Item.md
Kbd	Keyboard key styling	Kbd.md
Label	Form control label	Label.md
Menubar	Desktop menu bar	Menubar.md
Native Select	Styled native select	NativeSelect.md
Navigation Menu	Site nav links	NavigationMenu.md
Number Field	Number + stepper	NumberField.md
Pagination	Page links	Pagination.md
Pin Input	PIN entry (see also Input OTP)	PinInput.md
Popover	Anchored overlay content	Popover.md
Progress	Progress bar	Progress.md
Radio Group	Single choice radios	RadioGroup.md
Range Calendar	Pick a date range	RangeCalendar.md
Resizable	Split / resize panes	Resizable.md
Scroll Area	Styled scroll container	ScrollArea.md
Select	Button-triggered listbox	Select.md
Separator	Divider line / gap	Separator.md
Sheet	Side / bottom sheet	Sheet.md
Sidebar	App sidebar shell	Sidebar.md
Skeleton	Loading placeholder	Skeleton.md
Slider	Value on a range	Slider.md
Sonner	Toast stack (opinionated)	Sonner.md
Spinner	Loading indicator	Spinner.md
Stepper	Multi-step progress	Stepper.md
Switch	On / off toggle	Switch.md
Table	Responsive table	Table.md
Tabs	Tab panels, one visible	Tabs.md
Tags Input	Tags inside a field	TagsInput.md
Textarea	Multiline text	Textarea.md
Toast	Temporary message	Toast.md
Toggle	Two-state button	Toggle.md
Toggle Group	Multiple toggles	ToggleGroup.md
Tooltip	Hover / focus hint	Tooltip.md
Typography	Text / heading utilities	Typography.md

Regenerating references

To refresh all files from official sources, run from the repo root:

node scripts/generate-shadcn-vue-references.mjs

The Cursor command .cursor/commands/shadcn.md describes the intended shape of each reference when generating or editing by hand.