UI Components & Styling

The Kenya Estates platform prioritizes a modern, accessible, and user-friendly interface. This section details the technologies, philosophies, and practices employed to achieve a high-quality UI/UX.

Core Styling Philosophy

Our styling approach is built upon a foundation of utility-first CSS, primarily using Tailwind CSS. This allows for rapid development, consistent styling, and highly maintainable code.

• Tailwind CSS: Provides a comprehensive set of pre-designed utility classes that can be composed to build any design, directly in the markup.
• Global Styles: Minimal global styles are defined in app/globals.css, primarily for base HTML elements, font definitions, and CSS variable declarations.
• CSS Variables: Used for theming (e.g., colors, spacing, typography) to allow for dynamic changes, such as dark mode.

Component Architecture

We leverage a robust component architecture based on React and Next.js. Our components are primarily sourced and adapted from Shadcn/ui, augmented with custom components tailored to the specific needs of the Kenya Estates platform.

• Shadcn/ui: A collection of beautifully designed, accessible, and customizable React components. These are not installed as a typical library but rather integrated directly into the codebase (components/ui), allowing for full control and customization.
• Custom Components: Located in the components directory, these are higher-level components specific to the application's domain (e.g., PropertyCard, SearchForm, Navbar).
• Server Components & Client Components: We utilize Next.js App Router conventions, distinguishing between Server Components (for performance and server-side logic) and Client Components (for interactivity).

Key UI Elements Showcase

Below are examples of how common UI elements are implemented. (Actual code examples and interactive demos can be expanded here).

• Buttons: Consistent styling for primary, secondary, destructive, and link buttons.

  
  import { Button } from '@/components/ui/button';
  
  <Button>Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="link">Link</Button>
  

• Forms & Inputs: Standardized input fields, labels, selects, checkboxes, and validation messages.

  
  import { Input } from '@/components/ui/input';
  import { Label } from '@/components/ui/label';
  import { Checkbox } from '@/components/ui/checkbox';
  import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
  } from '@/components/ui/select';
  
  <div>
    <Label htmlFor="email">Email</Label>
    <Input type="email" id="email" placeholder="m@example.com" />
  </div>
  
  <div className="flex items-center space-x-2">
    <Checkbox id="terms" />
    <Label htmlFor="terms">Accept terms and conditions</Label>
  </div>
  

• Cards: Used for displaying summarized information, like property listings or blog posts. (e.g., PropertyCard.tsx)
• Modals & Dialogs: For focused tasks or important notifications. (e.g., AlertDialog, Dialog from Shadcn/ui)
• Navigation: Main navigation (Navbar.tsx), dashboard navigation (DashboardNav.tsx), breadcrumbs.

Theming and Dark Mode

The platform supports light and dark themes. This is managed using CSS variables and the next-themes library.

• Theme definitions (colors, etc.) are primarily in app/globals.css and tailwind.config.ts.
• The ThemeProvider component (likely in components/theme-provider.tsx) handles theme switching and persistence.

// Example: components/theme-provider.tsx
"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

// Usage in app/layout.tsx
<ThemeProvider
  attribute="class"
  defaultTheme="system"
  enableSystem
  disableTransitionOnChange
>
  {children}
</ThemeProvider>

Responsive Design

All components and layouts are designed to be responsive, ensuring a seamless experience across various devices (desktops, tablets, and mobiles). Tailwind CSS's responsive prefixes (e.g., md:, lg:) are extensively used.

Custom hooks like use-mobile.tsx might be used for JavaScript-driven responsive logic if necessary.

Accessibility (a11y)

Accessibility is a core consideration. We strive to follow WCAG guidelines by:

• Using semantic HTML elements.
• Ensuring proper ARIA attributes where necessary.
• Providing keyboard navigability.
• Maintaining sufficient color contrast.
• Leveraging accessibility features built into Shadcn/ui components.

Icons

Icons are managed via a centralized system, likely using a library like Lucide Icons or custom SVG components. Check components/icons.tsxfor specific implementations.

// Example: components/icons.tsx
import {
  Home,
  Search,
  User,
  Settings,
  // ... other icons from lucide-react or a similar library
} from 'lucide-react';

export const Icons = {
  home: Home,
  search: Search,
  user: User,
  settings: Settings,
  // ...
};

// Usage:
// import { Icons } from '@/components/icons';
// <Icons.home className="h-4 w-4" />

Customization and Extension

Since Shadcn/ui components are part of the codebase, they can be directly customized. Tailwind CSS's configuration (tailwind.config.ts) can be extended with custom colors, fonts, spacing, etc., to match evolving brand guidelines.