Ui Guidelines

Common Patterns

Layouts

// Page container
<div className="flex flex-col h-full w-full">...</div>

// Sidebar + main split
<div className="flex h-screen">
  <aside className="w-64 border-r">...</aside>
  <main className="flex-1 overflow-auto">...</main>
</div>

Cards

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

<Card>
  <CardHeader><CardTitle>Title</CardTitle></CardHeader>
  <CardContent>Content</CardContent>
</Card>

Dialogs (with confirmation)

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <DialogHeader><DialogTitle>Confirm Delete</DialogTitle></DialogHeader>
    <DialogFooter>
      <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
      <Button variant="destructive" onClick={handleDelete}>Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Forms

import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";

<div className="space-y-2">
  <Label htmlFor="name">Name</Label>
  <Input id="name" value={name} onChange={e => setName(e.target.value)} />
</div>

Adding New shadcn Components

npx shadcn@latest add [component-name]
# Component is added to frontend/components/ui/[component-name].tsx

Import: import { Component } from "@/components/ui/component"

Theming

• CSS variables defined in frontend/app/globals.css.
• Dark/light mode via next-themes — already set up in components/theme-provider.tsx.
• Do not modify tailwind.config colors directly unless adding a new semantic token.

Icons

• lucide-react only. Add aria-label to icon-only buttons for accessibility.

Responsive Layout

• Mobile: use <Sheet> from shadcn/ui for slide-over sidebar (check useIsMobile() hook in hooks/use-mobile.ts).
• Desktop: persistent collapsible sidebar.
• Toggle state managed by Zustand sidebarOpen in hooks/stores/use-app-store.ts.