Quick Start | Atomix Documentation | Atomix Documentation

Prerequisites

Make sure you have React 18+ and Node.js 16+ installed before proceeding.

1

Install Atomix

Choose your preferred package manager and run the installation command in your project directory.

npm

npm install @shohojdhara/atomix

yarn

yarn add @shohojdhara/atomix

pnpm

pnpm add @shohojdhara/atomix

2

Import CSS Styles

Import the Atomix CSS in your main entry point (e.g., main.tsx or App.tsx).

main.tsxTYPESCRIPT

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// Import Atomix CSS
import '@shohojdhara/atomix/css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

12 lines269 characters

Optional: Theme Customization

You can also import specific theme files or configure your own using CSS variables to match your brand perfectly.

3

Start Building

Import and use components anywhere in your application with full type safety and accessibility.

App.tsxTYPESCRIPT

import { Button, Card } from '@shohojdhara/atomix';

function App() {
  return (
    <Card variant="primary" className="u-p-8">
      <h1 className="u-fs-4xl u-font-bold u-mb-4">Hello Atomix!</h1>
      <Button variant="primary" iconName="Sparkle">Click Me</Button>
    </Card>
  );
}

10 lines284 characters

Getting Started

Documentation

Resources

Community

⚡ Quick Start Guide

Prerequisites

Install Atomix

Import CSS Styles

Start Building

Ready for more?

Components

Theming

Examples

⚡ Quick Start Guide

Prerequisites

Install Atomix

Import CSS Styles

Start Building

Ready for more?

Components

Theming

Examples