Component Library
623+ components across frontend/src/components/. Base layer is Shadcn/ui + Radix UI primitives in components/ui/, with domain-specific feature components in dedicated subdirectories.
UI Primitives (components/ui/)
101 base components. Storybook is mandatory for all new additions (CSF3, tags: ['autodocs']).
| Category | Components |
|---|---|
| Primitives | button, card, badge, label, checkbox, toggle, switch |
| Dialogs | dialog, alert-dialog, sheet, drawer |
| Menus | dropdown-menu, context-menu, menubar |
| Forms | input, select, combobox, textarea, date-picker, multi-select |
| Data Tables | data-table, compact-data-table, file-table, file-upload-table |
| Layout | accordion, tabs, collapsible, separator, resizable |
| Feedback | toast (Sonner), progress, spinner, banner-message, skeleton |
| Navigation | breadcrumb, pagination, command |
| Custom | action-chip-selector, bulk-edit-toolbar, color-coded-card, EnvironmentBanner |
Feature Component Directories
| Directory | Files | Feature | Related Page |
|---|---|---|---|
document-obtaining/ | 59 | Document collection workflows | Document Obtaining |
form-builder/ | 29 | Dynamic form editor/renderer | Form Builder |
files/ | 25 | File upload, preview, management | Files |
portal/ | 23 | Customer-facing portal UI | Portal |
building-components-redesign/ | 18 | Building component management | Building Components |
invoices/ | 15 | Invoice creation and listing | Invoices |
quotes/ | 9 | Quote management | Quotes |
audit-log/ | 8 | Activity tracking display | Audit Logs |
document-review/ | 8 | Document review workflow | Document Review |
pdf/ | 8 | PDF template editor/preview | PDF Templates |
feedback/ | 7 | Feedback collection UI | Feedback System |
shared/ | 6 | Cross-domain reusable components | — |
workflow/ | 5 | Workflow visualization | Workflows |
sidebar/ | 4 | App navigation sidebar | Routing |
Component Decomposition Rule
Files exceeding 600 lines must be split per Component Decomposition:
| Module | Contains |
|---|---|
fooService.ts | Pure functions, constants, types (zero React) |
useFooState.ts | State, queries, mutations, handlers |
FooSection.tsx | Presentational (props + useTranslation) |
Foo.tsx | Orchestrator (calls hook, composes sections) |
Styling
- TailwindCSS 4 utility classes
- Brand colors: Primary
#91C832, Secondary#007C57, Gray-50#F9FAFB - Shadcn/ui theming via CSS variables
- Lock exact versions for UI dependencies (no
^or~)
Related
- Component Decomposition — Mandatory split pattern for large files
- Frontend Architecture — Component tree and project structure
- Hooks — Custom hooks used by feature components
- State Management — Data flow patterns in components
- Internationalization — i18n in component text
- Pages Overview — Pages that compose these components