The frontend uses a custom design system built on Tailwind CSS v4. All design system components live in components/ux/ and follow the TW* naming convention. Theme colors flow through CSS custom properties so components adapt automatically to the user's selected theme.
| Component | File | Purpose |
|---|
| TWInput | TWInput.tsx | Text input with theme-aware focus ring and validation states |
| TWSelect | TWSelect.tsx | Dropdown select with theme styling |
| TWDatepicker | TWDatepicker.tsx | Date picker with calendar popup |
| TWTextarea | TWTextarea.tsx | Multi-line text input |
| TWPhone | TWPhone.tsx | Phone number input with country code formatting |
| TWSlider | TWSlider.tsx | Range slider for numeric values |
| TWSwitch | TWSwitch.tsx | Toggle switch for boolean settings |
| TWCheckbox | TWCheckbox.tsx | Checkbox with theme colors |
| TWRadioGroup | TWRadioGroup.tsx | Radio button group |
| TWInputOtp | TWInputOtp.tsx | OTP code input (segmented) |
| TWPasswordConfirm | TWPasswordConfirm.tsx | Password input with confirmation matching |
Feedback & Status
| Component | File | Purpose |
|---|
| TWToast | TWToast.tsx | Toast notifications (custom system, not HeroUI) |
| TWSpinner | TWSpinner.tsx | Loading spinner |
| TWCircularProgress | TWCircularProgress.tsx | Circular progress indicator |
| TWProgress | TWProgress.tsx | Linear progress bar |
| TWSkeleton | TWSkeleton.tsx | Loading skeleton placeholder |
| TWBadge | TWBadge.tsx | Status badge (colored dot + label) |
| TWChip | TWChip.tsx | Chip / tag component |
| TWCount | TWCount.tsx | Numeric count badge |
| TWScore | TWScore.tsx | Score / rating display |
Navigation & Actions
| Component | File | Purpose |
|---|
| TWButton | TWButton.tsx | Button with multiple variants (primary, stroke, text, negative) resolved via semantic IDs |
| TWLink | TWLink.tsx | Themed link (primary, navigation, inline, subtle variants) |
| TWDropdown | TWDropdown.tsx | Dropdown menu with actions |
| TWTabs | TWTabs.tsx | Tab navigation |
| TWPagination | TWPagination.tsx | Pagination controls |
Dialogs & Overlays
| Component | File | Purpose |
|---|
| TWModal | TWModal.tsx | Modal dialog |
| TWConfirmDialog | TWConfirmDialog.tsx | Confirmation dialog with accept/cancel |
| TWTooltip | TWTooltip.tsx | Tooltip on hover |
| DeleteConfirmationDialog | DeleteConfirmationDialog.tsx | Specialized delete confirmation |
Data Display
| Component | File | Purpose |
|---|
| TWTable | TWTable.tsx | Data table with sorting and selection |
| TWAvatar | TWAvatar.tsx | User avatar with fallback initials |
| TWImage | TWImage.tsx | Image component with loading states |
| SafeImage | SafeImage.tsx | Image with broken-image fallback |
| ImageWithFallback | ImageWithFallback.tsx | Image with placeholder on error |
Layout
| Component | File | Purpose |
|---|
| TWCard | TWCard.tsx | Card container |
| FormCard | FormCard.tsx | Card optimized for form layouts |
| Grid | Grid.tsx | Grid layout system |
| TWDivider | TWDivider.tsx | Horizontal / vertical divider |
| CardComponent | CardComponent.tsx | Base card component |
Utilities
| Component | File | Purpose |
|---|
| TWIcon | TWIcon.tsx | Icon wrapper |
| TWToggle | TWToggle.tsx | Toggle button |
| TWSetPageTitle | TWSetPageTitle.tsx | Declarative page title setter |
| TWSharedStyles | TWSharedStyles.tsx | STYLE_VARIABLES object with reusable Tailwind class combinations |
| TWExtract | TWExtract.tsx | Data extraction display |
| ValidatedSubmitButton | ValidatedSubmitButton.tsx | Form submit button with validation awareness |
Animation Components
Animation components in components/animations/ use Framer Motion for page transitions and micro-interactions.
Icon Library
Custom icon components live in components/icons/. These wrap SVG icons for consistent sizing and theme color integration.
Higher-Order Components
| HOC | File | Purpose |
|---|
| withSuspense | components/reusable/withSuspense.tsx | Wraps a component in React Suspense with a loading fallback |