open-index/open-npm huggingface dataset:
npm package: @iulik1kkk/atomic-ui
Description: A collection of reusable UI components built with React and Tailwind CSS.
Latest version: 1.0.13

# @iulik1kkk/atomic-ui

A collection of reusable UI components built with React and Tailwind CSS.

## Installation

```bash
npm install @iulik1kkk/atomic-ui
```

## Usage

After installation, run the following command to add the components to your project:

```bash
npx atomic-ui
```

This will:
1. Create a `src/components/ui` directory if it doesn't exist
2. Create a `src/components/ui/lib` directory with utility functions
3. Copy all component files to your project
4. Set up the necessary dependencies
5. Configure Inter font for your project

The command will automatically:
- Set up the Inter font configuration
- Create/update your `src/app/layout.tsx` to use the Inter font
- Add all necessary font utilities

Then you can use the components in your project:

```tsx
// components/ui/Button.tsx
import { Button } from "@iulik1kkk/atomic-ui";

export default function MyButton() {
  return (
    <Button variant="default">
      Click me
    </Button>
  );
}
```

## Available Components

### Button

A versatile button component with multiple variants.

```tsx
import { Button } from "@iulik1kkk/atomic-ui";

// Default variant
<Button>Click me</Button>

// Secondary variant
<Button variant="secondary">Click me</Button>

// Destructive variant
<Button variant="destructive">Delete</Button>

// Outline variant
<Button variant="outline">Click me</Button>

// Ghost variant
<Button variant="ghost">Click me</Button>

// Link variant
<Button variant="link">Click me</Button>
```

### Input

A flexible input component with various styles and states.

```tsx
import { Input } from "@iulik1kkk/atomic-ui";

// Default input
<Input placeholder="Enter your name" />

// With error state
<Input error placeholder="Invalid input" />

// Different variants
<Input variant="destructive" placeholder="Error input" />
<Input variant="ghost" placeholder="Ghost input" />

// Different sizes
<Input size="sm" placeholder="Small input" />
<Input size="lg" placeholder="Large input" />

// With type
<Input type="email" placeholder="Enter your email" />
<Input type="password" placeholder="Enter your password" />
```

## Development

1. Clone the repository
2. Install dependencies: `npm install`
3. Build the package: `npm run build`
4. Link the package locally: `npm link`
5. Test in your project: `npm link @iulik1kkk/atomic-ui`