Asagiri CSS Framework

Modern, accessible, and beautiful design system for the web.
24+ production-ready components. TypeScript support. Dark mode included.

24+ Components
600+ Type Definitions
63KB Minified Size
100% Dark Mode

Why Asagiri?

Beautiful Design

Modern, clean interface with carefully crafted components. Every detail matters.

Accessible

WCAG AA compliant, ARIA support, keyboard navigation. Accessible to everyone.

Dark Mode

Full dark mode support built-in. Automatic theme detection included.

Responsive

Mobile-first design. Looks perfect on all screen sizes.

TypeScript

Complete type definitions. Full IDE autocomplete support.

Lightweight

Only 63KB minified. Fast loading, high performance.

Quick Start

Get up and running in seconds

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BoxPistols/asagiri@2.0/css/main.css">

NPM

npm install asagiri

Usage

<button class="btn btn-primary">Click Me</button> <div class="alert alert-success">Success!</div> <span class="badge badge-info">New</span>

New in v2.1

Alert

Notification system with dismissible support

Example alert message

Badge

Status indicators with 8 colors

Primary Success Danger

Tabs

ARIA-compliant tabbed navigation

Progress

Multi-variant progress bars

Card

Flexible content containers

Card example

Avatar

User profile images

A
B
C
View All Components →

Ready to build something amazing?

Join developers using Asagiri to create beautiful, accessible web experiences.

Get Started View on GitHub