[V0_FILE]typescriptreact:file="app/api/health/route.ts" export function GET(request: Request) { return new Response("Hello from Vercel!") } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" import { Suspense } from "react" import Dashboard from "@/components/dashboard" import { DashboardSkeleton } from "@/components/skeletons" import { ErrorBoundary } from "@/components/error-boundary" export default function Home() { return (

Something went wrong with the dashboard}> }>

) } [V0_FILE]typescriptreact:file="components/dashboard.tsx" import { Suspense } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Overview } from "@/components/overview" import { RecentSales } from "@/components/recent-sales" import { StatusCheck } from "@/components/status-check" import { DashboardHeader } from "@/components/dashboard-header" import { DashboardNav } from "@/components/dashboard-nav" import { OverviewSkeleton, RecentSalesSkeleton } from "@/components/skeletons" export default function Dashboard() { return (

Dashboard

Total Revenue

$45,231.89

+20.1% from last month

Subscriptions

+2350

+180.1% from last month

Sales

+12,234

+19% from last month

Active Now

+573

+201 since last hour

Overview }> Recent Sales You made 265 sales this month. }>

API Status Check the health of your API endpoints Loading API status...

) } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" import { ModeToggle } from "@/components/mode-toggle" import { UserNav } from "@/components/user-nav" export function DashboardHeader() { return (

Dashboard

) } [V0_FILE]typescriptreact:file="components/dashboard-nav.tsx" import Link from "next/link" import { BarChart3, Users, Package, Settings, LayoutDashboard } from "lucide-react" export function DashboardNav() { return (

Navigation

) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/user-nav.tsx" "use client" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function UserNav() { return (

User

user@example.com

Profile Billing Settings Log out ) } [V0_FILE]typescriptreact:file="components/overview.tsx" "use client" import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts" const data = [ { name: "Jan", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Feb", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Mar", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Apr", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "May", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Jun", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Jul", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Aug", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Sep", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Oct", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Nov", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Dec", total: Math.floor(Math.random() * 5000) + 1000, }, ] export function Overview() { return ( `$${value}`} /> ) } [V0_FILE]typescriptreact:file="components/recent-sales.tsx" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export async function RecentSales() { // Simulate a delay to show loading state await new Promise((resolve) => setTimeout(resolve, 1000)) return (

Olivia Martin

olivia.martin@email.com

+$1,999.00

Jackson Lee

jackson.lee@email.com

+$39.00

Isabella Nguyen

isabella.nguyen@email.com

+$299.00

William Kim

will@email.com

+$99.00

Sofia Davis

sofia.davis@email.com

+$39.00

) } [V0_FILE]typescriptreact:file="components/status-check.tsx" export async function StatusCheck() { try { const response = await fetch("/api/health", { next: { revalidate: 60 } }) const text = await response.text() return (

API Status: Online

Response: {text}

) } catch (error) { return (

API Status: Offline

Error connecting to API

) } } [V0_FILE]typescriptreact:file="components/skeletons.tsx" import { Skeleton } from "@/components/ui/skeleton" export function DashboardSkeleton() { return (

{Array.from({ length: 5 }).map((_, i) => ( ))}

{Array.from({ length: 4 }).map((_, i) => ( ))}

) } export function OverviewSkeleton() { return (

) } export function RecentSalesSkeleton() { return (

{Array.from({ length: 5 }).map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="components/error-boundary.tsx" "use client" import React from "react" import { Button } from "@/components/ui/button" interface ErrorBoundaryProps { children: React.ReactNode fallback: React.ReactNode } interface ErrorBoundaryState { hasError: boolean error?: Error } export class ErrorBoundary extends React.Component { constructor(props: ErrorBoundaryProps) { super(props) this.state = { hasError: false } } static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { hasError: true, error } } componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void { console.error("Error caught by ErrorBoundary:", error, errorInfo) } render() { if (this.state.hasError) { return (

Something went wrong

{this.state.error?.message || "An unexpected error occurred"}

) } return this.props.children } } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "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", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" "use client" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" import type React from "react" import { cn } from "@/lib/utils" function Skeleton({ className, ...props }: React.HTMLAttributes) { return
} export { Skeleton } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="providers.tsx" "use client" import { ThemeProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function Providers({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Providers } from "@/providers" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Dashboard - Next.js App", description: "Modern dashboard built with Next.js", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (
{children}
) }