skills.rest
oss-apps
oss-appsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn

Identifies and manages shadcn/ui components and configurations in Next.js or Vite projects via CLI workflows.

1.4k|181|Updated Feb 22, 2024
Search Tags:#ui#components#cli#setup#shadcn#preset#registries
One-click install
npx skills add https://github.com/oss-apps/split-pro --skill shadcn-oss-apps
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/oss-apps/split-pro/tree/main/.opencode/skills/shadcn
Command: npx skills add https://github.com/oss-apps/split-pro --skill shadcn-oss-apps

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams manage and orchestrate the shadcn/ui component library across projects by centralizing setup, customization, and upgrades through a CLI-driven workflow.

Core Features & Use Cases

  • Centralized project context and component docs for consistent UI across apps.
  • Quick presets, registries, and theme customization to accelerate setup and upgrades.
  • Safe application of presets with diffing, dry-run, and change auditing via the shadcn CLI.

Quick Start

Run the shadcn CLI in your project to bootstrap presets and manage components.

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 or Vite project?▼

To manage shadcn/ui components, run the CLI via npx shadcn@latest to add components, apply presets, and adjust themes within Next.js or Vite apps. This workflow centralizes configuration and ensures consistent UI component orchestration.

Can I apply custom themes and presets to shadcn/ui components without breaking existing code?▼

Yes, applying custom themes and presets to shadcn/ui components is safe using the CLI's diffing and dry-run capabilities. You can audit changes before execution, ensuring your existing Next.js or Vite project configuration remains intact during upgrades.

What is the best way to set up shadcn component registries for consistent UI across multiple apps?▼

The best way to set up shadcn component registries is by using the CLI-driven workflow to bootstrap presets. This centralizes project context and component documentation, accelerating setup and ensuring UI consistency across multiple applications.

Does the shadcn CLI support dry-run and change auditing when applying component updates?▼

Yes, the shadcn CLI supports safe application of presets through diffing, dry-run, and change auditing. This allows you to verify component updates and theme customizations before committing them to your project.

Why do I need frontmatter-driven discovery for shadcn/ui component workflows?▼

Frontmatter-driven discovery is needed to identify and manage specific shadcn/ui Skill units within your project. It ensures the CLI accurately reads optional scripts, references, and assets to execute component setup and theme adjustments correctly.

Related Skills

Explore More Software Engineering Skills→
djankiesdjankies

configuring-tailwind-v4

Configure Tailwind CSS v4 with CSS-first @import and @theme directives.

Community
Advanced
claude-worldclaude-world
81

changelog

Automate collection of code changes, test results, and commit history via Git hooks.

Official
Intermediate
velopulentvelopulent
2

shadcn

Manage shadcn/ui component installation, configuration, and styling via CLI.

Official
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

react-native-web-testing

Test React Native Web components with Jest and React Native Testing Library.

Official
Intermediate