atm

Atomix

v0.4.6

    1. Home
    2. Docs
    3. Components

Getting Started
  • Introduction
  • Installation
  • Quick Start
  • Migration Guide
  • CLI Reference
Design Tokens
  • Overview
  • All Tokens
  • Colors
  • Spacing
  • Typography
  • Grid
  • Elevation
Styles System
  • Architecture
  • Customization
  • Utilities
  • API Reference
Layouts
  • Grid System
  • Masonry Grid
  • Responsive Patterns
  • Customization
  • Performance
Components
  • Overview
  • Guidelines
  • Accordion
  • AtomixGlass
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • ButtonGroup
  • Card
  • Checkbox
  • Date Picker
  • Dropdown
  • Form
  • Input
  • Modal
  • Progress
  • Radio
  • Rating
  • Select
  • Slider
  • Spinner
  • Tab
  • Textarea
  • Toggle
  • Tooltip
  • Upload
  • Block
  • Callout
  • Countdown
  • Hero
  • Icon
  • List
  • Messages
  • Navbar
  • Pagination
  • Popover
  • Steps
  • SectionIntro
  • Container
  • Grid
  • GridCol
  • Row
  • River
  • MasonryGrid
  • DataTable
  • EdgePanel
  • SideMenu
  • Nav
  • NavItem
  • NavDropdown
  • VirtualizedGrid
Guides
  • Theming Guide
  • AtomixGlass Performance
  • AtomixGlass Theming
  • Theme Studio
  • Devtools
  • Theme Inspector
  • Theme Preview
  • Theme Comparator
  • Live Editor
  • CLI Tool
  • Try Live Editor
  • Try Inspector
  • Try Preview
  • Try Comparator
  • AtomixGlass Playground
Examples
  • Common Patterns
  • Landing Page
API Reference
  • React API
  • JavaScript API
  • CSS API
CLI
  • Overview
  • User Guide
  • API Reference
  • Migration Guide
  • Security Guide
Resources
  • Roadmap
  • Changelog
  • Contributing

Atomix Design System

A comprehensive design system for building modern, accessible, and performant web applications with React and vanilla JavaScript.
GitHubTwitterDiscordNPM

Getting Started

IntroductionInstallationQuick StartTheming Guide

Documentation

ComponentsDesign TokensStyles SystemLayouts

Resources

GitHub Repository↗NPM Package↗Storybook↗API Reference

Community

ContributingRoadmapChangelogReport Issue↗

© 2026 Atomix Design System. Built with ❤️ by the Shohojdhara.

40+ Production-Ready Components

Atomix Components

A comprehensive library of accessible, responsive UI components built with React and TypeScript. Everything you need to build modern web applications.

Get StartedBrowse Components

By the Numbers

Atomix provides a comprehensive component library for building modern interfaces

51

Components

51

Stable Components

14

Categories

Categories

Browse components by category
View All

Layout

12 components

Effects

1 components

Display

2 components

Indicators

1 components

Navigation

10 components

Actions

2 components

Featured Components

Stable, production-ready components you can use right away

Accordion

Collapsible content sections that help organize information in a space-efficient way. Users can expand and collapse sect...

stablev1.0.0
View Details

AtomixGlass

A high-performance glass morphism component with liquid distortion effects, featuring hardware-accelerated glass effects...

stablev1.0.0
View Details

Avatar

Display user profile images, initials, or icons with multiple sizes and fallback options....

stablev1.0.0
View Details

Badge

A compact UI element used to display small pieces of information like status indicators, counters, labels, or categories...

stablev1.1.0
View Details

Block

A flexible layout container designed for creating consistent section layouts. It provides standardized spacing, backgrou...

stablev1.0.0
View Details

Breadcrumb

Hierarchical navigation component showing the user's current location within the site structure....

stablev1.0.0
View Details

Recently Updated

Latest component updates and improvements
View All

Card

v1.3.0

A flexible container that displays content in a contained, structured format. Perfect for showcasing information, creati...

stableLayout

Button

v1.2.0

A comprehensive, interactive element for triggering actions or navigation. The Button component is designed for flexibil...

stableActions

ButtonGroup

v1.2.0

A wrapper component that groups related buttons together, merging their borders and border-radii for a cohesive look....

stableActions

Badge

v1.1.0

A compact UI element used to display small pieces of information like status indicators, counters, labels, or categories...

stableIndicators

Accordion

v1.0.0

Collapsible content sections that help organize information in a space-efficient way. Users can expand and collapse sect...

stableLayout

AtomixGlass

v1.0.0

A high-performance glass morphism component with liquid distortion effects, featuring hardware-accelerated glass effects...

stableEffects