shadcn-ui（shadcn/ui 组件） Skills下载安装命令和教程

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：shadcn-ui（shadcn/ui 组件）
来源仓库：https://github.com/capraidev/shadcn-claude-skill
仓库路径：skills/shadcn-ui
安装命令：
npx skills add https://github.com/capraidev/shadcn-claude-skill --skill shadcn-ui
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/capraidev/shadcn-claude-skill --skill shadcn-ui

简介

用于辅助界面设计、视觉规范和组件层级优化。shadcn-ui 属于前端设计类 Skill，可作为该场景下的辅助能力补充。

适合生成 UI 方案、检查一致性并改进交互体验。
基于 Radix UI 和 Tailwind CSS 构建可复用组件。
需 Next.js 项目并通过 CLI 复制组件源码。
安装前建议确认权限范围，避免触发文件写入操作。

SKILL.md

Shadcn UI for Next.js

Overview

Shadcn UI is a collection of re-usable components built on Radix UI and Tailwind CSS. It is not an npm package — instead, a CLI copies component source code directly into the project at components/ui/. This gives full ownership and control over every component. All components are accessible by default (via Radix), styled with Tailwind CSS, and composable.

Official docs: https://ui.shadcn.com

Quick Start

Initialize Shadcn UI in an existing Next.js project:

npx shadcn@latest init

Add components as needed:

npx shadcn@latest add button card dialog

Import and use:

import { Button } from "@/components/ui/button"

export default function Page() {
  return <Button variant="outline">Click me</Button>
}

For the full CLI reference (all commands, flags, components.json schema), see references/cli-and-configuration.md.

Core Workflow

Follow this standard process when building with Shadcn UI:

Initialize — Run npx shadcn@latest init to generate components.json and set up paths
Add components — Run npx shadcn@latest add [name] for each component needed
Compose UI — Combine components in pages and layouts, wrap interactive ones with "use client"
Theme — Configure CSS variables in globals.css for light/dark mode
Customize — Edit component source directly in components/ui/ when needed

Component Import Convention

All Shadcn components install to components/ui/ and use the @/ path alias:

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog"

Every Shadcn component is a Client Component internally (uses Radix UI hooks). When using them in Next.js App Router:

Import them in files that have "use client" at the top, OR
Import them inside a Client Component wrapper

For the full component catalog (categorized, with install commands, imports, and variants), see references/components.md.

Next.js App Router Integration

Server vs Client Components

Shadcn components use Radix UI primitives (hooks, refs, event handlers), so they require the client runtime. Apply these rules:

Scenario	Approach
Page with only Shadcn components	Add `"use client"` to the page file
Page mixing data fetching + UI	Keep page as Server Component; extract interactive parts into a Client Component
Layout with providers	Add providers in a `"use client"` wrapper component

Provider Setup in `layout.tsx`

Place global providers in a dedicated Client Component:

// app/providers.tsx
"use client"
import { ThemeProvider } from "next-themes"
import { TooltipProvider } from "@/components/ui/tooltip"

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <TooltipProvider>
        {children}
      </TooltipProvider>
    </ThemeProvider>
  )
}

// app/layout.tsx (Server Component)
import { Providers } from "./providers"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

For layout patterns, responsive design, and component composition, see references/composition-patterns.md.

Form Building

Shadcn forms use React Hook Form + Zod for validation + Shadcn Form components for UI:

npx shadcn@latest add form input label
npm install zod

Core pattern:

"use client"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  name: z.string().min(2),
})

export function MyForm() {
  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: { email: "", name: "" },
  })

  function onSubmit(values: z.infer<typeof schema>) {
    // handle submission
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl><Input placeholder="email@example.com" {...field} /></FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}

For advanced form patterns (select, checkbox, date picker, dynamic arrays, Server Actions), see references/forms.md and examples/form-with-validation.tsx.

Data Tables

Shadcn data tables use TanStack Table with a 3-file architecture:

npx shadcn@latest add table
npm install @tanstack/react-table

File	Purpose
`columns.tsx`	Define `ColumnDef[]` with accessors, headers, cell renderers
`data-table.tsx`	Reusable `<DataTable>` component with `useReactTable`
`page.tsx`	Fetch data (Server Component) and pass to `<DataTable>`

For column definitions, sorting, filtering, pagination, and row selection patterns, see references/data-tables.md and examples/data-table-example.tsx.

Theming

Shadcn UI uses CSS variables in globals.css for all color tokens. Modern Shadcn uses the oklch color format:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  /* ... */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* ... */
}

Enable dark mode with next-themes:

npm install next-themes

For the complete variable list, dark mode toggle component, TweakCN editor workflow, sidebar tokens, and custom colors, see references/theming-and-dark-mode.md.

Charts

Shadcn Charts wrap Recharts with themed components:

npx shadcn@latest add chart
npm install recharts

Core pattern: define a ChartConfig object mapping data keys to labels and colors, wrap Recharts components in <ChartContainer>:

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

For all chart types, tooltip/legend configuration, and responsive patterns, see references/charts.md and examples/chart-config-example.tsx.

Blocks

Blocks are pre-built, full-page or section-level compositions (dashboards, login pages, sidebars). Copy the block source into the project and install required components.

For the block catalog, file structures, dependencies, and the sidebar system, see references/blocks.md and examples/dashboard-layout.tsx.

Key Rules

Do	Don't
Use `npx shadcn@latest add` to install components	Install components via npm
Import from `@/components/ui/...`	Import from `shadcn` or `@shadcn/ui`
Use CSS variables for theming (`oklch`)	Hardcode color values in components
Add `"use client"` when using interactive components	Use Shadcn components in Server Components without a client wrapper
Edit component source in `components/ui/` to customize	Create wrapper components for simple style changes
Install all dependencies for blocks	Copy block code without its required components

Reference Files

Detailed Guides

references/cli-and-configuration.md — CLI commands, components.json schema, aliases, package managers
references/components.md — Full component catalog categorized by type with variants and imports
references/composition-patterns.md — Layout patterns, Server/Client components, providers, responsive design
references/forms.md — React Hook Form + Zod + Shadcn Form component patterns
references/data-tables.md — TanStack Table integration, columns, sorting, filtering, pagination
references/charts.md — Recharts integration, ChartConfig, all chart types, tooltips
references/blocks.md — Block catalog, sidebar system, dashboard patterns, dependencies
references/theming-and-dark-mode.md — CSS variables, oklch, next-themes, TweakCN, custom colors
references/accessibility.md — Built-in Radix a11y, developer responsibilities, ARIA patterns

Code Examples

examples/form-with-validation.tsx — Complete form with Zod schema, multiple field types, submit handler
examples/data-table-example.tsx — Data table with columns, sorting, and pagination
examples/dashboard-layout.tsx — Dashboard layout with sidebar, header, and content area
examples/chart-config-example.tsx — Bar chart with full ChartConfig, tooltip, and legend

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

33.04%

按下载量换算20

Claude

30.54%

按下载量换算19

Cursor

19.12%

按下载量换算12

Gemini CLI

9.29%

按下载量换算6

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API；具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/capraidev/shadcn-claude-skill

SKILL.md 来源

github.com

/capraidev/shadcn-claude-skill/tree/main/skills/shadcn-ui

skills-sh

skills.sh

/capraidev/shadcn-claude-skill/shadcn-ui

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

shadcn-ui（shadcn/ui 组件）

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务，不应只堆装饰元素；涉及真实页面改动时，应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

下一个 Skill

shadcn-ui-conventions（shadcn/ui UI conventions 前端）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。