npm package: @packagedcn/react
Description: All shadcn components in one package for React
Latest version: 0.1.3

# @packagedcn/react

[![npm version](https://badge.fury.io/js/@packagedcn%2Freact.svg)](https://badge.fury.io/js/@packagedcn%2Freact)

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

```bash
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:

```bash
npm install tailwindcss@next @tailwindcss/vite@next
```

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

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

```bash
npm install tailwindcss
```

In your main CSS file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Update your `tailwind.config.js`:

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

### 4. Start Using Components

```tsx
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:

```json
{
  "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):
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### After (v4):
```css
@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.

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

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

## Examples

### Form Example
```tsx
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
```tsx
import { Button, DataTable } from '@packagedcn/react'

const data = [
  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', 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

```bash
# 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](https://ui.shadcn.com/) - The original component library
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- [Radix UI](https://www.radix-ui.com/) - Low-level UI primitives

---

Made by [Cedric Mutesa](https://mcedric.dev)