UI Components
Relevant source files
The following files were used as context for generating this wiki page:
The UI components within this project form a modular and accessible design system built on React 19, TypeScript, and Tailwind CSS 4. The architecture utilizes a "shadcn/ui" pattern, where individual components are localized as reusable primitives that leverage Radix UI for accessible behavior and Tailwind CSS for styling. These components facilitate a mobile-first user experience for capturing driveway data, adjusting measurements, and visualizing material estimates.
Sources: README.md:37-41, client/src/pages/ComponentShowcase.tsx:1-125
Design System & Styling
The project employs a modern CSS architecture using Tailwind CSS 4 with a centralized theme configuration. It supports both light and dark modes through a CSS variable-based system.
Color Architecture
The system uses oklch color definitions to ensure consistent luminosity and chroma across various UI elements. Key color variables are mapped to semantic roles such as primary, secondary, muted, accent, and destructive.
Sources: client/src/index.css:5-96
Layout Utilities
The system provides custom container utilities that manage responsive padding and centering. It overrides standard Tailwind behaviors to provide a consistent content width of up to 1280px on desktop while maintaining mobile-safe gutters.
| Utility | Description | Breakpoint |
|---|---|---|
.container | Center aligned, 100% width, 1rem padding | Default (Mobile) |
.container | Increased padding to 1.5rem | min-width: 640px |
.container | Max-width 1280px, 2rem padding | min-width: 1024px |
Sources: client/src/index.css:124-150
Core Component Library
The application utilizes a wide array of functional UI components categorized by their role in the user interface.
Navigation and Overlays
Overlays like Sheets, Dialogs, and Drawers are used extensively for mobile interactions and context-heavy tasks such as sharing projects or editing profiles.
- Sheet: A slide-over component (usually from the right) used for side navigation or detail views.
- Dialog: A modal overlay for critical user inputs, such as entering a contractor's email for sharing.
- Drawer: A bottom-sheet style component optimized for mobile interactions.
Form and Input Components
The Estimator page relies on a specific set of input components to capture driveway dimensions and project details.
| Component | Usage in Project | Source |
|---|---|---|
Button | Standard actions (Save, Continue, Upload) | client/src/components/ui/button.tsx |
Input | Capturing Depth (inches), ZIP codes, and Project Names | client/src/pages/Estimator.tsx:405-415 |
Textarea | Capturing project notes | client/src/pages/Estimator.tsx:610-620 |
Slider | Numeric range adjustments | client/src/pages/ComponentShowcase.tsx:320 |
RadioGroup | Mutually exclusive selections | client/src/pages/ComponentShowcase.tsx:305-315 |
Feature-Specific UI Modules
Driveway Estimator Interface
The Estimator module is a complex UI state machine that guides users through a multi-step process.
Material Selector Grid
The material selection utilizes a specialized button grid that displays the material name, an icon, and real-time pricing per square foot.
- Hot Mix Asphalt: 🛣️
- Asphalt Millings: ♻️
- Tar & Chip: 🪨
- Gravel: ⚫
Sources: client/src/pages/Estimator.tsx:430-450, client/src/pages/Dashboard.tsx:35-40
AI Chat Interface
A specialized AIChatBox component provides a conversational interface for user assistance. It supports markdown rendering, suggested prompts, and loading states.
Sources: client/src/pages/ComponentShowcase.tsx:114-123, client/src/pages/ComponentShowcase.tsx:770-795
Conclusion
The UI component system for the Driveway Estimator Pro project emphasizes responsiveness and accessibility. By combining high-level pages like the Estimator and Dashboard with low-level accessible primitives from the UI library, the application maintains a consistent professional appearance across both web and native mobile wrappers.