atm

Atomix

v0.4.6

    1. Home
    2. Getting Started
    3. Installation

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.

Get Atomix up and running in your project

Installation

Install Atomix using npm, yarn, or pnpm. Follow our simple setup guide to start building with Atomix components.

Quick StartBrowse Components

Prerequisites

Before installing Atomix, make sure you have the following requirements met:

React 18.0.0+

React library for building user interfaces

Node.js 16.0.0+

JavaScript runtime environment

Package Manager

npm, yarn, or pnpm

Installation Methods

Choose the installation method that best fits your project setup. All methods install the same package.

npm

Install via npm package manager. Recommended for most projects.

bash
npm install @shohojdhara/atomix

yarn

Install via yarn package manager. Great for monorepos and workspaces.

bash
yarn add @shohojdhara/atomix

pnpm

Install via pnpm package manager. Fast and efficient disk space usage.

bash
pnpm add @shohojdhara/atomix

Next Steps

Once installed, explore these resources to get the most out of Atomix

Quick Start Guide

Learn how to build your first application with Atomix components in just 5 minutes

Get Started

Setup Theming

Customize Atomix to match your brand with our comprehensive theming system

Learn More