shadcn-master

name	shadcn-master
description	Shadcn UI, Radix UI, and Tailwind CSS component patterns for enterprise applications
tier	HIGH
value_tier	production
tags	["ui","components","shadcn","tailwind","radix"]
entitlements	{"product_tiers":["all"],"agent_access":["all"]}

Shadcn UI Mastery

Component Philosophy

• Copy/paste components (not npm dependency)
• Full control over code
• Easy customization
• Type-safe with TypeScript

Common Patterns

Button Variants

<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Form with React Hook Form + Zod

const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),
  defaultValues: { email: '' }
})

<FormField
  control={form.control}
  name="email"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Responsive Design

// Mobile first approach
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  {/* Content */}
</div>

Accessibility

• Use Radix UI primitives
• Proper ARIA labels
• Keyboard navigation
• Focus management
• Screen reader support