shadcn/ui Expert

Quick Start

npx shadcn@latest init
npx shadcn@latest add button card dialog input

Component Selection Guide

Key Patterns

Form with Validation (react-hook-form + zod; render inputs with Controller + the Field components)

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

Custom Component Extension

interface LoadingButtonProps extends React.ComponentProps<typeof Button> {
  loading?: boolean
}
export function LoadingButton({ loading, children, disabled, ...props }: LoadingButtonProps) {
  return (
    <Button disabled={loading || disabled} {...props}>
      {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
      {children}
    </Button>
  )
}

Component Dependencies

Best Practices

• Use semantic color variables (primary, secondary, destructive)
• Compose components for complex UI
• Use asChild for custom trigger elements