React UI components

The SPA uses ShadCN UI (New York style) on Tailwind CSS, with Radix primitives and Lucide icons.

Related: Architecture, Setup.

Configuration

react-frontend/components.json configures ShadCN:

• Style: new-york
• TSX: enabled
• CSS variables: enabled (src/index.css)
• Aliases: @/components, @/components/ui, @/lib/utils, @/hooks

Where components live

Path	Role
src/components/ui/	Generated / shared ShadCN primitives (button, dialog, table, …)
src/components/layout/	Shell layouts (MainLayout, AuthLayout, route protection)
src/components/auth/	Shared auth UI pieces
src/features/*/…	Feature-specific screens and forms

Prefer composing feature UI from ui/ primitives. Promote to components/ only when reused across features.

Adding a ShadCN component

From react-frontend/, use the project’s ShadCN workflow (CLI / copy pattern consistent with existing components/ui files). Keep naming lowercase with hyphens to match the current library.

Forms and validation

Typical stack in this repo:

• react-hook-form for form state
• zod resolvers for schema validation
• ShadCN form / input primitives for presentation

Align client validation with backend Pydantic rules where practical; backend remains authoritative.

Styling

• Utility classes via Tailwind
• Shared helpers such as cn() in src/lib/utils.ts
• Prefer existing design tokens / CSS variables over one-off colors

Accessibility

Use Radix-backed ShadCN controls for focus management and keyboard behavior. Keep labels associated with inputs; do not remove accessible attributes when wrapping primitives.