shadcn-vue
Accessible Vue/Nuxt component library with Reka UI, Tailwind CSS, and dark mode support.
- Provides 50+ pre-built, accessible components (buttons, cards, dialogs, data tables, forms) installable via CLI with automatic TypeScript path configuration
- Requires initialization with
npx shadcn-vue@latest initto set upcomponents.json, Tailwind CSS variables, and path aliases before adding components - Supports dark mode through CSS variables, Auto Form for dynamic form generation, and TanStack Table integration for sortable/filterable data tables
- Includes MCP server setup for opencode, Codex, Cursor, and VS Code with registry namespace support for custom component organization
shadcn-vue
Quick Start (3 Minutes)
For Vue Projects (Vite)
1. Initialize shadcn-vue
npx shadcn-vue@latest init
During initialization:
- Style:
New YorkorDefault(cannot change later!) - Base color:
Slate(recommended) - CSS variables:
Yes(required for dark mode)
More from noartem/laravel-vue-skills
laravel-routes-best-practices
Keep routes clean and focused on mapping requests to controllers; avoid business logic, validation, or database operations in route files
29baseline-ui
Enforces an opinionated UI baseline to prevent AI-generated interface slop.
28laravel-laravel-prompting-patterns
Use Laravel-specific vocabulary—Eloquent patterns, Form Requests, API resources, jobs/queues—to get idiomatic framework code
28laravel-data-chunking-large-datasets
Process large datasets efficiently using chunk(), chunkById(), lazy(), and cursor() to reduce memory consumption and improve performance
28laravel-performance-caching
Use framework caches and value/query caching to reduce work; add tags, locks, and explicit invalidation strategies for correctness
28complexity-guardrails
Keep cyclomatic complexity low; flatten control flow, extract helpers, and prefer table-driven/strategy patterns over large switches
28