# Kanvaro - shadcn/ui Integration Guide ## Overview Kanvaro leverages [shadcn/ui](https://ui.shadcn.com/) - a modern, accessible component library built on Radix UI primitives and Tailwind CSS. This ensures professional-quality components with built-in accessibility, faster development, and seamless Next.js integration. ## Why shadcn/ui for Kanvaro? ### ✅ **Faster Development** - Professional components out of the box - No need to build common UI patterns from scratch - Consistent design system across the application - Rapid prototyping and iteration ### ✅ **Built-in Accessibility** - Radix UI primitives handle a11y concerns automatically - Keyboard navigation support - Screen reader compatibility - ARIA attributes included by default ### ✅ **Highly Customizable** - Copy components to your project for full control - Easy to modify and extend - Brand-specific theming - Component variants and styling ### ✅ **Next.js Optimized** - Seamless integration with Next.js - Server-side rendering support - TypeScript-first approach - Modern React patterns ## Installation & Setup ### 1. Initialize shadcn/ui ```bash # Install shadcn/ui npx shadcn-ui@latest init # This will create: # - components.json (configuration) # - lib/utils.ts (utility functions) # - components/ui/ (component directory) ``` ### 2. Configure components.json ```json { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.js", "css": "app/globals.css", "baseColor": "slate", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils" } } ``` ### 3. Install Required Components ```bash # Core components for Kanvaro npx shadcn-ui@latest add button npx shadcn-ui@latest add card npx shadcn-ui@latest add input npx shadcn-ui@latest add form npx shadcn-ui@latest add dialog npx shadcn-ui@latest add select npx shadcn-ui@latest add table npx shadcn-ui@latest add toast npx shadcn-ui@latest add alert npx shadcn-ui@latest add badge npx shadcn-ui@latest add avatar npx shadcn-ui@latest add dropdown-menu npx shadcn-ui@latest add navigation-menu npx shadcn-ui@latest add sidebar npx shadcn-ui@latest add tabs npx shadcn-ui@latest add progress npx shadcn-ui@latest add skeleton npx shadcn-ui@latest add sheet npx shadcn-ui@latest add popover npx shadcn-ui@latest add tooltip npx shadcn-ui@latest add calendar npx shadcn-ui@latest add date-picker npx shadcn-ui@latest add command npx shadcn-ui@latest add combobox npx shadcn-ui@latest add data-table npx shadcn-ui@latest add chart ``` ## Kanvaro-Specific Component Usage ### Setup Wizard Components #### Progress Steps with shadcn/ui ```typescript // components/setup/ProgressSteps.tsx import { Card, CardContent } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Check, Circle } from 'lucide-react'; import { cn } from '@/lib/utils'; interface Step { id: string; title: string; status: 'completed' | 'current' | 'upcoming'; } export const ProgressSteps = ({ steps, currentStep }: ProgressStepsProps) => { return ( ); }; ``` #### Setup Form with shadcn/ui ```typescript // components/setup/SetupForm.tsx import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { ArrowLeft, ArrowRight, CheckCircle, XCircle } from 'lucide-react'; export const SetupForm = ({ title, description, children, onBack, onNext, onComplete, isLastStep = false, isLoading = false }: SetupFormProps) => { return (

{title}

{description}

{children}

{onBack && ( )}

{isLastStep ? ( ) : ( )}

); }; ``` ### Database Configuration Form ```typescript // components/setup/DatabaseConfiguration.tsx import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Button } from '@/components/ui/button'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { CheckCircle, XCircle, Database, Loader2 } from 'lucide-react'; export const DatabaseConfiguration = () => { const [config, setConfig] = useState({ host: 'localhost', port: 27017, database: 'kanvaro', username: '', password: '', authSource: 'admin', ssl: false }); const [testing, setTesting] = useState(false); const [testResult, setTestResult] = useState(null); return (

Configure your MongoDB database connection. Make sure MongoDB is running and accessible.

Database Host setConfig({ ...config, host: e.target.value })} placeholder="localhost" />

Port setConfig({ ...config, port: parseInt(e.target.value) })} placeholder="27017" />

