Agent skill · software engineering · secondsky
shadcn-vue
shadcn-vue for Vue/Nuxt with Reka UI components and Tailwind. Use for accessible UI, Auto Form, data tables, charts, or encountering component imports, dark mode, Reka UI errors.
Why this skill is useful
Provides specific commands and configurations for integrating shadcn-vue with Vue/Nuxt applications that the AI wouldn't reliably generate on its own.
What it needs
Requires bun, npm installed locally. About 7k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
shadcn-vue Production Stack Production-tested: Vue/Nuxt applications with accessible, customizable components Last Updated: 2025-12-09 Status: Production Ready ✅ Latest Version: shadcn-vue@latest (Reka UI v2) Dependencies: Tailwind CSS, Reka UI, Vue 3+ or Nuxt 3+ --- Quick Start (3 Minutes) For Vue Projects (Vite) 1. Initialize shadcn-vue During initialization: Style: New York or Default (cannot change later!) Base color: Slate (recommended) CSS variables: Yes (required for dark mode) 2. Configure TypeScript Path Aliases 3. Configure Vite 4. Add Your First Component See Full Setup: templates/quick-setup.ts --- For Nuxt Projects --- Component Library (50+ Components) Navigation & Layout Accordion, Alert Dialog, Avatar, Badge, Breadcrumb, Card, Carousel, Collapsible, Dialog, Drawer, Dropdown Menu, Menu Bar, Navigation Menu, Pagination, Popover, Resizable, Scroll Area, Sheet, Sidebar, Tabs, Toast, Tooltip Form Components Auto Form, Button, Calendar, Checkbox, Combobox, Command, Context Menu, Date Picker, Form, Input, Input OTP, Label, Number Field, PIN Input, Radio Group, Range Calendar, Select, Slider, Sonner, Switch, Textarea, Toggle, Toggle Group Data Display Aspect Ratio, Data Table, Skeleton, Stepper, Splitter, Table, Tag Input Advanced Charts (Unovis), Color Picker, Editable, File Upload, Sortable Full Component Reference: https://shadcn-vue.com/docs/components --- Auto Form - Schema-Based Forms Installation Basic Usage Supported Field Types: string, number, boolean, date, enum, array, object --- Data Tables with TanStack Table Installation Basic Setup Features: Sorting, filtering, pagination, row selection, column visibility, expandable rows --- Dark Mode Implementation Installation Setup Theme Provider Use in Components --- Critical Rules Always Do ✅ Run init before adding components Creates required configuration and utilities Sets up path aliases ✅ Use CSS variables for theming (cssVariables: true) Enables dark mode support Flexible theme customization ✅ Conf …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/shadcn-vue