@packagedcn/react

All shadcn/ui components packaged together in a single, ready-to-use React library. No more copying and pasting individual components - just install and start building.

Features

• 50+ shadcn/ui components - All your favorite components in one package
• Zero configuration - Works out of the box with Tailwind CSS v4
• TypeScript ready - Full TypeScript support with proper type definitions
• Tree-shakeable - Import only what you need
• Single dependency - No need to manage multiple component packages
• Storybook ready - Includes stories for all components

Quick Start

1. Installation

npm install @packagedcn/react
# or
yarn add @packagedcn/react
# or
pnpm add @packagedcn/react

2. Tailwind CSS Setup

Option A: Tailwind CSS v4 (Recommended)

Install Tailwind CSS v4:

npm install tailwindcss@next @tailwindcss/vite@next

In your main CSS file (e.g., src/index.css or app/globals.css):

@import 'tailwindcss';

/* Add @source directive to include styles from @packagedcn/react */
@source "node_modules/@packagedcn/react";

Option B: Tailwind CSS v3

Install Tailwind CSS v3:

npm install tailwindcss

In your main CSS file:

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

Update your tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@packagedcn/react/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Start Using Components

import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@packagedcn/react'

function App() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
        <CardDescription>
          Get started with @packagedcn/react
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  )
}

Available Components

Core Components

• Button - Various button styles and sizes
• Input - Form input with validation states
• Label - Accessible form labels
• Textarea - Multi-line text input
• Select - Dropdown selection component
• Checkbox - Checkbox input with custom styling
• Radio Group - Radio button selection
• Switch - Toggle switch component
• Slider - Range slider input

Layout & Navigation

• Card - Content container with header/footer
• Separator - Visual content divider
• Aspect Ratio - Maintain element aspect ratios
• Scroll Area - Custom scrollable areas
• Resizable - Resizable panel layouts
• Navigation Menu - Accessible navigation menus
• Breadcrumb - Navigation breadcrumbs
• Pagination - Page navigation controls
• Sidebar - Collapsible sidebar layouts

Overlays & Dialogs

• Dialog - Modal dialog component
• Alert Dialog - Confirmation dialogs
• Sheet - Slide-out panel component
• Drawer - Mobile-friendly drawers
• Popover - Floating content containers
• Tooltip - Contextual information tooltips
• Hover Card - Hover-triggered content cards
• Context Menu - Right-click context menus
• Dropdown Menu - Dropdown action menus
• Menubar - Application menu bar

Data Display

• Avatar - User profile images
• Badge - Status and category indicators
• Alert - Important message display
• Progress - Progress indicator bars
• Skeleton - Loading state placeholders
• Data Table - Feature-rich data tables
• Chart - Data visualization components

Forms & Input

• Calendar - Date selection calendar
• Date Picker - Date input with calendar
• Combobox - Searchable select component
• Command - Command palette interface
• Input OTP - One-time password input

Feedback & Communication

• Toast - Notification messages
• Sonner - Advanced toast notifications

Interactive

• Accordion - Collapsible content sections
• Collapsible - Show/hide content areas
• Tabs - Tabbed interface component
• Carousel - Image/content carousel
• Toggle - Binary toggle buttons
• Toggle Group - Grouped toggle selection

Utilities

• Typography - Text styling components

Framework Compatibility

This package is compatible with:

• � React 16.8+ (hooks required)
• � Next.js 13+ (App Router & Pages Router)
• =% Vite
• =� Create React App
• <� Remix
• < Astro (with React integration)

Peer Dependencies

Make sure you have these installed:

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

Tailwind CSS v4 Migration

If you're upgrading from Tailwind CSS v3 to v4, here are the key changes:

Before (v3):

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

After (v4):

@import 'tailwindcss';

@source "node_modules/@packagedcn/react";

Configuration

• No more tailwind.config.js required
• Content detection is automatic
• Use @source directive for explicit source paths
• Configure customizations directly in CSS

TypeScript

Full TypeScript support is included. All components are typed and will provide proper IntelliSense in your editor.

import type { ButtonProps } from '@packagedcn/react'

const CustomButton: React.FC<ButtonProps> = ({ variant = 'default', ...props }) => {
  return <Button variant={variant} {...props} />
}

Examples

Form Example

import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Input,
  Label
} from '@packagedcn/react'

function LoginForm() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Login</CardTitle>
        <CardDescription>Enter your credentials</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="Enter your email" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" placeholder="Enter your password" />
        </div>
        <Button className="w-full">Sign In</Button>
      </CardContent>
    </Card>
  )
}

Data Table Example

import { Button, DataTable } from '@packagedcn/react'

const data = [
  { id: 1, name: 'John Doe', email: '[email protected]', status: 'Active' },
  { id: 2, name: 'Jane Smith', email: '[email protected]', status: 'Inactive' },
]

const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
  { accessorKey: 'status', header: 'Status' },
]

function UsersTable() {
  return <DataTable columns={columns} data={data} />
}

Development

# Install dependencies
pnpm install

# Start development
pnpm dev

# Build the package
pnpm build

# Run Storybook
pnpm storybook

# Type checking
pnpm typecheck

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Related

• shadcn/ui - The original component library
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Low-level UI primitives

Made by Cedric Mutesa