npm package: @prithvirajsinh-jadav1/shadow-ui
Description: A collection of reusable UI components built with shadcn/ui, React, and TypeScript. Works seamlessly with existing shadcn/ui setups.
Author: Prithvirajsinh Jadav
Latest version: 1.1.0

# @prithvirajsinh-jadav1/shadow-ui

A collection of reusable UI components built with shadcn/ui, React, and TypeScript. This package provides production-ready components that can be easily imported and used in any React project.

> **✨ shadcn/ui Compatible**: This package is designed to work seamlessly with existing shadcn/ui setups. No additional CSS imports or configuration required!

## Features

- 🎨 **Beautiful Components**: Built with shadcn/ui design system
- 📦 **Tree-shakable**: Import only what you need
- 🔧 **TypeScript**: Full type safety and IntelliSense support
- 🎯 **Flexible**: Multiple variants and sizes for each component
- ⚡ **Performance**: Optimized for production use
- 🎭 **Accessible**: Built with accessibility in mind using Radix UI primitives

## Installation

```bash
npm install @prithvirajsinh-jadav1/shadow-ui
# or
yarn add @prithvirajsinh-jadav1/shadow-ui
# or
pnpm add @prithvirajsinh-jadav1/shadow-ui
```

### Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install react react-dom
```

### Required Dependencies

The package also requires these dependencies for styling and functionality:

```bash
npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge
```

### CSS Setup

**IMPORTANT**: You must import the CSS file to get the component styles. Add this import to your main CSS file or at the top of your main component:

```css
@import '@prithvirajsinh-jadav1/shadow-ui/styles.css';
```

Or in your main JavaScript/TypeScript file:

```javascript
import '@prithvirajsinh-jadav1/shadow-ui/styles.css';
```

The package includes all necessary Tailwind CSS classes and custom CSS variables for the components to work correctly.

## Usage

### Basic Import

```tsx
import { Button } from '@prithvirajsinh-jadav1/shadow-ui';
// Don't forget to import the CSS!
import '@prithvirajsinh-jadav1/shadow-ui/styles.css';

function App() {
  return <Button>Click me</Button>;
}
```

### Specific Component Import

```tsx
import { Button } from '@prithvirajsinh-jadav1/shadow-ui/components/ui';
// or
import { Button } from '@prithvirajsinh-jadav1/shadow-ui/components';
```

### Utils Import

```tsx
import { cn } from '@prithvirajsinh-jadav1/shadow-ui/lib';
```

## Components

### Button

A versatile button component with multiple variants, sizes, and features.

#### Basic Usage

```tsx
import { Button } from '@prithvirajsinh-jadav1/shadow-ui';

<Button>Click me</Button>
```

#### With Icon

```tsx
import { Button } from '@prithvirajsinh-jadav1/shadow-ui';

const PlusIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M12 5v14M5 12h14" />
  </svg>
);

<Button icon={<PlusIcon />}>Add Item</Button>
<Button icon={<PlusIcon />} iconPosition="right">Continue</Button>
```

#### Loading State

```tsx
<Button loading>Processing...</Button>
```

#### Link Button

```tsx
<Button link href="https://example.com">
  Visit Example
</Button>
```

#### Variants

```tsx
<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 href="https://example.com">Link</Button>
```

#### Sizes

```tsx
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon" icon={<PlusIcon />} />
<Button size="icon-sm" icon={<PlusIcon />} />
<Button size="icon-lg" icon={<PlusIcon />} />
```

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"` | `"default"` | The visual style variant |
| `size` | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"` | `"default"` | The size of the button |
| `icon` | `React.ReactNode` | - | Icon to display |
| `iconPosition` | `"left" \| "right"` | `"left"` | Position of the icon |
| `loading` | `boolean` | `false` | Shows loading spinner |
| `link` | `boolean` | `false` | Renders as a link element |
| `href` | `string` | - | URL for link variant |
| `htmlType` | `"button" \| "submit" \| "reset"` | `"button"` | HTML button type |
| `asChild` | `boolean` | `false` | Use Radix Slot for composition |
| `className` | `string` | - | Additional CSS classes |
| `children` | `React.ReactNode` | - | Button content |

## Styling

This package is designed to work seamlessly with shadcn/ui's styling system. The components use the same CSS variables and Tailwind classes as shadcn/ui components.

### Prerequisites

Make sure you have shadcn/ui set up in your project with the proper CSS variables. If you haven't set up shadcn/ui yet, you can do so by:

1. **Installing shadcn/ui CLI**:
   ```bash
   npx shadcn@latest init
   ```

2. **Adding a Button component** (to get the CSS variables):
   ```bash
   npx shadcn@latest add button
   ```

### Tailwind Configuration

Add the package to your `tailwind.config.js` content paths:

```js
module.exports = {
  content: [
    // ... your existing content paths
    "./node_modules/@prithvirajsinh-jadav1/shadow-ui/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of your config
}
```

### CSS Variables

The components use the same CSS variables as shadcn/ui. If you have shadcn/ui set up, these will already be available. If not, you can add them to your global CSS:

```css
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}
```

### Theme Customization

You can customize the appearance by modifying the CSS variables in your global CSS file, just like you would with any shadcn/ui component.

## TypeScript

This package is written in TypeScript and provides full type definitions. All components and their props are fully typed.

```tsx
import { Button, type ButtonProps } from '@prithvirajsinh-jadav1/shadow-ui';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};
```

## Development

### Building the Package

```bash
# Install dependencies
npm install

# Build the package
npm run build:lib

# Watch mode for development
npm run build:lib:watch

# Type checking
npm run type-check

# Clean build artifacts
npm run clean
```

### Project Structure

```
src/
├── components/
│   ├── ui/
│   │   ├── button.tsx
│   │   └── index.ts
│   └── index.ts
├── lib/
│   ├── utils.ts
│   └── index.ts
└── index.ts
```

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

## Support

If you have any questions or need help, please open an issue on GitHub.

## Changelog

### 1.0.0

- Initial release
- Button component with all variants and features
- TypeScript support
- ESM and CJS builds