npm package: @frankhe/shadcn-lib
Description: A collection of shadcn/ui components built with React, TypeScript, and Tailwind CSS
Author: Your Name
Latest version: 0.3.0

# 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

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

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

## Usage

### Import all components

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

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

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

### Tailwind Configuration

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

```js
/** @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

```bash
npm run build:lib
```

### Running Tests

```bash
npm test
```

### Storybook

```bash
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](LICENSE) file for details.

## Acknowledgments

- [shadcn/ui](https://ui.shadcn.com/) for the original component designs
- [Radix UI](https://www.radix-ui.com/) for the accessible primitives
- [Tailwind CSS](https://tailwindcss.com/) for the styling system