react-shadcn-ui

✨ Features

• 🎨 20+ Beautiful Components - Pre-built, accessible, and customizable
• 🌗 Dark Mode Built-in - Theme system with automatic dark mode
• 🎯 TypeScript First - Full type safety out of the box
• 🚀 Tailwind CSS v4 - Latest styling capabilities
• ♿ Accessible - Built on Radix UI primitives
• 🎭 Customizable - Easily override styles and behavior
• 📦 Tree-shakeable - Import only what you need
• 🔥 Zero Config - Works out of the box

📦 Installation

npm install react-shadcn-ui
# or
pnpm add react-shadcn-ui
# or
yarn add react-shadcn-ui

🎯 Quick Start

1. Install Tailwind CSS v4

npm install -D tailwindcss@^4 @tailwindcss/postcss autoprefixer

2. Configure PostCSS

Create postcss.config.js:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}

3. Import Styles

In your global CSS file (e.g., app/globals.css):

@import 'tailwindcss';
@import 'react-shadcn-ui/styles';

4. Add ThemeProvider

Wrap your app with the ThemeProvider:

import { ThemeProvider } from 'react-shadcn-ui'

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  )
}

5. Start Using Components

import { Button, Card, Input } from 'react-shadcn-ui'

export default function MyComponent() {
  return (
    <Card className="p-6">
      <h2 className="text-2xl font-bold mb-4">Welcome</h2>
      <Input placeholder="Enter your name" className="mb-4" />
      <Button>Submit</Button>
    </Card>
  )
}

📚 Available Components

Form Components

• Button - Versatile button with multiple variants
• Input - Text input field
• Textarea - Multi-line text input
• Checkbox - Checkbox with label support
• Switch - Toggle switch
• Select - Dropdown select menu
• Label - Form label

Layout Components

• Card - Content container with header, content, and footer
• Separator - Visual divider
• Alert - Alert messages with variants

Overlay Components

• Dialog - Modal dialog
• Select - Dropdown with search

Display Components

• Avatar - User avatar with fallback
• Badge - Small status badge

Theme Components

• ThemeToggle - Dark/light mode toggle button
• ThemeProvider - Theme context provider

💡 Usage Examples

Button Variants

import { Button } from 'react-shadcn-ui'

<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>

// Sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">🎨</Button>

Card with Content

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Button
} from 'react-shadcn-ui'

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content...</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Dialog Example

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  Button
} from 'react-shadcn-ui'

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Form with Validation

import { Label, Input, Checkbox, Button } from 'react-shadcn-ui'

<form className="space-y-4">
  <div>
    <Label htmlFor="email">Email</Label>
    <Input id="email" type="email" placeholder="[email protected]" />
  </div>
  <div className="flex items-center space-x-2">
    <Checkbox id="terms" />
    <Label htmlFor="terms">Accept terms and conditions</Label>
  </div>
  <Button type="submit">Submit</Button>
</form>

Theme Toggle

import { ThemeProvider, ThemeToggle } from 'react-shadcn-ui'

function App() {
  return (
    <ThemeProvider>
      <header className="flex justify-between p-4">
        <h1>My App</h1>
        <ThemeToggle />
      </header>
      <main>{/* Your content */}</main>
    </ThemeProvider>
  )
}

Select Component

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from 'react-shadcn-ui'

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

🎨 Customization

Custom Theme Colors

Override the default theme by modifying CSS variables in your global CSS:

@import 'tailwindcss';
@import 'react-shadcn-ui/styles';

@theme {
  /* Override primary color */
  --color-primary: #7c3aed;
  --color-primary-foreground: #ffffff;

  /* Override other colors */
  --color-secondary: #f3f4f6;
  --color-border: #e5e7eb;

  /* Custom border radius */
  --radius: 0.75rem;
}

Custom Component Styles

import { Button } from 'react-shadcn-ui'

// Using className
<Button className="bg-gradient-to-r from-purple-500 to-pink-500">
  Gradient Button
</Button>

// Using style prop
<Button style={{ backgroundColor: '#7c3aed' }}>
  Custom Color
</Button>

Utility Function

Use the cn utility for conditional classes:

import { Button, cn } from 'react-shadcn-ui'

<Button
  className={cn(
    "custom-class",
    isActive && "bg-blue-500",
    isDisabled && "opacity-50"
  )}
>
  Conditional Button
</Button>

🔧 Advanced Usage

Custom Theme Hook

import { useTheme } from 'react-shadcn-ui'

function MyComponent() {
  const { theme, resolvedTheme, setTheme } = useTheme()

  return (
    <div>
      <p>Current theme: {theme}</p>
      <p>Resolved theme: {resolvedTheme}</p>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('system')}>System</button>
    </div>
  )
}

Composing Components

import { Button, type ButtonProps } from 'react-shadcn-ui'

interface LoadingButtonProps extends ButtonProps {
  isLoading?: boolean
}

function LoadingButton({ isLoading, children, ...props }: LoadingButtonProps) {
  return (
    <Button {...props} disabled={isLoading || props.disabled}>
      {isLoading ? 'Loading...' : children}
    </Button>
  )
}

📖 Component API

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | default \| destructive \| outline \| secondary \| ghost \| link | default | Button style variant | | size | default \| sm \| lg \| icon | default | Button size | | asChild | boolean | false | Use Slot for composition |

Card Props

All Card components accept standard HTML div props and className for styling.

Input Props

Extends standard HTML input props with additional styling.

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📦 Peer Dependencies

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0"
}

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © [Your Name]

🙏 Credits

• Shadcn/UI - Original design system
• Radix UI - Unstyled, accessible components
• Tailwind CSS - Utility-first CSS framework
• Lucide - Beautiful icons

🔗 Links

• Documentation
• GitHub Repository
• NPM Package
• Report Issues

💬 Support

• Star the project on GitHub
• Report bugs via GitHub Issues
• Join our community discussions