atm

Atomix

v0.4.6

    1. Home
    2. Docs

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.

Atomix Documentation.

Everything you need to build amazing user interfaces with Atomix. High-performance filters, cinematic depth, and frosted glass realism.

Get StartedBrowse Components

By the Numbers

Atomix provides a comprehensive set of tools and components
40+
Components
200+
Design Tokens
500+
Utility Classes
15+
Chart Types

Explore the Documentation

Comprehensive guides and references for every aspect of Atomix

Getting Started

Everything you need to get up and running with Atomix

Installation

Complete setup instructions for Atomix

Learn more

Quick Start

5-minute tutorial to get started

Learn more

Migration Guide

Migrate from other design systems

Learn more

Design Tokens

The foundation of the Atomix Design System

Colors

Comprehensive color system and palettes

Learn more

Spacing

Spacing and layout system

Learn more

Typography

Type system and scales

Learn more

Elevation

Shadow and depth system

Learn more

Styles System

CSS architecture and utilities built on ITCSS

Architecture

ITCSS structure and organization

Learn more

Customization

Theming and brand integration

Learn more

Utilities

Complete utility class reference

Learn more

API Reference

Complete technical reference

Learn more

Layouts

Powerful layout system for responsive interfaces

Grid System

Comprehensive 12-column responsive grid

Learn more

Masonry Grid

Pinterest-style dynamic layouts

Learn more

Responsive Patterns

Common responsive layout solutions

Learn more

Performance

Optimization strategies

Learn more

Components

40+ components with React and vanilla JS

Overview

All available components

Learn more

Guidelines

Development standards and best practices

Learn more

AtomixGlass

Advanced WebGL glass morphism effects

Learn more

Charts

15+ chart types with animations

Learn more

Guides

In-depth guides and tutorials

Theming Guide

Advanced theming techniques

Learn more

AtomixGlass Performance

Optimizing AtomixGlass for performance

Learn more

API Reference

Complete technical reference for all APIs

React API

React component reference and props

View Reference

JavaScript API

Vanilla JS class reference

View Reference

CSS API

CSS classes and custom properties

View Reference

Resources & Community

Additional resources, roadmap, and community information

Roadmap

Development roadmap and future plans

Explore

Contributing

How to contribute to the project

Explore

Examples

Real-world patterns and implementations

Explore

Ready to Build Something Amazing?

Start building with Atomix today. Install the package and explore our comprehensive component library.

Get StartedBrowse Components