Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
noartem avatar

Shadcn Vue

noartem/laravel-vue-skills

  • 766 installs
  • 10 repo stars
  • Updated June 13, 2026
  • noartem/laravel-vue-skills

shadcn-vue is a frontend skill that adds production-grade accessible UI components to Nuxt or Vue apps using shadcn-vue, Tailwind CSS, and one-command component installation for developers building design-system-backed i

About

shadcn-vue is a Claude Code skill from noartem/laravel-vue-skills for installing shadcn-vue components into Nuxt or Vue applications with Tailwind CSS and color-mode modules. It configures the shadcn-vue schema with new-york style, slate base color, CSS variables, and aliases for components, utils, ui, lib, and composables paths. The Nuxt setup integrates @nuxtjs/tailwindcss and @nuxtjs/color-mode with explicit tailwind cssPath and configPath entries. Frontend developers use it when they need accessible, copy-in UI primitives instead of hand-rolling buttons, dialogs, and forms in Vue or Nuxt codebases.

  • Official shadcn-vue component registry for Nuxt and Vue 3
  • Copies fully customizable components directly into your codebase
  • Built on Tailwind CSS, Radix Vue, and TypeScript
  • New York style preset with CSS variables and dark mode support
  • Seamless integration with Nuxt Tailwind and color-mode modules

Shadcn Vue by the numbers

  • 766 all-time installs (skills.sh)
  • +4 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #453 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Security screen: HIGH risk (skills.sh audit)
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/noartem/laravel-vue-skills --skill shadcn-vue

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs766
repo stars★ 10
Security audit2 / 3 scanners passed
Last updatedJune 13, 2026
Repositorynoartem/laravel-vue-skills ↗

How do you add shadcn-vue components to Nuxt apps?

Add production-grade, accessible UI components to Nuxt or Vue apps with one command.

Who is it for?

Vue and Nuxt developers who want accessible, Tailwind-based UI components with shadcn-vue aliases and copy-in primitives.

Skip if: React or Next.js projects that should use shadcn/ui instead of the Vue port, or backends with no frontend surface.

When should I use this skill?

The user asks to add shadcn-vue, set up Nuxt Tailwind UI components, or scaffold accessible Vue component libraries.

What you get

Configured shadcn-vue schema, Tailwind and color-mode setup, component aliases, and installed accessible UI primitives under @/components/ui.

  • shadcn-vue components.json
  • Nuxt Tailwind config
  • Installed UI primitives

Files

SKILL.mdMarkdownGitHub ↗

shadcn-vue

---

Quick Start (3 Minutes)

For Vue Projects (Vite)

1. Initialize shadcn-vue
npx shadcn-vue@latest init

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
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
3. Configure Vite
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite"; // Tailwind v4
import path from "path";

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});
4. Add Your First Component
npx shadcn-vue@latest add button

---

Quick Reference

NeedCommand or file
Initialize projectnpx shadcn-vue@latest init
Add componentnpx shadcn-vue@latest add button
Add multiple componentsnpx shadcn-vue@latest add button card dialog
Build registry JSONnpx shadcn-vue@latest build
Generate component docsnpx tsx scripts/generate-shadcn-components.ts
Enable CSS variablescomponents.json → tailwind.cssVariables: true
Add registry namespacecomponents.json → registries map
Opencode MCP initnpx shadcn-vue@latest mcp init --client opencode
Codex MCP config~/.codex/config.toml with mcp_servers.shadcn

---

Bundled Resources

Templates (templates/):

  • quick-setup.ts - Complete setup guide for Vue/Nuxt with examples (190 lines)

References (references/):

  • cli.md - CLI commands and options
  • mcp.md - MCP setup, client configs, prompts
  • theming.md - Theming and cssVariables
  • error-catalog.md - All 7 documented issues with solutions (267 lines)
  • component-examples.md - All 50+ component examples with code
  • dark-mode-setup.md - Complete dark mode implementation guide
  • data-tables.md - Data tables with TanStack Table

Component Documentation (components/):

  • references/components.md - Index of all shadcn-vue components
  • components/<component>.md - Individual component documentation with installation, usage, and examples

Official Documentation:

  • shadcn-vue Docs: https://shadcn-vue.com
  • Reka UI Docs: https://reka-ui.com
  • GitHub: https://github.com/radix-vue/shadcn-vue

---

When to Load References

Load these references based on the task:

1. Load `references/error-catalog.md` when:

  • User encounters "component not found" or import errors
  • Setup commands fail or configuration issues arise
  • Tailwind CSS variables or TypeScript paths broken
  • Trigger phrases: "not working", "error", "fails to", "broken"

2. Load `references/components.md` when:

  • User asks what components are available (names, categories, status)
  • User needs to add/use a component and wants the correct install/import paths
  • You need to confirm a component exists before recommending a custom build

