Shadcn Ui Designer

Shadcn UI Designer

Build production-ready UI components using shadcn/ui principles: minimal, accessible, composable, and beautiful by default.

Core Philosophy

Design modern, minimal interfaces with:

• Clean typography (Inter/system fonts, 2-3 weights max)
• Ample whitespace (4px-based spacing: p-1 through p-8)
• Subtle shadows (shadow-sm/md/lg only)
• Accessible contrast (WCAG AA minimum)
• Smooth micro-interactions (200-300ms transitions)
• Professional neutrals (slate/zinc scale) with subtle accents

Build composable components that work together seamlessly.

Quick Start Pattern

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

export function MyComponent() {
  return (
    
      
        Title
        Description
      

      
        
          Section
        
        
          {/* Content here */}
        
      
    
  )
}

Design System Rules

Typography

• Hierarchy: text-2xl (headings) → text-base (body) → text-sm (secondary)
• Weights: font-semibold (600) for emphasis, font-medium (500) for labels, font-normal (400) for body
• Colors: text-foreground (primary), text-muted-foreground (secondary)

Page Title
Supporting text

Spacing

Use consistent spacing scale:

• Micro: space-y-2 (8px) - within sections
• Small: space-y-4 (16px) - between elements
• Medium: space-y-6 (24px) - between sections
• Large: space-y-8 (32px) - major divisions

  
    
      {/* Related elements */}
    
  

Colors

Use semantic color tokens:

• Background: bg-background, bg-card, bg-muted
• Foreground: text-foreground, text-muted-foreground
• Borders: border-border, border-input
• Primary: bg-primary, text-primary-foreground
• Destructive: bg-destructive, text-destructive-foreground

  
    Primary Action
  
  
    Subtle highlight
  

Shadows & Elevation

Three levels only:

• shadow-sm: Cards, raised sections (0 1px 2px)
• shadow-md: Dropdowns, popovers (0 4px 6px)
• shadow-lg: Modals, dialogs (0 10px 15px)

Animations

• Duration: 200-300ms
• Easing: ease-in-out
• Use cases: Hover states, loading states, reveals

Accessibility

Always include:

• Semantic HTML (`, , `)
• ARIA labels on icons/actions
• Focus states (:focus-visible:ring-2)
• Keyboard navigation
• WCAG AA contrast (4.5:1 minimum)

Component Patterns

Dashboard Cards

  {stats.map(stat => (
    
      
        
          {stat.label}
        
        {stat.icon}
      
      
        {stat.value}
        
          {stat.change}
        
      
    
  ))}

Forms

  
    
      Full Name
      
    
    
    
      Email
      
    
  

  
    Submit
    Cancel
  

Data Tables

  
    Recent Orders
  
  
    
      
        
          Order
          Customer
          Status
          Amount
        
      
      
        {orders.map(order => (
          
            {order.id}
            {order.customer}
            
              
                {order.status}
              
            
            
              {order.amount}
            
          
        ))}
      
    
  

Modals/Dialogs

  
    Open Dialog
  
  
    
      Edit Profile
      
        Make changes to your profile here. Click save when done.
      
    
    
      {/* Form fields */}
    
    
      Save changes
    
  

Loading States

// Skeleton loading

  
    
  
  
    
    
  

// Loading button

  
  Please wait

Empty States

  
    
      
    
    
      No results found
      
        Try adjusting your search
      
    
    
      Clear filters
    
  

Layout Patterns

Container Widths

// Full width with constraints

// Content-focused (prose)

// Form-focused

Responsive Grids

// Dashboard grid

// Content + sidebar

  {/* Content */}
  {/* Sidebar */}

// Two column split

Navigation

  
    
      
      
        
          Dashboard
        
        
          Projects
        
      
    
    
    
      
        
      
      
        
        {user.initials}
      
    
  

Best Practices

Component Organization

// ✅ Good: Small, focused components
export function UserCard({ user }) {
  return (
    
      
        
        
      
    
  )
}

// ❌ Avoid: Large monolithic components
export function DashboardPage() {
  // 500 lines of JSX...
}

Composability

// ✅ Compose shadcn components

  
    
      
    
  
  
    Edit
    Share
    
    
      Delete
    
  

State Management

// Form state
const [formData, setFormData] = useState({ name: '', email: '' })

// Loading states
const [isLoading, setIsLoading] = useState(false)

// UI states
const [isOpen, setIsOpen] = useState(false)

Error Handling

  
    Email
    
    {errors.email && (
      {errors.email}
    )}
  

Common Shadcn Components

Essential Components

• Layout: Card, Tabs, Sheet, Dialog, Popover, Separator
• Forms: Input, Textarea, Select, Checkbox, Radio, Switch, Label
• Buttons: Button, Toggle, ToggleGroup
• Display: Badge, Avatar, Skeleton, Table
• Feedback: Alert, Toast, Progress
• Navigation: NavigationMenu, DropdownMenu, Command

Button Variants

Primary
Secondary
Outline
Ghost
Link
Delete

Badge Variants

Default
Secondary
Outline
Error

Workflow

1. Understand requirements - What component/page is needed?
2. Choose components - Which shadcn/ui components fit?
3. Build structure - Layout and hierarchy first
4. Apply styling - Typography, spacing, colors
5. Add interactions - Hover states, transitions, focus
6. Ensure accessibility - ARIA, keyboard, contrast
7. Test responsive - Mobile, tablet, desktop

Quality Checklist

Before completing:

• [ ] Uses shadcn/ui components appropriately
• [ ] Follows 4px spacing scale (p-2, p-4, p-6, etc.)
• [ ] Uses semantic color tokens (bg-card, text-foreground, etc.)
• [ ] Limited shadow usage (shadow-sm/md/lg only)
• [ ] Smooth transitions (200-300ms duration)
• [ ] ARIA labels on interactive elements
• [ ] Keyboard focus visible (ring-2 ring-primary)
• [ ] WCAG AA contrast ratios
• [ ] Mobile-responsive layout
• [ ] Loading and error states handled

References

• Shadcn UI - Component library
• Tailwind CSS - Utility classes
• WCAG 2.1 - Accessibility standards

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: JSBtechnologies
• Source: JSBtechnologies/claude-skills
• License: MIT

Install and usage instructions live in the source repository linked above.