@repo/ui

The Aurea shared component library — shadcn/ui components organised with atomic design, consumed by all apps.

Overview

@repo/ui is the single source of truth for UI components across the Aurea monorepo. It is built on shadcn/ui (Radix UI primitives + Tailwind CSS) and organised following the atomic design methodology.

Atomic design hierarchy

packages/ui/
└── components/
    ├── atoms/       # Indivisible building blocks
    │   ├── button.tsx
    │   ├── badge.tsx
    │   ├── input.tsx
    │   └── …
    ├── molecules/   # Composed of atoms
    │   ├── form-field.tsx
    │   ├── search-bar.tsx
    │   └── …
    └── organisms/   # Composed of molecules + atoms
        ├── header.tsx
        ├── data-table.tsx
        └── …

The rule is simple: atoms have no internal @repo/ui imports; molecules may import atoms; organisms may import atoms and molecules. Nothing imports from organisms outside of app code.

Import paths

Always import from the package root (re-exported by packages/ui/index.ts):

import { Button } from '@repo/ui/components/atoms/button'
import { DataTable } from '@repo/ui/components/organisms/data-table'

Do not reach into ../packages/ui/src/… with relative paths.

Adding a component

Generate the shadcn primitive from the packages/ui directory:
```
cd packages/ui && bunx shadcn@latest add <component>
```
Move or categorise it under the correct atomic tier (atoms/, molecules/, or organisms/).
Re-export from packages/ui/index.ts.

Styling

Components use Tailwind CSS 4 utility classes. The tailwind.config.ts in packages/ui defines the design tokens that all apps inherit.