Back to Details

shadcn

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

shadcn/ui

shadcn/ui

Instructions

使用说明

This project uses shadcn/ui with the New York style variant. Components are built on Radix UI primitives with Tailwind CSS styling.
本项目使用New York风格变体的shadcn/ui，组件基于Radix UI基础组件构建，并使用Tailwind CSS进行样式设计。

Configuration

配置信息

  • Style: 
    new-york
  • Base color: 
    neutral
  • Icons: 
    lucide-react
  • Components location: 
    resources/js/components/ui/
  • Utils location: 
    resources/js/lib/utils.ts
  • 样式：
    new-york
  • 基础颜色：
    neutral
  • 图标：
    lucide-react
  • 组件位置：
    resources/js/components/ui/
  • 工具函数位置：
    resources/js/lib/utils.ts

Adding New Components

添加新组件

Use the shadcn CLI to add components:
bash
npx shadcn@latest add <component-name>
Examples:
bash
npx shadcn@latest add table
npx shadcn@latest add tabs
npx shadcn@latest add calendar
Do NOT manually create shadcn components - always use the CLI to ensure correct styling and dependencies.
使用shadcn CLI添加组件：
bash
npx shadcn@latest add <component-name>
示例：
bash
npx shadcn@latest add table
npx shadcn@latest add tabs
npx shadcn@latest add calendar
请勿手动创建shadcn组件——请始终使用CLI以确保样式和依赖正确。

Available Components

已安装组件

Components already installed in this project:
  • alert
  • alert-dialog
  • avatar
  • badge
  • breadcrumb
  • button
  • card
  • checkbox
  • collapsible
  • dialog
  • dropdown-menu
  • input
    , 
    input-otp
  • label
  • navigation-menu
  • select
  • separator
  • sheet
  • sidebar
  • skeleton
  • sonner
    (toast notifications)
  • spinner
  • toggle
    , 
    toggle-group
  • tooltip
本项目已安装以下组件：
  • alert
  • alert-dialog
  • avatar
  • badge
  • breadcrumb
  • button
  • card
  • checkbox
  • collapsible
  • dialog
  • dropdown-menu
  • input
    , 
    input-otp
  • label
  • navigation-menu
  • select
  • separator
  • sheet
  • sidebar
  • skeleton
  • sonner
    （通知提示）
  • spinner
  • toggle
    , 
    toggle-group
  • tooltip

Using Components

使用组件

Always import from 
@/components/ui/
:
<code-snippet name="Importing shadcn Components" lang="tsx"> import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; </code-snippet>
请始终从
@/components/ui/
导入组件：
<code-snippet name="Importing shadcn Components" lang="tsx"> import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; </code-snippet>

Button Variants

按钮变体

<code-snippet name="Button Variants" lang="tsx"> <Button>Default</Button> <Button variant="secondary">Secondary</Button> <Button variant="destructive">Destructive</Button> <Button variant="outline">Outline</Button> <Button variant="ghost">Ghost</Button> <Button variant="link">Link</Button>
{/_ Sizes _/} <Button size="sm">Small</Button> <Button size="default">Default</Button> <Button size="lg">Large</Button> <Button size="icon"><IconComponent /></Button> </code-snippet>
<code-snippet name="Button Variants" lang="tsx"> <Button>Default</Button> <Button variant="secondary">Secondary</Button> <Button variant="destructive">Destructive</Button> <Button variant="outline">Outline</Button> <Button variant="ghost">Ghost</Button> <Button variant="link">Link</Button>
{/_ Sizes _/} <Button size="sm">Small</Button> <Button size="default">Default</Button> <Button size="lg">Large</Button> <Button size="icon"><IconComponent /></Button> </code-snippet>

Form Patterns

表单示例

Use Label + Input together, with proper error styling:
<code-snippet name="Form Field Pattern" lang="tsx"> import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; <div className="space-y-2"> <Label htmlFor="email">Email</Label> <Input id="email" name="email" type="email" placeholder="you@example.com" aria-invalid={!!errors.email} /> {errors.email && ( <p className="text-sm text-destructive">{errors.email}</p> )} </div> </code-snippet>
请结合使用Label和Input组件，并添加正确的错误样式：
<code-snippet name="Form Field Pattern" lang="tsx"> import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; <div className="space-y-2"> <Label htmlFor="email">Email</Label> <Input id="email" name="email" type="email" placeholder="you@example.com" aria-invalid={!!errors.email} /> {errors.email && ( <p className="text-sm text-destructive">{errors.email}</p> )} </div> </code-snippet>

Dialog Pattern

对话框示例

<code-snippet name="Dialog Example" lang="tsx"> import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; <Dialog> <DialogTrigger asChild> <Button>Open Dialog</Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Dialog Title</DialogTitle> <DialogDescription> Description text goes here. </DialogDescription> </DialogHeader> {/* Dialog content */} </DialogContent> </Dialog> </code-snippet>
<code-snippet name="Dialog Example" lang="tsx"> import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; <Dialog> <DialogTrigger asChild> <Button>Open Dialog</Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Dialog Title</DialogTitle> <DialogDescription> Description text goes here. </DialogDescription> </DialogHeader> {/* Dialog content */} </DialogContent> </Dialog> </code-snippet>

Toast Notifications

通知提示

Use Sonner for toast notifications:
<code-snippet name="Toast Usage" lang="tsx"> import { toast } from 'sonner';
// Success toast.success('Changes saved successfully');
// Error toast.error('Something went wrong');
// With description toast.success('Project created', { description: 'Your new project is ready to use.', }); </code-snippet>
使用Sonner实现通知提示：
<code-snippet name="Toast Usage" lang="tsx"> import { toast } from 'sonner';
// Success toast.success('Changes saved successfully');
// Error toast.error('Something went wrong');
// With description toast.success('Project created', { description: 'Your new project is ready to use.', }); </code-snippet>

The cn() Utility

cn()工具函数

Use 
cn()
from 
@/lib/utils
to merge Tailwind classes conditionally:
<code-snippet name="cn() Usage" lang="tsx"> import { cn } from '@/lib/utils'; <div className={cn( 'rounded-lg border p-4', isActive && 'border-primary bg-primary/10', className )}> {children} </div> </code-snippet>
使用
@/lib/utils
中的
cn()
工具函数来按需合并Tailwind类：
<code-snippet name="cn() Usage" lang="tsx"> import { cn } from '@/lib/utils'; <div className={cn( 'rounded-lg border p-4', isActive && 'border-primary bg-primary/10', className )}> {children} </div> </code-snippet>

Icons

图标

Use Lucide React for icons:
<code-snippet name="Icon Usage" lang="tsx"> import { Plus, Trash2, Edit, ChevronRight } from 'lucide-react'; <Button> <Plus /> Add Item </Button> <Button variant="ghost" size="icon"> <Trash2 /> </Button> </code-snippet>
使用Lucide React提供图标：
<code-snippet name="Icon Usage" lang="tsx"> import { Plus, Trash2, Edit, ChevronRight } from 'lucide-react'; <Button> <Plus /> Add Item </Button> <Button variant="ghost" size="icon"> <Trash2 /> </Button> </code-snippet>