atm

Atomix

v0.4.6

    1. Home
    2. Getting Started
    3. Migration Guide

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.

Migrate from other design systems to Atomix with ease

Migration Guide

Complete migration guide with step-by-step instructions, class mappings, and automated tools to make the transition smooth.

Install AtomixQuick Start

Why Migrate to Atomix?

Discover the benefits of transitioning to Atomix Design System

Modern Architecture

ITCSS methodology and CSS custom properties for scalable, maintainable styles

Better Performance

Smaller bundle size and optimized CSS with tree-shaking support

Enhanced Accessibility

WCAG 2.1 AA compliance built-in with comprehensive keyboard navigation

Developer Experience

Better TypeScript support, comprehensive documentation, and tooling

Migration Strategy

Follow these steps for a smooth migration process
1

Assess Current Usage

Audit your existing components and styles to understand what needs to be migrated. Document all current implementations and dependencies.

2

Plan the Migration

Prioritize components and create a timeline for the migration process. Identify critical paths and dependencies.

3

Set Up Atomix

Install and configure Atomix alongside your existing system. Set up design tokens and theme configuration.

4

Migrate Incrementally

Replace components one by one, testing as you go. Start with low-risk components and gradually move to critical ones.

5

Clean Up

Remove old dependencies and unused code once migration is complete. Optimize bundle size and performance.

Migration Resources

Tools and guides to help you through the migration process

Class Mapping Guide

Comprehensive mapping from popular frameworks to Atomix utilities

Learn more

Component Migration

Step-by-step guides for migrating common component patterns

Learn more

Theme Configuration

Learn how to configure Atomix to match your existing design

Learn more
Need Help?

If you need assistance with your migration, check out our installation guide or browse our components. Our comprehensive documentation covers everything you need to know.

View Quick Start GuideInstallation Guide