| Metadata | Value |
|---|---|
| Status | Active |
| Version | 1.1.0 |
| Last Updated | 2026-09-10 |
| Author | Sangeetha Grantha Team |
| Document Type | Design reference |
[!NOTE] Design/reference material: this page may include proposals or earlier implementation assumptions. Use current feature map for implemented behavior and current operating steps.
Stack: React 19, TypeScript, Tailwind CSS v4, Vite.
| Category | Library | Purpose |
|---|---|---|
| Core UI | Radix UI | Accessible, unstyled primitives (Dialog, Popover, Dropdown, Toggle). |
| Styling | Tailwind CSS v4 | Utility-first styling. Configured via theme.css. |
| Icons | Lucide React | Consistent, crisp icon set. |
| Data Fetching | TanStack Query (React Query) | Server state management, caching, debouncing. |
| Routing | React Router DOM | Client-side routing. |
| Forms | React Hook Form | Performant, validation-first forms. |
| Validation | Zod | Schema validation for forms and API responses. |
| Toast | Sonner | Opinionated, accessible toast notifications. |
Stack: Kotlin Multiplatform, Compose Multiplatform.
| Category | Library | Purpose |
|---|---|---|
| UI | Compose Multiplatform | Shared UI code for Android and iOS. |
| Components | Material 3 | Google’s Material Design system implementation. |
| Navigation | Jetpack Navigation | Type-safe navigation graph. |
| Image Loading | Coil 3 | KMP-native image loading and caching. |
| Icons | Material Icons Extended | Standard Material icons. |
Colors, Typography, and Spacing scales are aligned between Tailwind (Web) and Material Theme (Mobile) to ensure brand consistency.