shadcn

Manage shadcn/ui components and presets in Next.js and Vite projects.

Updated Nov 16, 2025
One-click install
npx skills add https://github.com/daniel-dihardja/menuyukti --skill shadcn-daniel-dihardja
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/daniel-dihardja/menuyukti/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/daniel-dihardja/menuyukti --skill shadcn-daniel-dihardja

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes management of shadcn/ui components and project context to ensure design consistency across multiple apps and teams.

Core Features & Use Cases

  • Project context inspection, preset management, and component discovery to accelerate UI development.
  • Safe integration with shadcn/ui into common frameworks (Next.js, Vite, TanStack Start) using base-nova or radix-nova presets.
  • Enforces design-system rules and provides guidance for initializing projects, adding components, upgrading styles, and maintaining consistency.

Quick Start

Initialize a project with shadcn UI using a preset and then add components as needed.

Frequently Asked Questions about shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add and manage shadcn/ui components in a Next.js project?

To manage shadcn/ui components in Next.js, you use a CLI-based approach that initializes the project with a preset, adds components as needed, and enforces design-system rules by aligning with your Tailwind config, icon library, and path aliases.

Can I use shadcn/ui components with Vite and Tailwind?

Yes, shadcn/ui components can be integrated with Vite. The process requires aligning with the project's Tailwind config, path aliases, and resolved paths to safely apply presets and manage component styles via the CLI.

What are base-nova and radix-nova presets in shadcn?

Base-nova and radix-nova presets are predefined configuration styles for shadcn/ui that allow you to initialize projects and upgrade component styles while enforcing consistent design-system rules across multiple applications.

How do I ensure design consistency for shadcn components across multiple apps?

You ensure design consistency by centralizing shadcn/ui component management through project context inspection, applying specific presets, and enforcing design-system rules across all integrated applications and team workflows.

Do I need to configure path aliases before adding shadcn components?

Yes, configuring path aliases and resolved paths is required before adding shadcn components. The CLI operations depend on alignment with your Tailwind config and path aliases to correctly resolve and integrate the UI components.

Why is my shadcn CLI component installation not working?

Shadcn CLI installations often fail when there is a misalignment between the project's Tailwind config, icon library, or path aliases. The CLI requires strict alignment with these resolved paths to perform operations successfully.