@iulik1kkk/atomic-ui

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

Installation

npm install @iulik1kkk/atomic-ui

Usage

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

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:

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

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.

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