# Component Library Guide DashWave includes a comprehensive set of reusable components following atomic design principles. This guide covers the main component categories and usage patterns. ## Component Architecture DashWave organizes components into four main categories: ### Atoms (`/components/atoms/`) Basic building blocks that can't be broken down further: - **Icon**: Unified icon component using Iconify - **ThemeSwitcher**: Toggle between light/dark modes - **LanguageSwitcher**: Multi-language selector - **Form Components**: Input fields, selects, checkboxes, etc. ### Molecules (`/components/molecules/`) Simple combinations of atoms: - **StatusChip**: Colored status indicators - **StatCard**: Dashboard statistic cards - **PageHeader**: Page title and breadcrumb - **EmptyState**: No data placeholder - **ConfirmDialog**: Confirmation modals ### Organisms (`/components/organisms/`) Complex, feature-complete components: - **DataGrid**: Advanced data table with sorting, filtering, pagination - **MainLayout**: Complete dashboard layout - **AppBar**: Application header - **Sidebar**: Navigation sidebar - **SalesChart**: Analytics charts ### Templates (`/components/templates/`) Page-level layouts: - **DashboardLayout**: Authenticated page wrapper - **AuthLayout**: Authentication page wrapper - **ProtectedRoute**: Route protection ## Key Components ### DataGrid Powerful data table component with advanced features: ```typescript import { DataGrid } from '@/components/organisms'; const columns = [ { field: 'name', headerName: 'Name', flex: 1 }, { field: 'email', headerName: 'Email', flex: 1 }, { field: 'role', headerName: 'Role', width: 120 }, ]; handleEdit(id)} onDelete={(id) => handleDelete(id)} onBulkDelete={(ids) => handleBulkDelete(ids)} /> ``` ### StatCard Display key metrics and statistics: ```typescript import { StatCard } from '@/components/molecules'; ``` ### StatusChip Show status with consistent styling: ```typescript import { StatusChip } from '@/components/molecules'; ``` ### PageHeader Consistent page headers with breadcrumbs: ```typescript import { PageHeader } from '@/components/molecules'; Add User } /> ``` ## Form Components DashWave includes enhanced form components that work seamlessly with React Hook Form: ### FormTextField ```typescript import { FormTextField } from '@/components/atoms'; ``` ### FormSelect ```typescript import { FormSelect } from '@/components/atoms'; ``` ### FormFileUpload ```typescript import { FormFileUpload } from '@/components/atoms'; ``` ## Styling Patterns ### Using sx Prop All components support Material UI's sx prop for custom styling: ```typescript ``` ### Theme Integration Components automatically adapt to the current theme: ```typescript // Colors automatically adjust based on theme mode Content adapts to light/dark mode ``` ## Component Customization ### Extending Components Create custom variants by extending existing components: ```typescript import { StatCard } from '@/components/molecules'; interface CustomStatCardProps extends StatCardProps { gradient?: boolean; } const CustomStatCard: React.FC = ({ gradient, ...props }) => { return ( ); }; ``` ### Creating New Components Follow the atomic design principles when creating new components: 1. **Atoms**: Single-purpose, no dependencies 2. **Molecules**: Combine atoms, specific functionality 3. **Organisms**: Complex features, multiple molecules 4. **Templates**: Page-level structure ## Best Practices 1. **Reusability**: Design components to be reusable across different contexts 2. **Props Interface**: Define clear, typed props interfaces 3. **Accessibility**: Include proper ARIA attributes and keyboard navigation 4. **Performance**: Use React.memo for components that render frequently 5. **Testing**: Write tests for complex component logic ## Component Documentation For detailed documentation of each component: - [Form Components](form-components-guide) - [Data Display](data-display-components) - [Layout Components](layout-components-guide) - [Chart Components](chart-components-guide)