A modern React component library built with React 19, TypeScript, and Tailwind CSS. Atomic Flow provides a collection of reusable, accessible, and customizable UI components following atomic design principles.
- 🚀 Built with React 19 and TypeScript
- 🎨 Styled with Tailwind CSS
- 📚 Storybook for component documentation and testing
- 🧪 Comprehensive test coverage with Vitest
- 📦 Tree-shakeable and optimized for production
- 🔍 TypeScript support out of the box
- 🎯 Accessible components following WAI-ARIA guidelines
npm install atomicflow
# or
yarn add atomicflowimport { Button } from 'atomicflow';
function App() {
return <Button>Click me</Button>;
}- Node.js (v18 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/eggnita/atomicflow.git
cd atomicflow- Install dependencies:
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev-
npm run dev- Start development server -
npm run build- Build the library -
npm run storybook- Start Storybook -
npm run build-storybook- Build Storybook -
npm run test- Run tests -
npm run test:ui- Run tests with UI -
npm run coverage- Generate test coverage -
npm run lint- Run ESLint -
npm run format- Format code with Prettier
The project uses Vitest for testing. You can run tests in different modes:
# Run tests once
npm run test
# Run tests in watch mode
npm run test -- --watch
# Run tests with UI
npm run test:ui
# Generate coverage report
npm run coverageWe use Storybook for component documentation and testing. To start Storybook:
npm run storybookThis will open Storybook at http://localhost:6006.
Contributions are welcome! Please read our Contributing Guidelines before submitting pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues or have questions, please open an issue on GitHub.