Component Library
622 component files (.tsx, excluding tests and stories, as of 2026-06) 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/)
65 base components, 63 of them with co-located CSF3 stories (as of 2026-06). Storybook is mandatory for all new additions (CSF3, tags: ['autodocs']). Story tests run via Vitest with MSW mocking (PR#1966); a Storybook build gate runs in CI (PR#1958).
| Category | Components |
|---|---|
| Primitives | button, card, badge, label, checkbox, toggle, toggle-group, switch |
| Overlays | dialog, alert-dialog, sheet, popover, hover-card, tooltip, dropdown-menu |
| Forms | input, textarea, select, searchable-select, multi-select, radio-group, date-picker-field, timestamp-picker, calendar, markdown-editor, form-stepper |
| Data Tables | data-table, compact-data-table, document-table, file-table, file-upload-table, editable-cell |
| Layout | accordion, tabs, tab-bar, collapsible, separator, panel-separator, resizable-panel, scroll-area |
| Feedback | toast/toaster, progress, skeleton, banner-message, alert, status-pill |
| Dashboard | kpi-card, kpi-strip, phase-stepper |
| Custom | action-chip-selector, bulk-edit-toolbar, color-coded-card, avatar-stack, hubspot-link, toolbar-search-input, EnvironmentBanner |
Feature Component Directories
File counts include co-located .ts service modules, exclude tests/stories (as of 2026-06):
| Directory | Files | Feature | Related Page |
|---|---|---|---|
workflow/ | 178 | Workflow v4: internal board (kanban orders tab), package detail, scope-change badges/drawer, contractor + deal-import modules (PR#1942) | Workflows |
billing/ | 78 | Billing: invoices, service catalog, sevDesk payment sync | Invoices |
document-obtaining/ | 62 | Document collection workflows | Document Obtaining |
form-builder/ | 34 | Dynamic form editor/renderer | Form Builder |
admin/ | 31 | Admin settings UIs | Admin Dashboard |
files/ | 28 | File upload, preview, management | Files |
portal/ | 27 | Customer-facing portal UI | Portal |
building-technology/ | 25 | Building technology management | Buildings |
building-components-redesign/ | 16 | Building component management | Building Components |
invoices/ | 15 | Invoice creation and listing | Invoices |
team/ | 14 | Team/department management | — |
sidebar/ | 10 | App navigation sidebar (redesigned with topnav/, PR#1567 saga) | Routing |
feedback/ | 9 | Feedback collection UI | Feedback System |
quotes/, pdf/, document-review/ | 8 each | Quotes, PDF templates, document review | Quotes, PDF Templates, Document Review |
topnav/, audit-log/, buildings/ | 7 each | Top navigation bar, activity tracking, building lists | Audit Logs |
shared/ | 5 | Cross-domain reusable components | — |
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