Frontend - Domain Design

Design System – Atomic Design

This repository contains the Design System used across our applications.
We follow Atomic Design principles to build a scalable, consistent, and reusable UI component library.

---

⚛️ What is Atomic Design?

Atomic Design is a methodology by Brad Frost that organizes UI components into 5 levels:

1. Atoms → Smallest building blocks (buttons, inputs, icons).
2. Molecules → Simple groups of atoms working together (form field, search bar).
3. Organisms → Larger components combining molecules/atoms (navbar, product card).
4. Templates → Page-level structures that define layout using organisms.
5. Pages → Templates with real content/data (final user-facing UI).

---

✅ Why Atomic Design?

• Consistency → Reuse components everywhere.
• Scalability → Easy to build bigger components from smaller ones.
• Collaboration → Designers & developers speak the same language.
• Maintainability → Clear structure, less duplication.

---

🚀 How to Use

• Start small → Build atoms first.
• Compose upward → Create molecules and organisms using existing pieces.
• Apply layouts → Define templates for page structures.
• Integrate content → Fill templates with real data to create pages.
• Reuse everywhere → Always import from the lowest-level component possible.

---

➕ Adding New Components

To add a new component from shadcn/ui:

1. Navigate to the frontend folder:

   cd frontend

2. Run the shadcn CLI command:

   pnpm dlx shadcn@latest add button

   (Replace button with the component you want to add)

3. The component will be added to: 1-atoms-shadcn/generated/

⚠️ Important Rules

• DO NOT modify files in the 1-atoms-shadcn/generated folder.
• To customize a component, you have two options:
  1. Move it to 1-atoms-shadcn/ (outside of generated/)
  2. Wrap it in a parent component inside 2-molecules/

This ensures that generated components can be updated without conflicts.