Asagiri CSS Framework v2.1

Complete Component Showcase - 24+ Production-Ready Components

Alert Component

Notification system with multiple variants

Info! This is a primary alert message.
Success! Operation completed successfully.
Warning! Please check your input.
Error! Something went wrong.
Dismissible! Click the × button to close.
<div class="alert alert-success">Success message</div>

Badge Component

Status indicators with various styles

Solid Badges
Primary Success Warning Danger Info Elegant
Outline Badges
Primary Success Danger
Pill & Sizes
Small Medium Large
Status Dots
Online Away Busy Live

Tabs Component

ARIA-compliant tabbed navigation

This is the content of Tab 1. Tabs help organize content into separate views.

This is the content of Tab 2. Click different tabs to switch views.

This is the content of Tab 3. Fully accessible with keyboard navigation.

Pills Style

Accordion Component

Collapsible content panels

Content for section 1. Click the header to expand/collapse.

Content for section 2. Smooth animation included.

Content for section 3. Fully accessible with ARIA attributes.

Progress Component

Progress bars with multiple styles

Basic Progress
75%
Color Variants
Striped & Animated
Sizes

Loading Component

Spinner and loading states

Default Spinner
Grow Spinner
Dots Spinner
Pulse Spinner
Color Variants
Button Loading

Card Component

Flexible content containers

Card Header

Card Title

This is a basic card with header, body, and footer.

Hoverable Card

Hover over this card to see the effect.

Primary Card

Card with colored header.

Avatar Component

User profile images

Sizes
XS
SM
MD
LG
XL
Colors
A
B
C
D
With Status
A
B
C
Avatar Group
A
B
C
+5

Pagination Component

Page navigation

Pills Style

Breadcrumb Component

Hierarchical navigation

Arrow Style

Dropdown Component

Context menus

Action Another action
Separated link

Skeleton Component

Loading placeholders

Form Validation

Visual feedback states

Looks good!
Please enter a valid value.
This might cause issues.