Database Name setConfig({ ...config, database: e.target.value })} placeholder="kanvaro" />

Username setConfig({ ...config, username: e.target.value })} placeholder="admin" />

Password setConfig({ ...config, password: e.target.value })} placeholder="••••••••" />

{testResult && ( {testResult.success ? ( ) : ( )} {testResult.message} )}

); }; ``` ### Email Configuration Form ```typescript // components/setup/EmailConfiguration.tsx import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Button } from '@/components/ui/button'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { CheckCircle, XCircle, Mail, Cloud, Send, Zap } from 'lucide-react'; export const EmailConfiguration = () => { const [provider, setProvider] = useState<'smtp' | 'azure' | 'sendgrid' | 'mailgun'>('smtp'); const [testing, setTesting] = useState(false); const [testResult, setTestResult] = useState(null); return (

Configure your email service to send notifications, invitations, and system emails. setProvider(value as any)}> SMTP Azure SendGrid Mailgun

{testResult && ( {testResult.success ? ( ) : ( )} {testResult.message} )}

); }; ``` ## Dashboard Components ### Project Dashboard with shadcn/ui ```typescript // components/dashboard/ProjectDashboard.tsx import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Progress } from '@/components/ui/progress'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; export const ProjectDashboard = () => { return (

{/* Project Overview Cards */}

Total Projects 12

+2 from last month

Active Tasks 24

+4 from yesterday

Team Members 8

+1 new member

Completion Rate 85%

85%

{/* Project List */} Recent Projects Project Status Team Progress Actions {projects.map((project) => ( {project.name} {project.status}

{project.team.map((member) => ( {member.name[0]} ))}

{project.progress}%

))}

); }; ``` ## Theming & Customization ### Custom Theme Configuration ```typescript // lib/theme.ts export const themeConfig = { light: { background: 'hsl(0 0% 100%)', foreground: 'hsl(222.2 84% 4.9%)', card: 'hsl(0 0% 100%)', cardForeground: 'hsl(222.2 84% 4.9%)', primary: 'hsl(221.2 83.2% 53.3%)', primaryForeground: 'hsl(210 40% 98%)', secondary: 'hsl(210 40% 96%)', secondaryForeground: 'hsl(222.2 84% 4.9%)', muted: 'hsl(210 40% 96%)', mutedForeground: 'hsl(215.4 16.3% 46.9%)', accent: 'hsl(210 40% 96%)', accentForeground: 'hsl(222.2 84% 4.9%)', destructive: 'hsl(0 84.2% 60.2%)', destructiveForeground: 'hsl(210 40% 98%)', border: 'hsl(214.3 31.8% 91.4%)', input: 'hsl(214.3 31.8% 91.4%)', ring: 'hsl(221.2 83.2% 53.3%)', }, dark: { background: 'hsl(222.2 84% 4.9%)', foreground: 'hsl(210 40% 98%)', card: 'hsl(222.2 84% 4.9%)', cardForeground: 'hsl(210 40% 98%)', primary: 'hsl(217.2 91.2% 59.8%)', primaryForeground: 'hsl(222.2 84% 4.9%)', secondary: 'hsl(217.2 32.6% 17.5%)', secondaryForeground: 'hsl(210 40% 98%)', muted: 'hsl(217.2 32.6% 17.5%)', mutedForeground: 'hsl(215 20.2% 65.1%)', accent: 'hsl(217.2 32.6% 17.5%)', accentForeground: 'hsl(210 40% 98%)', destructive: 'hsl(0 62.8% 30.6%)', destructiveForeground: 'hsl(210 40% 98%)', border: 'hsl(217.2 32.6% 17.5%)', input: 'hsl(217.2 32.6% 17.5%)', ring: 'hsl(224.3 76.3% 94.1%)', } }; ``` ## Best Practices ### 1. Component Composition ```typescript // Use shadcn/ui components as building blocks import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; export const ProjectCard = ({ project }) => ( {project.name} {project.status}

{project.description}

); ``` ### 2. Consistent Styling ```typescript // Use Tailwind classes consistently // Good: Using semantic color tokens

Documentation

Shadcn Integration

Table of Contents