@theihtisham/ai-agent-starter-kit 1.0.0

package/src/components/dashboard/header.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import Link from 'next/link';
+import { useSession, signOut } from 'next-auth/react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownSeparator } from '@/components/ui/dropdown';
+import { Avatar } from '@/components/ui/avatar';
+
+export function Header() {
+  const { data: session } = useSession();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="flex h-14 items-center px-6">
+        <Link href="/" className="flex items-center gap-2 font-bold text-lg">
+          <span className="text-primary">&#x1F916;</span>
+          <span>AgentKit</span>
+        </Link>
+
+        <nav className="ml-8 flex items-center gap-6 text-sm">
+          <Link href="/dashboard" className="text-muted-foreground hover:text-foreground transition-colors">
+            Dashboard
+          </Link>
+          <Link href="/agents" className="text-muted-foreground hover:text-foreground transition-colors">
+            Agents
+          </Link>
+          <Link href="/pricing" className="text-muted-foreground hover:text-foreground transition-colors">
+            Pricing
+          </Link>
+        </nav>
+
+        <div className="ml-auto flex items-center gap-4">
+          {session?.user ? (
+            <Dropdown>
+              <DropdownTrigger onClick={() => setDropdownOpen(!dropdownOpen)} className="flex items-center gap-2">
+                <Avatar
+                  src={session.user.image}
+                  alt={session.user.name ?? ''}
+                  fallback={session.user.name}
+                  className="h-8 w-8"
+                />
+              </DropdownTrigger>
+              <DropdownContent open={dropdownOpen} onClose={() => setDropdownOpen(false)}>
+                <DropdownItem onClick={() => setDropdownOpen(false)}>
+                  <Link href="/settings" className="w-full">Settings</Link>
+                </DropdownItem>
+                <DropdownItem onClick={() => setDropdownOpen(false)}>
+                  <Link href="/settings/billing" className="w-full">Billing</Link>
+                </DropdownItem>
+                <DropdownItem onClick={() => setDropdownOpen(false)}>
+                  <Link href="/api-keys" className="w-full">API Keys</Link>
+                </DropdownItem>
+                <DropdownSeparator />
+                <DropdownItem onClick={() => { signOut(); setDropdownOpen(false); }}>
+                  Sign Out
+                </DropdownItem>
+              </DropdownContent>
+            </Dropdown>
+          ) : (
+            <div className="flex items-center gap-2">
+              <Link href="/login">
+                <Button variant="ghost" size="sm">Log in</Button>
+              </Link>
+              <Link href="/signup">
+                <Button size="sm">Sign up</Button>
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/components/dashboard/sidebar.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils/helpers';
+
+const navItems = [
+  { label: 'Dashboard', href: '/dashboard' },
+  { label: 'Agents', href: '/agents' },
+  { label: 'API Keys', href: '/api-keys' },
+  { label: 'Usage', href: '/usage' },
+  { label: 'Settings', href: '/settings' },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside className="hidden md:flex md:w-56 md:flex-col md:border-r bg-background">
+      <div className="flex h-14 items-center border-b px-4">
+        <Link href="/" className="flex items-center gap-2 font-bold">
+          <span className="text-primary">&#x1F916;</span>
+          <span>AgentKit</span>
+        </Link>
+      </div>
+      <nav className="flex-1 space-y-1 p-3">
+        {navItems.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={cn(
+              'flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors',
+              pathname === item.href || pathname.startsWith(item.href + '/')
+                ? 'bg-accent text-accent-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+            )}
+          >
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+      <div className="border-t p-3">
+        <Link
+          href="/settings/billing"
+          className="flex items-center rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+        >
+          Upgrade Plan
+        </Link>
+      </div>
+    </aside>
+  );
+}

package/src/components/dashboard/stat-card.tsx

@@ -0,0 +1,42 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils/helpers';
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  description?: string;
+  icon?: React.ReactNode;
+  trend?: { value: number; positive: boolean };
+  className?: string;
+}
+
+export function StatCard({ title, value, description, icon, trend, className }: StatCardProps) {
+  return (
+    <Card className={className}>
+      <CardContent className="p-6">
+        <div className="flex items-center justify-between">
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          {icon && <div className="text-muted-foreground">{icon}</div>}
+        </div>
+        <div className="mt-2">
+          <p className="text-2xl font-bold">{value}</p>
+          {(description || trend) && (
+            <div className="flex items-center gap-1 mt-1">
+              {trend && (
+                <span className={cn(
+                  'text-xs font-medium',
+                  trend.positive ? 'text-green-600' : 'text-red-600',
+                )}>
+                  {trend.positive ? '+' : ''}{trend.value}%
+                </span>
+              )}
+              {description && (
+                <span className="text-xs text-muted-foreground">{description}</span>
+              )}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/dashboard/usage-chart.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from 'recharts';
+
+interface UsageChartProps {
+  data: { date: string; messages: number; tokens: number }[];
+}
+
+export function UsageChart({ data }: UsageChartProps) {
+  return (
+    <div className="h-[300px] w-full">
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={data}>
+          <XAxis
+            dataKey="date"
+            stroke="#888888"
+            fontSize={12}
+            tickLine={false}
+            axisLine={false}
+          />
+          <YAxis
+            stroke="#888888"
+            fontSize={12}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={(value) => `${value}`}
+          />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: 'hsl(var(--background))',
+              border: '1px solid hsl(var(--border))',
+              borderRadius: '6px',
+              fontSize: '12px',
+            }}
+          />
+          <Bar dataKey="messages" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} name="Messages" />
+          <Bar dataKey="tokens" fill="hsl(var(--muted-foreground))" radius={[4, 4, 0, 0]} name="Tokens (K)" />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/components/landing/cta.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+
+export function CTA() {
+  return (
+    <section className="py-20 bg-primary text-primary-foreground">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8 text-center">
+        <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+          Ready to ship your AI SaaS?
+        </h2>
+        <p className="mt-4 text-lg opacity-90 max-w-2xl mx-auto">
+          Join thousands of developers building AI products with AgentKit.
+          Get started in minutes, not months.
+        </p>
+        <div className="mt-8 flex items-center justify-center gap-4">
+          <Link href="/signup">
+            <Button size="lg" variant="secondary">
+              Start Building Free
+            </Button>
+          </Link>
+          <Link href="https://github.com" target="_blank" rel="noopener noreferrer">
+            <Button size="lg" variant="outline" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+              View on GitHub
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/landing/features.tsx

@@ -0,0 +1,75 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+
+const features = [
+  {
+    title: 'AI Agent Engine',
+    description: 'Multi-model support (GPT-4o, Claude, Gemini) with streaming responses and tool calling out of the box.',
+    icon: '🤖',
+  },
+  {
+    title: 'Tool Calling',
+    description: 'Built-in tools: web search, calculator, JSON parser, code executor, file reader. Add custom tools easily.',
+    icon: '🔧',
+  },
+  {
+    title: 'Streaming SSE',
+    description: 'Real-time streaming responses with Server-Sent Events. Works with any OpenAI-compatible API.',
+    icon: '⚡',
+  },
+  {
+    title: 'Auth & Billing',
+    description: 'NextAuth with Google, GitHub, email. Stripe subscriptions with free/pro/team tiers.',
+    icon: '💳',
+  },
+  {
+    title: 'Rate Limiting',
+    description: 'Sliding window rate limiter with in-memory or Redis backend. Per-plan limits.',
+    icon: '🛡',
+  },
+  {
+    title: 'API Keys',
+    description: 'Generate API keys for programmatic access. Prefix-based identification with secure hashing.',
+    icon: '🔑',
+  },
+  {
+    title: 'Usage Tracking',
+    description: 'Track messages, tokens, and tool calls per billing period. Usage-based analytics dashboard.',
+    icon: '📊',
+  },
+  {
+    title: 'Dashboard UI',
+    description: 'Beautiful dashboard with agent management, chat interface, billing, and usage analytics.',
+    icon: '🎨',
+  },
+  {
+    title: 'TypeScript Strict',
+    description: 'Full TypeScript strict mode with Zod validation. Type-safe API routes and database queries.',
+    icon: '📝',
+  },
+];
+
+export function Features() {
+  return (
+    <section id="features" className="py-20 bg-muted/50">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center mb-12">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Everything you need</h2>
+          <p className="mt-4 text-lg text-muted-foreground">
+            A complete AI agent platform, ready for production.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {features.map((feature) => (
+            <Card key={feature.title}>
+              <CardHeader>
+                <span className="text-2xl" dangerouslySetInnerHTML={{ __html: feature.icon }} />
+                <CardTitle className="text-lg">{feature.title}</CardTitle>
+                <CardDescription>{feature.description}</CardDescription>
+              </CardHeader>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/landing/hero.tsx

@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+
+export function Hero() {
+  return (
+    <section className="relative overflow-hidden py-20 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center">
+          <p className="text-sm font-semibold leading-7 text-primary tracking-wide uppercase">
+            Open Source AI Agent Framework
+          </p>
+          <h1 className="mt-2 text-4xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
+            Ship your AI SaaS
+            <span className="text-primary"> this weekend</span>
+          </h1>
+          <p className="mt-6 text-lg leading-8 text-muted-foreground max-w-2xl mx-auto">
+            Production-ready AI agent starter kit with Next.js 14, streaming, tool calling,
+            Stripe billing, auth, and more. Open source and self-hostable.
+          </p>
+          <div className="mt-10 flex items-center justify-center gap-4">
+            <Link href="/signup">
+              <Button size="lg">Get Started Free</Button>
+            </Link>
+            <Link href="https://github.com" target="_blank" rel="noopener noreferrer">
+              <Button size="lg" variant="outline">
+                <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                Star on GitHub
+              </Button>
+            </Link>
+          </div>
+          <div className="mt-8 flex items-center justify-center gap-6 text-sm text-muted-foreground">
+            <span>MIT License</span>
+            <span>&bull;</span>
+            <span>TypeScript</span>
+            <span>&bull;</span>
+            <span>Self-hostable</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/landing/pricing.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { PricingTable } from '@/components/billing/pricing-table';
+
+export function LandingPricing() {
+  return (
+    <section id="pricing" className="py-20">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center mb-12">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Simple, transparent pricing</h2>
+          <p className="mt-4 text-lg text-muted-foreground">
+            Start free, upgrade when you need more.
+          </p>
+        </div>
+        <div className="mx-auto max-w-5xl">
+          <PricingTable
+            onSelectPlan={() => {
+              if (typeof window !== 'undefined') window.location.href = '/signup';
+            }}
+          />
+        </div>
+        <p className="mt-8 text-center text-sm text-muted-foreground">
+          Self-hosted is always free. Cloud pricing applies to the managed service.
+        </p>
+      </div>
+    </section>
+  );
+}

package/src/components/ui/avatar.tsx

@@ -0,0 +1,24 @@
+import { cn } from '@/lib/utils/helpers';
+
+export function Avatar({ className, src, alt, fallback }: {
+  className?: string;
+  src?: string | null;
+  alt?: string;
+  fallback?: string | null;
+}) {
+  const initials = fallback ?? alt?.slice(0, 2).toUpperCase() ?? 'U';
+
+  if (src) {
+    return (
+      <div className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}>
+        <img src={src} alt={alt ?? ''} className="aspect-square h-full w-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted', className)}>
+      <span className="text-sm font-medium">{initials}</span>
+    </div>
+  );
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from 'react';
+import { cn } from '@/lib/utils/helpers';
+
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline';
+}
+
+export function Badge({ className, variant = 'default', ...props }: BadgeProps) {
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+        {
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80': variant === 'default',
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80': variant === 'destructive',
+          'text-foreground': variant === 'outline',
+        },
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, type ButtonHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils/helpers';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'default', ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+          {
+            'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
+            'bg-destructive text-destructive-foreground hover:bg-destructive/90': variant === 'destructive',
+            'border border-input bg-background hover:bg-accent hover:text-accent-foreground': variant === 'outline',
+            'bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
+            'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
+            'text-primary underline-offset-4 hover:underline': variant === 'link',
+          },
+          {
+            'h-10 px-4 py-2': size === 'default',
+            'h-9 rounded-md px-3': size === 'sm',
+            'h-11 rounded-md px-8': size === 'lg',
+            'h-10 w-10': size === 'icon',
+          },
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button };

package/src/components/ui/card.tsx

@@ -0,0 +1,50 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '@/lib/utils/helpers';
+
+const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = 'Card';
+
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+  ),
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  ),
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  ),
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  ),
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/components/ui/dialog.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import { cn } from '@/lib/utils/helpers';
+
+interface DialogContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const DialogContext = createContext<DialogContextValue>({ open: false, onOpenChange: () => {} });
+
+export function Dialog({ open: controlledOpen, onOpenChange: controlledOnChange, children }: {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: ReactNode;
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = controlledOpen ?? internalOpen;
+  const onOpenChange = controlledOnChange ?? setInternalOpen;
+
+  return (
+    <DialogContext.Provider value={{ open, onOpenChange }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+export function DialogTrigger({ children, className }: { children: ReactNode; className?: string }) {
+  const { onOpenChange } = useContext(DialogContext);
+  return (
+    <button className={className} onClick={() => onOpenChange(true)}>
+      {children}
+    </button>
+  );
+}
+
+export function DialogContent({ children, className }: { children: ReactNode; className?: string }) {
+  const { open, onOpenChange } = useContext(DialogContext);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/80" onClick={() => onOpenChange(false)} />
+      <div className={cn('fixed z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg sm:rounded-lg animate-fade-in', className)}>
+        {children}
+        <button
+          className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100"
+          onClick={() => onOpenChange(false)}
+        >
+          <svg width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd" /></svg>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function DialogHeader({ className, ...props }: { className?: string; children?: ReactNode }) {
+  return <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />;
+}
+
+export function DialogTitle({ className, ...props }: { className?: string; children?: ReactNode }) {
+  return <h2 className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />;
+}
+
+export function DialogDescription({ className, ...props }: { className?: string; children?: ReactNode }) {
+  return <p className={cn('text-sm text-muted-foreground', className)} {...props} />;
+}
+
+export function DialogFooter({ className, ...props }: { className?: string; children?: ReactNode }) {
+  return <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />;
+}