Getting Started
Welcome to Asagiri CSS Framework v2.0 - A modern, accessible, and versatile design system.
Introduction
Asagiri is a lightweight yet powerful CSS framework designed for building beautiful, accessible web interfaces. With comprehensive dark mode support, 24+ production-ready components, and TypeScript integration, it's the perfect choice for modern web development.
New in v2.1: 13 advanced UI components including Alert, Badge, Tabs, Accordion, Pagination, Progress, Loading, Skeleton, Card, Avatar, Form Validation, Breadcrumb, and Dropdown!
Quick Start
CDN
The fastest way to get started is using our CDN:
<!-- jsdelivr (npm) - Recommended -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/asagiri@latest/css/main.min.css">
<!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/asagiri@latest/css/main.min.css">
<!-- Specific version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/asagiri@2.0.0/css/main.min.css">
NPM
Install via npm for better integration:
npm install asagiri
Then import in your JavaScript:
import 'asagiri/css/main.css';
Basic Usage
Start using components right away:
<button class="btn btn-primary">Primary Button</button>
<div class="alert alert-success">Success!</div>
<span class="badge badge-info">New</span>
Features
- 24+ Components - Production-ready UI components
- Dark Mode - Full dark mode support with WCAG AA compliance
- Accessible - ARIA-compliant with keyboard navigation
- Responsive - Mobile-first design
- TypeScript - 600+ type definitions
- Lightweight - Only 63KB minified
- Customizable - SCSS variables and CSS custom properties
Browser Support
Asagiri supports all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)