@usegrand/azta-css/README.md

A modern, pixelated CSS utility library with 150+ components, unique design elements, and smooth animations for creating distinctive web interfaces

# AZTA CSS

A modern CSS utility library with 150+ components and pixel-perfect design.

## Installation

```bash
npm install @usegrand/azta-css
```

## Usage

### Import CSS

```css
@import "@usegrand/azta-css/azta.min.css";
```

### CDN

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@usegrand/azta-css@latest/azta.min.css"
/>
```

### Basic Example

```html
<button class="az-btn az-btn-primary">Primary Button</button>

<div className="az-card">
  <div className="az-card-header">
    <h3 className="az-text-lg az-sm:text-xl">Card Title</h3>
    <p className="az-text-sm az-sm:text-base">
      Optional subtitle or description
    </p>
  </div>
  <div className="az-card-body">
    <p className="az-text-sm az-sm:text-base">
      This is the main content area of the card. You can place any content here
      including text, images, forms, or other components.
    </p>
  </div>
  <div
    className="az-card-footer az-flex az-flex-col az-gap-2 az-sm:flex-row az-sm:gap-3"
  >
    <button className="az-btn az-btn-primary az-btn-sm az-w-full az-sm:w-auto">
      Primary Action
    </button>
    <button
      className="az-btn az-btn-secondary az-btn-sm az-w-full az-sm:w-auto"
    >
      Secondary
    </button>
  </div>
</div>
```

## Components

AZTA CSS includes 150+ components across 31 categories:

- **Buttons** - Primary, ghost, gradient, loading states
- **Cards** - Basic, floating, scanlines effects
- **Forms** - All input types with validation states
- **Navigation** - Menus, breadcrumbs, pagination, tabs
- **Mockups** - Browser and window replicas
- **Avatar** - Sizes, status indicators, groups
- **Rating** - Stars, hearts, thumbs, emojis
- And many more...

## License

Licensed under the MIT license.