Building Beautiful UIs with shadcn/ui

shadcn/ui has revolutionized how we build component libraries by providing copy-paste components that you own and can customize. Let's explore how to create stunning user interfaces with this approach.

What is shadcn/ui?

Unlike traditional component libraries, shadcn/ui provides:

Copy-paste components: You own the code

Built on Radix UI: Accessible primitives

Styled with Tailwind CSS: Utility-first styling

TypeScript support: Full type safety

Installation

Getting started is simple:

npx shadcn-ui@latest init

This command will:

1. Setup your components.json file

2. Install required dependencies

3. Configure your tailwind.config.js

4. Setup CSS variables for theming

Then add components as needed:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog

Building a Card Component

Here's how to create a beautiful card:

import { Badge } from '@/components/ui/badge'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
export function FeatureCard() {
  return (
    
      
        

          

            Amazing Feature
            
              Discover what makes this feature special
            
          

          New
        

      
      
        

          Your feature content goes here with beautiful typography and spacing.
        

      
    
  )
}

Theming and Customization

The beauty of shadcn/ui is complete control over styling. Customize your theme in globals.css:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;
  }
}

Advanced Component Patterns

Compound Components

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
export function PricingCard({
  title,
  price,
  features,
  highlighted = false,
}: {
  title: string
  price: string
  features: string[]
  highlighted?: boolean
}) {
  return (
    relative ${highlighted ? 'ring-2 ring-primary' : ''}}>
      {highlighted && (
        

          Most Popular
        

      )}
      
        {title}
        
{price}

      
      
        

          {features.map((feature, index) => (
            

              
              {feature}
            

          ))}
        

        
          className="w-full"
          variant={highlighted ? 'default' : 'outline'}
        >
          Get Started
        
      
    
  )
}

Component Composition

shadcn/ui components are designed to work together seamlessly:

import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
export function ContactDialog() {
  return (
    

      
        
      
      
        
          Get in Touch
          
            Send us a message and we'll get back to you soon.
          
        
        

          

            Email
            
          

          

            Message
            
              id="message"
              className="min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2"
              placeholder="Your message..."
            />
          

          
        

      
    
  )
}

Best Practices

1. Consistent Spacing: Use the built-in spacing scale

2. Semantic Colors: Use color variables instead of hardcoded values

3. Responsive Design: All components work great on mobile

4. Accessibility: Built on Radix UI for excellent a11y support

Conclusion

shadcn/ui empowers developers to build beautiful, accessible UIs without sacrificing control. By owning your components, you can customize them to perfectly match your design system while maintaining consistency and quality.

The copy-paste approach means you're never locked into a specific version or framework - you have complete control over your UI components.