3. Load `references/component-examples.md` when:

  • User asks "how do I implement [component]?"
  • Need copy-paste examples for specific components
  • Building forms, tables, navigation, or data display
  • Trigger phrases: "example", "how to use", "implement", "code sample"

4. Load `references/cli.md` when:

  • User asks how to run the CLI (init, add, update) or what prompts mean
  • Need the exact command/flags for installing one or more components
  • Troubleshooting CLI-related issues (registry, paths, overwrites)

5. Load `references/dark-mode-setup.md` when:

  • Implementing dark mode / theme switching
  • User mentions Vue 3 + Vite, Nuxt, or Astro setup
  • Need composable patterns for theme management
  • Trigger phrases: "dark mode", "theme", "light/dark", "color scheme"

6. Load `references/theming.md` when:

  • User wants to customize theme tokens via CSS variables (cssVariables, :root, .dark)
  • Need to wire Tailwind to CSS-variable-based colors and radii
  • Setting up/adjusting design tokens (colors, radius, typography) for shadcn-vue

7. Load `references/mcp.md` when:

  • Setting up MCP server for opencode, Codex, Cursor, VS Code
  • Configuring registries in components.json
  • Troubleshooting missing components or registry namespaces
  • Trigger phrases: "MCP", "opencode", "codex", "cursor", "registry"

8. Load `references/data-tables.md` when:

  • Building sortable/filterable/paginated tables
  • User mentions TanStack Table or DataTable
  • Trigger phrases: "data table", "table", "tanstack", "sorting", "pagination"

---

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

✅ Configure TypeScript path aliases

  • Required for component imports
  • Must match components.json aliases

✅ Keep components.json in version control

  • Team members need same configuration
  • Documents project setup

Never Do

❌ Don't change `style` after initialization

  • Requires complete reinstall
  • Reinitialize in new directory instead

❌ Don't mix Radix Vue and Reka UI v2

  • Incompatible component APIs
  • Use one or the other

❌ Don't skip TypeScript configuration

  • Component imports will fail
  • IDE autocomplete won't work

❌ Don't use without Tailwind CSS

  • Components are styled with Tailwind
  • Won't render correctly

---

Common Mistakes

  • Running add before init and missing components.json.
  • Forgetting to enable the MCP server in the client UI/config.
  • Mis-typed registry namespaces (@namespace/component).
  • Using CSS variable classes without tailwind.cssVariables: true.

---

CLI Commands Reference

init Command

# Initialize in current directory
npx shadcn-vue@latest init

# Initialize in specific directory (monorepo)
npx shadcn-vue@latest init -c ./apps/web

add Command

# Add single component
npx shadcn-vue@latest add button

# Add multiple components
npx shadcn-vue@latest add button card dialog

# Add all components
npx shadcn-vue@latest add --all

diff Command

# Check for component updates
npx shadcn-vue@latest diff button

mcp Command

# Initialize MCP for specific client
npx shadcn-vue@latest mcp init --client opencode
npx shadcn-vue@latest mcp init --client codex
npx shadcn-vue@latest mcp init --client cursor
npx shadcn-vue@latest mcp init --client vscode

---

Configuration

shadcn-vue uses components.json to configure:

  • Component paths (@/components/ui)
  • Utils location (@/lib/utils)
  • Tailwind config paths
  • TypeScript paths

Full example: See templates/components.json or generate via npx shadcn-vue@latest init

---

Utils Library

The @/lib/utils.ts file provides the cn() helper for merging Tailwind classes:

  • Combines multiple className strings
  • Uses clsx + tailwind-merge for conflict resolution

Auto-generated by shadcn-vue init - no manual setup needed.

Related skills

vercel-labsVercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kvercel-labsVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6kshadcnShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120kxixu-meDevelop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72leonxlnxMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kleonxlnxImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

Forks & variants (1)

Shadcn Vue has 1 known copy in the catalog totaling 98 installs. They canonicalize to this original listing.

How it compares

Use shadcn-vue for Vue/Nuxt copy-in components; use shadcn/ui skills for React or Next.js frontends.

FAQ

Which frameworks does shadcn-vue support?

shadcn-vue targets Nuxt and Vue applications, configuring Tailwind CSS, color mode, and component aliases so developers can add accessible UI primitives with shadcn-vue commands.

What Tailwind setup does shadcn-vue configure?

shadcn-vue applies the shadcn-vue schema with new-york style, slate base color, CSS variables, and Nuxt modules @nuxtjs/tailwindcss and @nuxtjs/color-mode for component styling.

Is Shadcn Vue safe to install?

skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Frontend Developmentfrontendintegrations
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.