Atomix Design System

A modern, accessible design system and component library for building beautiful user interfaces.

Overview

Atomix is a modern, accessible design system and component library for building beautiful user interfaces. It provides a comprehensive set of 40+ production-ready components with consistent design language, accessibility compliance, and performance optimization.

Key Features

• 40+ Production-Ready Components: Buttons, cards, forms, navigation, and more
• Design System Compliance: Consistent design language with design tokens
• Accessibility First: WCAG 2.1 AA compliant components
• TypeScript Support: Full TypeScript definitions for all components
• Responsive Design: Mobile-first responsive components
• Dark Mode Support: Built-in dark mode support for all components
• Tree-Shaking Support: Optimized for modern bundlers
• Multiple Themes: Multiple built-in themes with easy customization
• React & Vanilla JavaScript: Support for both React and vanilla JavaScript

Installation

npm install @shohojdhara/atomix

Usage

React

import { Button } from '@shohojdhara/atomix'; import '@shohojdhara/atomix/css';

function App() { return Hello World; }

### Theme Management

Atomix includes a powerful theme manager for dynamic theme switching:

```jsx
import { ThemeProvider, useTheme } from '@shohojdhara/atomix/theme';

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

function ThemeSwitcher() {
  const { theme, setTheme, availableThemes } = useTheme();
  
  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      {availableThemes.map(t => (
        <option key={t.class} value={t.class}>{t.name}</option>
      ))}
    </select>
  );
}

Available Themes:

• Built-in styles are used by default (no theme CSS loaded)
• flashtrade - Crypto trading platform theme (stable)
• boomdevs - BoomDevs theme (beta)
• esrar - Esrar theme (beta)
• mashroom - Mashroom theme (beta)
• applemix - Apple-inspired glass morphism theme (experimental)

For detailed theme manager documentation, see Theme Manager Guide.

Styles

Atomix provides comprehensive styling through CSS or SCSS:

CSS

// Import the main CSS file
import '@shohojdhara/atomix/css';

// Or import the minified version
import '@shohojdhara/atomix/css/min';

SCSS

// Import the main SCSS file
@use '~@shohojdhara/atomix/scss' as atomix;

// Or import individual modules
@use '~@shohojdhara/atomix/scss/settings' as settings;
@use '~@shohojdhara/atomix/scss/tools' as tools;
@use '~@shohojdhara/atomix/scss/components' as components;

Build Process

The Atomix Design System uses a comprehensive build process to generate optimized assets:

Main Build

npm run build

This command will:

1. Build the main JavaScript library (ESM and CJS formats)
2. Generate TypeScript definitions
3. Build the main CSS styles (dist/atomix.css and dist/atomix.min.css)

Individual Builds

# Build only the main styles
npm run build:styles

# Build only the themes
npm run build:themes

# Build only the main library
npm run rollup -c

Development

# Start Storybook for component development
npm run dev

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate test coverage
npm run test:coverage

Storybook styles convention

To keep visual docs and any snapshots stable, choose one of the following and stick to it:

• Preferred: load the built CSS from dist.

  • In your Storybook preview (e.g., .storybook/preview.ts/preview.js), import the bundled CSS once: import '@shohojdhara/atomix/css'
  • Before taking snapshots or publishing Storybook, ensure styles are compiled: yarn build:styles

• Alternative (for live theming/dev): load the source SCSS.

  • Import from the SCSS entry point: import '@shohojdhara/atomix/scss'
  • This relies on your builder's SCSS pipeline; avoid mixing SCSS and built CSS in the same Storybook to prevent drift.

Notes:

• CSS bundles produced by the styles build are deterministic: dist/atomix.css and dist/atomix.min.css.
• CI should run yarn attw to validate package exports and types after changes.

Components

Atomix provides 40+ production-ready components organized into categories:

• Actions: Button, Dropdown, Pagination
• Data Display: Badge, Card, DataTable
• Feedback: Callout, Spinner, Progress
• Forms: Checkbox, Input, Select
• Navigation: Breadcrumb, Navbar, Tabs
• Surfaces: Accordion, Callout, Modal
• Utilities: ColorModeToggle, Icon, AtomixGlass, AtomixLogo

Design Tokens

Atomix uses design tokens for consistent design language:

• Colors: Consistent color palette with light and dark mode variants
• Spacing: Consistent spacing scale based on 4px grid
• Typography: Consistent typography scale with responsive adjustments
• Borders: Consistent border radius and width system
• Shadows: Consistent shadow system for depth and elevation

Accessibility

All Atomix components are built with accessibility in mind:

• WCAG 2.1 AA Compliant: All components meet WCAG 2.1 AA standards
• Keyboard Navigation: Full keyboard navigation support
• Screen Reader Support: Proper ARIA attributes and semantic HTML
• Focus Management: Consistent focus indicators and management
• Color Contrast: Proper color contrast ratios for readability

Browser Support

Atomix supports all modern browsers:

Contributing

Contributions are welcome! Please read our contributing guidelines for details on our code of conduct and development process.

License

Apache 2.0 © Shohojdhara