npm package: @justice-npm/atomixui
Description: A modern React component library built with Tailwind CSS
Author: Your Name
Latest version: 0.1.0

# AtomUI

A modern React component library built with Tailwind CSS, inspired by shadcn/ui.

## Installation

```bash
npm install atomui
```

## Setup

1. Install Tailwind CSS in your project if you haven't already:

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

2. Add the AtomUI content path to your `tailwind.config.js`:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/atomui/dist/**/*.{js,ts,jsx,tsx}", // Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

3. Import the styles in your main CSS file:

```css
@import 'atomui/dist/styles/globals.css';
```

## Components

### Button

```jsx
import { Button } from 'atomui';

function App() {
  return (
    <div>
      <Button>Default Button</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
      
      {/* Different sizes */}
      <Button size="sm">Small</Button>
      <Button size="lg">Large</Button>
      <Button size="icon">🔥</Button>
    </div>
  );
}
```

### Card

Super customizable card component - use only the parts you need:

```jsx
import { Card, CardHeader, CardContent, CardFooter } from 'atomui';

function App() {
  return (
    <Card className="w-96">
      <CardHeader>
        <h3 className="text-lg font-semibold">Card Title</h3>
      </CardHeader>
      <CardContent>
        <p>This is the card content.</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

// Or just use the parts you need:
function SimpleCard() {
  return (
    <Card>
      <CardContent>
        Just some content, no header or footer needed!
      </CardContent>
    </Card>
  );
}
```

### Typography

```jsx
import { H1, H2, H3, H4, P, Large, Small, Muted, Lead, Blockquote, Typography } from 'atomui';

function App() {
  return (
    <div>
      <H1>Main Heading</H1>
      <H2>Section Heading</H2>
      <H3>Subsection</H3>
      <H4>Minor Heading</H4>
      
      <P>This is a paragraph with proper spacing.</P>
      <Lead>This is a lead paragraph.</Lead>
      <Large>Large text</Large>
      <Small>Small text</Small>
      <Muted>Muted text</Muted>
      
      <Blockquote>
        "This is a blockquote with proper styling."
      </Blockquote>
      
      {/* Or use the unified Typography component */}
      <Typography variant="h1">Another way to use headings</Typography>
      <Typography variant="muted">Muted text using Typography</Typography>
    </div>
  );
}
```

## Customization

All components accept `className` props for custom styling:

```jsx
<Button className="bg-purple-500 hover:bg-purple-600">
  Custom Purple Button
</Button>

<Card className="border-2 border-blue-500 shadow-lg">
  <CardContent className="p-8">
    Custom styled card
  </CardContent>
</Card>
```

## CSS Variables

AtomUI uses CSS variables for theming. You can customize the theme by overriding these variables:

```css
:root {
  --primary: 262.1 83.3% 57.8%;
  --primary-foreground: 210 20% 98%;
  /* ... other variables */
}
```

## Dark Mode

Add the `dark` class to your root element to enable dark mode:

```html
<html class="dark">
  <!-- Your app -->
</html>
```

## License

MIT