AgentSkillsCN

shadcn-vue

Shadcn-Vue的组件使用模式——一个基于Reka UI与Tailwind CSS构建的Vue组件分发系统。涵盖组件API、结合VeeValidate/TanStack Form的表单、数据表格、侧边栏、图表、主题化以及自定义注册表。

SKILL.md
--- frontmatter
name: shadcn-vue
description: Component usage patterns for shadcn-vue — a Vue component distribution system built on Reka UI and Tailwind CSS. Covers component APIs, forms with VeeValidate/TanStack Form, data tables, sidebar, charts, theming, and custom registries.
metadata:
  author: Lucas Yang
  version: "2026.02.14"
  source: Generated from https://github.com/unovue/shadcn-vue, scripts located at https://github.com/ycs77/skills

The skill is based on shadcn-vue (latest, Reka UI v2 + Tailwind CSS v4), generated at 2026-02-14.

shadcn-vue is a code distribution system for Vue components. Instead of installing a package, you copy component source code into your project for full control. Components are built on Reka UI (headless primitives) and styled with Tailwind CSS.

Key conventions:

  • •Install components via npx shadcn-vue@latest add <component>
  • •Components live in @/components/ui/<component>
  • •Utilities in @/lib/utils (provides cn class merge helper)
  • •Composables in @/composables/
  • •Uses new-york style (default style is deprecated)
  • •Reka UI provides the headless primitive layer

Core References

TopicDescriptionReference
Project Setup & CLICLI commands, components.json config, project initializationcore-setup
Theming & Dark ModeCSS variables, color conventions, dark mode setupcore-theming

Components

Data Entry

TopicDescriptionReference
Button & ButtonGroupButton variants, ButtonGroup, split buttonscomponents-button
Input ComponentsInput, InputGroup, Textarea, NumberField, InputOTP, PinInput, TagsInputcomponents-input
Selection ControlsCheckbox, RadioGroup, Switch, Toggle, ToggleGroup, Slidercomponents-selection-controls
Select & CommandSelect, NativeSelect, Combobox, Command palettecomponents-select
Date ComponentsCalendar, DatePicker, RangeCalendarcomponents-date-picker

Data Display

TopicDescriptionReference
Display ComponentsCard, Table, Avatar, Item, Empty, Badge, Kbd, Label, Spinner, Skeleton, Progresscomponents-data-display

Overlays

TopicDescriptionReference
Dialog & PanelsDialog, AlertDialog, Sheet, Drawer, Popover, HoverCard, Tooltipcomponents-overlay
MenusDropdownMenu, ContextMenu, Menubarcomponents-menu

Navigation & Layout

TopicDescriptionReference
NavigationBreadcrumb, NavigationMenu, Tabs, Pagination, Steppercomponents-navigation
Layout & FeedbackAccordion, Collapsible, Separator, AspectRatio, Resizable, ScrollArea, Carousel, Alert, Toast/Sonnercomponents-layout

Features

TopicDescriptionReference
Field ComponentAccessible form field system with labels, descriptions, errors, groupsfeatures-field
Forms: VeeValidateForm validation with VeeValidate + Zod + Field componentfeatures-form-vee-validate
Forms: TanStack FormForm validation with TanStack Form + Zod + Field componentfeatures-form-tanstack
Data TableTanStack Table with sorting, filtering, pagination, selection, expandingfeatures-data-table
SidebarComposable sidebar with menus, collapsible groups, themingfeatures-sidebar
ChartsUnovis-based charts with ChartConfig, tooltips, legendsfeatures-charts

Advanced

TopicDescriptionReference
Custom RegistryBuilding and distributing custom component registriesadvanced-registry