AZTA CSS

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

Installation

npm install @usegrand/azta-css

Usage

Import CSS

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

CDN

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

Basic Example

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