Atomic UI

A modern React component library built with the same philosophy as shadcn/ui - copy and paste components that you can customize to fit your needs.

Features

• 🎨 Built with Tailwind CSS
• 🔧 Full TypeScript support
• 📦 Copy & paste components - own your code
• 🎯 Highly customizable with Tailwind utilities
• 🌗 Light/Dark mode support via CSS variables
• 🚀 Zero runtime styles
• ⚡ CLI for easy component installation

Quick Start

1. Initialize your project

npx @clikvn/atomic-ui init

This will:

• Create a components.json configuration file
• Set up your project structure
• Add necessary dependencies
• Configure CSS variables for theming

2. Add components

# Add specific components
npx @clikvn/atomic-ui add button input

# Or select from a list
npx @clikvn/atomic-ui add

3. Use the components

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function App() {
  return (
    <div>
      <Input placeholder="Enter your email" />
      <Button>Subscribe</Button>
    </div>
  )
}

Available Components

• Button - A versatile button component with multiple variants
• Input - Text input with consistent styling
• Label - Form label component
• Card - Container component with header, content, and footer sections

More components coming soon!

Installation

Manual Installation

If you prefer to manually copy components:

1. Install dependencies:

npm install class-variance-authority clsx tailwind-merge

2. Add the utility function:

// lib/utils.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

3. Copy the component code from the src/components/ui directory

4. Add CSS variables to your global CSS file

Component Examples

Button

import { Button } from "@/components/ui/button"

// Variants
<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</Button>

// Sizes
<Button size="lg">Large</Button>
<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="icon">🔍</Button>

Input

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

<div>
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="Email" />
</div>

Card

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Customization

Theming

Components use CSS variables for colors. Customize them in your CSS:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... more variables */
}

Styling

All components accept a className prop for custom styling:

<Button className="bg-gradient-to-r from-pink-500 to-violet-500">
  Gradient Button
</Button>

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build

Philosophy

Atomic UI follows the same philosophy as shadcn/ui:

1. Copy & Paste, not npm install - You own the code
2. Customizable - Use Tailwind utilities to make it yours
3. Accessible - Built with accessibility in mind
4. Open Source - Use it however you want

License

ISC

Credits

Inspired by shadcn/ui