Complete command-line interface documentation for Atomix design system
Install the Atomix package to get access to the CLI
npm install @shohojdhara/atomixUse npx to run CLI commands without global installation
npx atomix --helpInteractive setup wizard for new projects
npx atomix initCreate and build a custom theme
1npx atomix create-theme my-theme
2npx atomix build-theme my-theme --watchGenerate a new component with boilerplate
npx atomix generate component Button --typescript --storyInteractive setup wizard for new projects
npx atomix init [options]--skip-install - Skip automatic dependency installationBuild custom themes from SCSS
npx atomix build-theme <path> [options]<path> - Path to theme directory or SCSS file-o, --output <path> - Output directory (default: ./dist)-m, --minify - Generate minified version (default: true)-s, --sourcemap - Generate source maps (default: false)-w, --watch - Watch for changes and rebuild--analyze - Analyze bundle size1# Build a theme
2npx atomix build-theme themes/custom
3
4# Build with watch mode
5npx atomix build-theme themes/custom --watch
6
7# Build with analysis
8npx atomix build-theme themes/custom --analyzeGenerate design system components
npx atomix generate <type> <name> [options]<type> - Type to generate (component, token)<name> - Name in PascalCase-t, --typescript - Use TypeScript (default: true)-s, --story - Include Storybook story (default: true)--test - Include test file--scss-module - Use SCSS modules--path <path> - Custom output path (default: ./src/components)-f, --force - Overwrite existing files1# Generate a component with all files
2npx atomix generate component Button --typescript --story --test
3
4# Short version
5npx atomix g c Card --scss-module
6
7# Custom path
8npx atomix g component Header --path ./src/layoutsMigrate from other CSS frameworks
npx atomix migrate <from> [options]<from> - Framework to migrate from (tailwind, bootstrap, scss-variables)-s, --source <path> - Source directory (default: ./src)--dry-run - Preview changes without modifying files--create-backup - Create backup before migration (default: true)1# Migrate from Tailwind
2npx atomix migrate tailwind --source ./app
3
4# Migrate from Bootstrap (dry run)
5npx atomix migrate bootstrap --dry-run
6
7# Migrate SCSS variables
8npx atomix migrate scss-variablesManage design tokens
npx atomix tokens <action> [options]list (alias: ls) - List all design tokensvalidate (alias: check) - Validate token filesexport - Export tokens to various formatsimport - Import tokens from file1# List all tokens
2npx atomix tokens list
3
4# List specific category
5npx atomix tokens list --category colors
6
7# Validate tokens
8npx atomix tokens validate
9
10# Export tokens
11npx atomix tokens export --format json --output tokens.json
12npx atomix tokens export --format css --output tokens.cssDevelopment mode with hot reload
npx atomix dev <theme> [options]Validate themes and design tokens
npx atomix validate [target] [options]Create a new theme from template
npx atomix create-theme <name> [options]Diagnose common issues
npx atomix doctorCreate .atomixrc.json or atomix.config.js in your project root:
1{
2 "theme": {
3 "name": "custom",
4 "outputDir": "./dist/themes",
5 "minify": true,
6 "sourceMaps": false
7 },
8 "components": {
9 "style": "scss-module",
10 "typescript": true,
11 "stories": true,
12 "tests": false
13 }
14}1# 1. Initialize project
2npx atomix init
3
4# 2. Create custom theme
5npx atomix create-theme my-brand
6
7# 3. Build and watch
8npx atomix dev my-brand1# 1. Generate component
2npx atomix g component Card --typescript --story
3
4# 2. Run Storybook
5npm run storybook
6
7# 3. Validate design tokens
8npx atomix tokens validateIf you encounter any issues or have questions about the CLI, check out our troubleshooting guide or reach out to the community.