Components
UI components and patterns
This project uses Shadcn UI built on top of Tailwind CSS for a consistent, accessible component library.
Component Organization
Shared components are located in src/components/:
| Directory | Purpose |
|---|---|
src/components/ui | Base Shadcn components (Button, Input) |
src/components/navigation | Layout components, headers, breadcrumbs |
src/components/ext | Extended/custom components |
Quick Links
Buttons
Button and ButtonLink components with variants
Forms
React Hook Form + Zod validation patterns
Dialogs
usePrompt() pattern for modals and confirmations
Navigation
Header, sidebar, and navigation components
Icons
Always use the <Icon /> component instead of importing directly from Lucide.
import { Icon } from "@/lib/icons";
<Icon iconKey="user" className="text-primary" />
<Icon iconKey="spinner" /> {/* Automatically animates */}Benefits
- Extended sources - Access Lucide, social, payment, and custom SVG icons
- Consistent styling - Auto-applies
strokeWidth={2}andsize-4 shrink-0 - Auto-animation - Spinner icon automatically spins
Icon Modules
| Module | Description |
|---|---|
lucide.ts | Core application icons from Lucide |
social.tsx | Social media SVG icons |
payment.tsx | Payment provider icons |
custom.tsx | Custom SVG icons (borders, etc.) |
Never Import Directly
Avoid importing from lucide-react directly. Always use the Icon component for consistency.
Placeholder Images
For development and prototyping:
// External placeholder (dynamic sizes)
<Image src="https://placehold.co/400x400" alt="" />
// Local placeholder
<Image src="/assets/placeholder.jpg" alt="" />| Source | Use Case |
|---|---|
https://placehold.co/WxH | Dynamic sizing |
/assets/placeholder.jpg | Local fallback, faster |
Next Steps
Explore specific component documentation to learn about variants, props, and usage patterns