Skip to content

Frontend Components

UI System

The UI is built using Shadcn/UI, which provides a set of accessible, reusable, and customizable components built on top of Radix UI and Tailwind CSS.

Core Components (src/components/ui/)

These are the primitive building blocks of the application. They are not imported from a library but are part of the codebase, allowing for full customization. - Button, Input, Label: Basic form elements. - Card, Dialog, Sheet: Layout and overlay components. - Form: Built on top of react-hook-form and zod for validation. - Toast: For notifications and alerts.

Feature Components

Complex components that compose multiple UI primitives are located in feature-specific folders or directly in src/components/. - UserNav: The navigation menu for the logged-in user. - Chatbot: The floating AI assistant interface. - Map: Leaflet map integration for visualizing disasters and resources.

Design Principles

  1. Mobile-First: All components are designed to be responsive, working seamlessly on mobile, tablet, and desktop.
  2. Accessibility: We prioritize accessibility using semantic HTML and ARIA attributes (via Radix UI).
  3. Consistency: We use a consistent color palette and typography defined in tailwind.config.ts and globals.css.
  4. Composition: We prefer composition over inheritance, building complex UIs from simple, single-responsibility components.