Shadcn UI Components

A comprehensive collection of shadcn/ui components built with React, TypeScript, and Tailwind CSS. This package provides a complete set of accessible, customizable UI components that follow modern design patterns.

Installation

npm install @your-org/shadcn-ui-components
# or
yarn add @your-org/shadcn-ui-components
# or
pnpm add @your-org/shadcn-ui-components

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0"
}

Usage

Import all components

import { Button, Card, Input } from '@your-org/shadcn-ui-components';

function App() {
  return (
    <div>
      <Card>
        <Card.Header>
          <Card.Title>Welcome</Card.Title>
        </Card.Header>
        <Card.Content>
          <Input placeholder="Enter your name" />
          <Button>Submit</Button>
        </Card.Content>
      </Card>
    </div>
  );
}

Import specific UI components

import { Button, Card, Input } from '@your-org/shadcn-ui-components/ui';

Available Components

Layout & Structure

• Accordion - Collapsible content sections
• Card - Container for content with header, content, and footer
• Collapsible - Show/hide content with smooth animations
• Separator - Visual divider between content
• Sheet - Slide-out panel from screen edges
• Sidebar - Navigation sidebar with collapsible functionality

Navigation

• Breadcrumb - Navigation breadcrumbs
• Menubar - Horizontal menu bar
• Navigation Menu - Accessible navigation menu
• Pagination - Page navigation controls
• Tabs - Tabbed content interface

Forms & Input

• Button - Interactive button with multiple variants
• Checkbox - Checkbox input control
• Form - Form components with validation
• Input - Text input field
• Input OTP - One-time password input
• Label - Form field labels
• Radio Group - Radio button group
• Select - Dropdown selection
• Slider - Range slider input
• Switch - Toggle switch
• Textarea - Multi-line text input
• Toggle - Toggle button
• Toggle Group - Group of toggle buttons

Feedback & Status

• Alert - Important message display
• Alert Dialog - Confirmation dialog
• Badge - Status indicators
• Progress - Progress indicator
• Skeleton - Loading placeholders
• Toast - Notification messages (via Sonner)

Data Display

• Avatar - User profile images
• Calendar - Date picker calendar
• Chart - Data visualization components
• Table - Data table with sorting and pagination

Overlays & Modals

• Dialog - Modal dialog
• Drawer - Slide-out drawer
• Dropdown Menu - Context menu dropdown
• Hover Card - Hover-triggered card
• Popover - Floating content container
• Tooltip - Hover tooltips

Media & Content

• Aspect Ratio - Maintain aspect ratio for media
• Carousel - Image/content carousel
• Scroll Area - Custom scrollable area

Utilities

• Command - Command palette interface
• Context Menu - Right-click context menu
• Resizable - Resizable panels

Styling

This package uses Tailwind CSS for styling. Make sure you have Tailwind CSS configured in your project.

Required CSS

Include the following CSS in your project:

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind Configuration

Ensure your tailwind.config.js includes the necessary configuration for shadcn/ui components:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

Development

Building the Library

npm run build:lib

Running Tests

npm test

Storybook

npm run storybook

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• shadcn/ui for the original component designs
• Radix UI for the accessible primitives
• Tailwind CSS for the styling system