New: 149+ components, Page Builder, and more
AI App Building Blocks for the Web
Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.
Files
import Image from "next/image"
import Link from "next/link"
import {
ChevronLeft,
ChevronRight,
Copy,
CreditCard,
File,
Home,
LineChart,
ListFilter,
MoreVertical,
Package,
Package2,
PanelLeft,
Search,
Settings,
ShoppingCart,
Truck,
Users2,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import {
Pagination,
PaginationContent,
PaginationItem,
} from "@/components/ui/pagination"
import { Progress } from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
export const description =
"An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information."
export const iframeHeight = "1112px"
export const containerClassName = "w-full h-full"
export function Dashboard() {
return (
<div className="flex min-h-screen w-full flex-col bg-muted/40">
<aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
<nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
<Link
href="#"
className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
>
<Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
<span className="sr-only">Acme Inc</span>
</Link>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Home className="h-5 w-5" />
<span className="sr-only">Dashboard</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Dashboard</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<ShoppingCart className="h-5 w-5" />
<span className="sr-only">Orders</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Orders</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Package className="h-5 w-5" />
<span className="sr-only">Products</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Products</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Users2 className="h-5 w-5" />
<span className="sr-only">Customers</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Customers</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<LineChart className="h-5 w-5" />
<span className="sr-only">Analytics</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Analytics</TooltipContent>
</Tooltip>
</nav>
<nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Settings className="h-5 w-5" />
<span className="sr-only">Settings</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Settings</TooltipContent>
</Tooltip>
</nav>
</aside>
<div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
<header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
<Sheet>
<SheetTrigger asChild>
<Button size="icon" variant="outline" className="sm:hidden">
<PanelLeft className="h-5 w-5" />
<span className="sr-only">Toggle Menu</span>
</Button>
</SheetTrigger>
<SheetContent side="left" className="sm:max-w-xs">
<nav className="grid gap-6 text-lg font-medium">
<Link
href="#"
className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
>
<Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
<span className="sr-only">Acme Inc</span>
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<Home className="h-5 w-5" />
Dashboard
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-foreground"
>
<ShoppingCart className="h-5 w-5" />
Orders
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<Package className="h-5 w-5" />
Products
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<Users2 className="h-5 w-5" />
Customers
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<LineChart className="h-5 w-5" />
Settings
</Link>
</nav>
</SheetContent>
</Sheet>
<Breadcrumb className="hidden md:flex">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="#">Dashboard</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="#">Orders</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Recent Orders</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<div className="relative ml-auto flex-1 md:grow-0">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Search..."
className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
/>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="icon"
className="overflow-hidden rounded-full"
>
<Image
src="/placeholder-user.jpg"
width={36}
height={36}
alt="Avatar"
className="overflow-hidden rounded-full"
loading="lazy"
/>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</header>
<main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
<div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
<Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
<CardHeader className="pb-3">
<CardTitle>Your Orders</CardTitle>
<CardDescription className="max-w-lg text-balance leading-relaxed">
Introducing Our Dynamic Orders Dashboard for Seamless
Management and Insightful Analysis.
</CardDescription>
</CardHeader>
<CardFooter>
<Button>Create New Order</Button>
</CardFooter>
</Card>
<Card x-chunk="dashboard-05-chunk-1">
<CardHeader className="pb-2">
<CardDescription>This Week</CardDescription>
<CardTitle className="text-4xl">$1,329</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xs text-muted-foreground">
+25% from last week
</div>
</CardContent>
<CardFooter>
<Progress value={25} aria-label="25% increase" />
</CardFooter>
</Card>
<Card x-chunk="dashboard-05-chunk-2">
<CardHeader className="pb-2">
<CardDescription>This Month</CardDescription>
<CardTitle className="text-4xl">$5,329</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xs text-muted-foreground">
+10% from last month
</div>
</CardContent>
<CardFooter>
<Progress value={12} aria-label="12% increase" />
</CardFooter>
</Card>
</div>
<Tabs defaultValue="week">
<div className="flex items-center">
<TabsList>
<TabsTrigger value="week">Week</TabsTrigger>
<TabsTrigger value="month">Month</TabsTrigger>
<TabsTrigger value="year">Year</TabsTrigger>
</TabsList>
<div className="ml-auto flex items-center gap-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="sm"
className="h-7 gap-1 text-sm"
>
<ListFilter className="h-3.5 w-3.5" />
<span className="sr-only sm:not-sr-only">Filter</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Filter by</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem checked>
Fulfilled
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem>
Declined
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem>
Refunded
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
<Button
size="sm"
variant="outline"
className="h-7 gap-1 text-sm"
>
<File className="h-3.5 w-3.5" />
<span className="sr-only sm:not-sr-only">Export</span>
</Button>
</div>
</div>
<TabsContent value="week">
<Card x-chunk="dashboard-05-chunk-3">
<CardHeader className="px-7">
<CardTitle>Orders</CardTitle>
<CardDescription>
Recent orders from your store.
</CardDescription>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Customer</TableHead>
<TableHead className="hidden sm:table-cell">
Type
</TableHead>
<TableHead className="hidden sm:table-cell">
Status
</TableHead>
<TableHead className="hidden md:table-cell">
Date
</TableHead>
<TableHead className="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow className="bg-accent">
<TableCell>
<div className="font-medium">Liam Johnson</div>
<div className="hidden text-sm text-muted-foreground md:inline">
liam@example.com
</div>
</TableCell>
<TableCell className="hidden sm:table-cell">
Sale
</TableCell>
<TableCell className="hidden sm:table-cell">
<Badge className="text-xs" variant="secondary">
Fulfilled
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
2023-06-23
</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Olivia Smith</div>
<div className="hidden text-sm text-muted-foreground md:inline">
olivia@example.com
</div>
</TableCell>
<TableCell className="hidden sm:table-cell">
Refund
</TableCell>
<TableCell className="hidden sm:table-cell">
<Badge className="text-xs" variant="outline">
Declined
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
2023-06-24
</TableCell>
<TableCell className="text-right">$150.00</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Noah Williams</div>
<div className="hidden text-sm text-muted-foreground md:inline">
noah@example.com
</div>
</TableCell>
<TableCell className="hidden sm:table-cell">
Subscription
</TableCell>
<TableCell className="hidden sm:table-cell">
<Badge className="text-xs" variant="secondary">
Fulfilled
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
2023-06-25
</TableCell>
<TableCell className="text-right">$350.00</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Emma Brown</div>
<div className="hidden text-sm text-muted-foreground md:inline">
emma@example.com
</div>
</TableCell>
<TableCell className="hidden sm:table-cell">
Sale
</TableCell>
<TableCell className="hidden sm:table-cell">
<Badge className="text-xs" variant="secondary">
Fulfilled
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
2023-06-26
</TableCell>
<TableCell className="text-right">$450.00</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Liam Johnson</div>
<div className="hidden text-sm text-muted-foreground md:inline">
liam@example.com
</div>
</TableCell>
<TableCell className="hidden sm:table-cell">
Sale
</TableCell>
<TableCell className="hidden sm:table-cell">
<Badge className="text-xs" variant="secondary">
Fulfilled
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
2023-06-23
</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Liam Johnson</div>
<div className="hidden text-sm text-muted-foreground md:inline">
liam@example.com
</div>
</TableCell>
<TableCell className="hidden sm:table-cell">
Sale
</TableCell>
<TableCell className="hidden sm:table-cell">
<Badge className="text-xs" variant="secondary">
Fulfilled
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
2023-06-23
</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Olivia Smith</div>
<div className="hidden text-sm text-muted-foreground md:inline">
olivia@example.com
</div>
</TableCell>
<TableCell className="hidden sm:table-cell">
Refund
</TableCell>
<TableCell className="hidden sm:table-cell">
<Badge className="text-xs" variant="outline">
Declined
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
2023-06-24
</TableCell>
<TableCell className="text-right">$150.00</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Emma Brown</div>
<div className="hidden text-sm text-muted-foreground md:inline">
emma@example.com
</div>
</TableCell>
<TableCell className="hidden sm:table-cell">
Sale
</TableCell>
<TableCell className="hidden sm:table-cell">
<Badge className="text-xs" variant="secondary">
Fulfilled
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
2023-06-26
</TableCell>
<TableCell className="text-right">$450.00</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
<div>
<Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
<CardHeader className="flex flex-row items-start bg-muted/50">
<div className="grid gap-0.5">
<CardTitle className="group flex items-center gap-2 text-lg">
Order Oe31b70H
<Button
size="icon"
variant="outline"
className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
>
<Copy className="h-3 w-3" />
<span className="sr-only">Copy Order ID</span>
</Button>
</CardTitle>
<CardDescription>Date: November 23, 2023</CardDescription>
</div>
<div className="ml-auto flex items-center gap-1">
<Button size="sm" variant="outline" className="h-8 gap-1">
<Truck className="h-3.5 w-3.5" />
<span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
Track Order
</span>
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="icon" variant="outline" className="h-8 w-8">
<MoreVertical className="h-3.5 w-3.5" />
<span className="sr-only">More</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Export</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Trash</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</CardHeader>
<CardContent className="p-6 text-sm">
<div className="grid gap-3">
<div className="font-semibold">Order Details</div>
<ul className="grid gap-3">
<li className="flex items-center justify-between">
<span className="text-muted-foreground">
Glimmer Lamps x <span>2</span>
</span>
<span>$250.00</span>
</li>
<li className="flex items-center justify-between">
<span className="text-muted-foreground">
Aqua Filters x <span>1</span>
</span>
<span>$49.00</span>
</li>
</ul>
<Separator className="my-2" />
<ul className="grid gap-3">
<li className="flex items-center justify-between">
<span className="text-muted-foreground">Subtotal</span>
<span>$299.00</span>
</li>
<li className="flex items-center justify-between">
<span className="text-muted-foreground">Shipping</span>
<span>$5.00</span>
</li>
<li className="flex items-center justify-between">
<span className="text-muted-foreground">Tax</span>
<span>$25.00</span>
</li>
<li className="flex items-center justify-between font-semibold">
<span className="text-muted-foreground">Total</span>
<span>$329.00</span>
</li>
</ul>
</div>
<Separator className="my-4" />
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-3">
<div className="font-semibold">Shipping Information</div>
<address className="grid gap-0.5 not-italic text-muted-foreground">
<span>Liam Johnson</span>
<span>1234 Main St.</span>
<span>Anytown, CA 12345</span>
</address>
</div>
<div className="grid auto-rows-max gap-3">
<div className="font-semibold">Billing Information</div>
<div className="text-muted-foreground">
Same as shipping address
</div>
</div>
</div>
<Separator className="my-4" />
<div className="grid gap-3">
<div className="font-semibold">Customer Information</div>
<dl className="grid gap-3">
<div className="flex items-center justify-between">
<dt className="text-muted-foreground">Customer</dt>
<dd>Liam Johnson</dd>
</div>
<div className="flex items-center justify-between">
<dt className="text-muted-foreground">Email</dt>
<dd>
<a href="mailto:">liam@acme.com</a>
</dd>
</div>
<div className="flex items-center justify-between">
<dt className="text-muted-foreground">Phone</dt>
<dd>
<a href="tel:">+1 234 567 890</a>
</dd>
</div>
</dl>
</div>
<Separator className="my-4" />
<div className="grid gap-3">
<div className="font-semibold">Payment Information</div>
<dl className="grid gap-3">
<div className="flex items-center justify-between">
<dt className="flex items-center gap-1 text-muted-foreground">
<CreditCard className="h-4 w-4" />
Visa
</dt>
<dd>**** **** **** 4532</dd>
</div>
</dl>
</div>
</CardContent>
<CardFooter className="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
<div className="text-xs text-muted-foreground">
Updated <time dateTime="2023-11-23">November 23, 2023</time>
</div>
<Pagination className="ml-auto mr-0 w-auto">
<PaginationContent>
<PaginationItem>
<Button size="icon" variant="outline" className="h-6 w-6">
<ChevronLeft className="h-3.5 w-3.5" />
<span className="sr-only">Previous Order</span>
</Button>
</PaginationItem>
<PaginationItem>
<Button size="icon" variant="outline" className="h-6 w-6">
<ChevronRight className="h-3.5 w-3.5" />
<span className="sr-only">Next Order</span>
</Button>
</PaginationItem>
</PaginationContent>
</Pagination>
</CardFooter>
</Card>
</div>
</main>
</div>
</div>
)
}
dashboard-05
Files
import Image from "next/image"
import Link from "next/link"
import {
File,
Home,
LineChart,
ListFilter,
MoreHorizontal,
Package,
Package2,
PanelLeft,
PlusCircle,
Search,
Settings,
ShoppingCart,
Users2,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
export const description =
"An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions."
export const iframeHeight = "938px"
export const containerClassName = "w-full h-full"
export function Dashboard() {
return (
<div className="flex min-h-screen w-full flex-col bg-muted/40">
<aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
<nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
<Link
href="#"
className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
>
<Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
<span className="sr-only">Acme Inc</span>
</Link>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Home className="h-5 w-5" />
<span className="sr-only">Dashboard</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Dashboard</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<ShoppingCart className="h-5 w-5" />
<span className="sr-only">Orders</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Orders</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Package className="h-5 w-5" />
<span className="sr-only">Products</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Products</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Users2 className="h-5 w-5" />
<span className="sr-only">Customers</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Customers</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<LineChart className="h-5 w-5" />
<span className="sr-only">Analytics</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Analytics</TooltipContent>
</Tooltip>
</nav>
<nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Settings className="h-5 w-5" />
<span className="sr-only">Settings</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Settings</TooltipContent>
</Tooltip>
</nav>
</aside>
<div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
<header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
<Sheet>
<SheetTrigger asChild>
<Button size="icon" variant="outline" className="sm:hidden">
<PanelLeft className="h-5 w-5" />
<span className="sr-only">Toggle Menu</span>
</Button>
</SheetTrigger>
<SheetContent side="left" className="sm:max-w-xs">
<nav className="grid gap-6 text-lg font-medium">
<Link
href="#"
className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
>
<Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
<span className="sr-only">Acme Inc</span>
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<Home className="h-5 w-5" />
Dashboard
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<ShoppingCart className="h-5 w-5" />
Orders
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-foreground"
>
<Package className="h-5 w-5" />
Products
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<Users2 className="h-5 w-5" />
Customers
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<LineChart className="h-5 w-5" />
Settings
</Link>
</nav>
</SheetContent>
</Sheet>
<Breadcrumb className="hidden md:flex">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="#">Dashboard</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="#">Products</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>All Products</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<div className="relative ml-auto flex-1 md:grow-0">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Search..."
className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
/>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="icon"
className="overflow-hidden rounded-full"
>
<Image
src="/placeholder-user.jpg"
width={36}
height={36}
alt="Avatar"
className="overflow-hidden rounded-full"
loading="lazy"
/>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</header>
<main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
<Tabs defaultValue="all">
<div className="flex items-center">
<TabsList>
<TabsTrigger value="all">All</TabsTrigger>
<TabsTrigger value="active">Active</TabsTrigger>
<TabsTrigger value="draft">Draft</TabsTrigger>
<TabsTrigger value="archived" className="hidden sm:flex">
Archived
</TabsTrigger>
</TabsList>
<div className="ml-auto flex items-center gap-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="h-8 gap-1">
<ListFilter className="h-3.5 w-3.5" />
<span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
Filter
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Filter by</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem checked>
Active
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem>
Archived
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
<Button size="sm" variant="outline" className="h-8 gap-1">
<File className="h-3.5 w-3.5" />
<span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
Export
</span>
</Button>
<Button size="sm" className="h-8 gap-1">
<PlusCircle className="h-3.5 w-3.5" />
<span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
Add Product
</span>
</Button>
</div>
</div>
<TabsContent value="all">
<Card x-chunk="dashboard-06-chunk-0">
<CardHeader>
<CardTitle>Products</CardTitle>
<CardDescription>
Manage your products and view their sales performance.
</CardDescription>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead className="hidden w-[100px] sm:table-cell">
<span className="sr-only">Image</span>
</TableHead>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead className="hidden md:table-cell">
Price
</TableHead>
<TableHead className="hidden md:table-cell">
Total Sales
</TableHead>
<TableHead className="hidden md:table-cell">
Created at
</TableHead>
<TableHead>
<span className="sr-only">Actions</span>
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="hidden sm:table-cell">
<Image
alt="Product image"
className="aspect-square rounded-md object-cover"
height="64"
src="/placeholder.svg"
width="64"
loading="lazy"
/>
</TableCell>
<TableCell className="font-medium">
Laser Lemonade Machine
</TableCell>
<TableCell>
<Badge variant="outline">Draft</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
$499.99
</TableCell>
<TableCell className="hidden md:table-cell">
25
</TableCell>
<TableCell className="hidden md:table-cell">
2023-07-12 10:42 AM
</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
aria-haspopup="true"
size="icon"
variant="ghost"
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Toggle menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
<TableRow>
<TableCell className="hidden sm:table-cell">
<Image
alt="Product image"
className="aspect-square rounded-md object-cover"
height="64"
src="/placeholder.svg"
width="64"
loading="lazy"
/>
</TableCell>
<TableCell className="font-medium">
Hypernova Headphones
</TableCell>
<TableCell>
<Badge variant="outline">Active</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
$129.99
</TableCell>
<TableCell className="hidden md:table-cell">
100
</TableCell>
<TableCell className="hidden md:table-cell">
2023-10-18 03:21 PM
</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
aria-haspopup="true"
size="icon"
variant="ghost"
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Toggle menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
<TableRow>
<TableCell className="hidden sm:table-cell">
<Image
alt="Product image"
className="aspect-square rounded-md object-cover"
height="64"
src="/placeholder.svg"
width="64"
loading="lazy"
/>
</TableCell>
<TableCell className="font-medium">
AeroGlow Desk Lamp
</TableCell>
<TableCell>
<Badge variant="outline">Active</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
$39.99
</TableCell>
<TableCell className="hidden md:table-cell">
50
</TableCell>
<TableCell className="hidden md:table-cell">
2023-11-29 08:15 AM
</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
aria-haspopup="true"
size="icon"
variant="ghost"
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Toggle menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
<TableRow>
<TableCell className="hidden sm:table-cell">
<Image
alt="Product image"
className="aspect-square rounded-md object-cover"
height="64"
src="/placeholder.svg"
width="64"
loading="lazy"
/>
</TableCell>
<TableCell className="font-medium">
TechTonic Energy Drink
</TableCell>
<TableCell>
<Badge variant="secondary">Draft</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
$2.99
</TableCell>
<TableCell className="hidden md:table-cell">
0
</TableCell>
<TableCell className="hidden md:table-cell">
2023-12-25 11:59 PM
</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
aria-haspopup="true"
size="icon"
variant="ghost"
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Toggle menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
<TableRow>
<TableCell className="hidden sm:table-cell">
<Image
alt="Product image"
className="aspect-square rounded-md object-cover"
height="64"
src="/placeholder.svg"
width="64"
loading="lazy"
/>
</TableCell>
<TableCell className="font-medium">
Gamer Gear Pro Controller
</TableCell>
<TableCell>
<Badge variant="outline">Active</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
$59.99
</TableCell>
<TableCell className="hidden md:table-cell">
75
</TableCell>
<TableCell className="hidden md:table-cell">
2024-01-01 12:00 AM
</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
aria-haspopup="true"
size="icon"
variant="ghost"
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Toggle menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
<TableRow>
<TableCell className="hidden sm:table-cell">
<Image
alt="Product image"
className="aspect-square rounded-md object-cover"
height="64"
src="/placeholder.svg"
width="64"
loading="lazy"
/>
</TableCell>
<TableCell className="font-medium">
Luminous VR Headset
</TableCell>
<TableCell>
<Badge variant="outline">Active</Badge>
</TableCell>
<TableCell className="hidden md:table-cell">
$199.99
</TableCell>
<TableCell className="hidden md:table-cell">
30
</TableCell>
<TableCell className="hidden md:table-cell">
2024-02-14 02:14 PM
</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
aria-haspopup="true"
size="icon"
variant="ghost"
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Toggle menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
<CardFooter>
<div className="text-xs text-muted-foreground">
Showing <strong>1-10</strong> of <strong>32</strong>{" "}
products
</div>
</CardFooter>
</Card>
</TabsContent>
</Tabs>
</main>
</div>
</div>
)
}
dashboard-06
Files
import Image from "next/image"
import Link from "next/link"
import {
ChevronLeft,
Home,
LineChart,
Package,
Package2,
PanelLeft,
PlusCircle,
Search,
Settings,
ShoppingCart,
Upload,
Users2,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import { Textarea } from "@/components/ui/textarea"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
export const description =
"A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images."
export const iframeHeight = "1200px"
export const containerClassName = "w-full h-full"
export function Dashboard() {
return (
<div className="flex min-h-screen w-full flex-col bg-muted/40">
<aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
<nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
<Link
href="#"
className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
>
<Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
<span className="sr-only">Acme Inc</span>
</Link>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Home className="h-5 w-5" />
<span className="sr-only">Dashboard</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Dashboard</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<ShoppingCart className="h-5 w-5" />
<span className="sr-only">Orders</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Orders</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Package className="h-5 w-5" />
<span className="sr-only">Products</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Products</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Users2 className="h-5 w-5" />
<span className="sr-only">Customers</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Customers</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<LineChart className="h-5 w-5" />
<span className="sr-only">Analytics</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Analytics</TooltipContent>
</Tooltip>
</nav>
<nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
<Tooltip>
<TooltipTrigger asChild>
<Link
href="#"
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
>
<Settings className="h-5 w-5" />
<span className="sr-only">Settings</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">Settings</TooltipContent>
</Tooltip>
</nav>
</aside>
<div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
<header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
<Sheet>
<SheetTrigger asChild>
<Button size="icon" variant="outline" className="sm:hidden">
<PanelLeft className="h-5 w-5" />
<span className="sr-only">Toggle Menu</span>
</Button>
</SheetTrigger>
<SheetContent side="left" className="sm:max-w-xs">
<nav className="grid gap-6 text-lg font-medium">
<Link
href="#"
className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
>
<Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
<span className="sr-only">Acme Inc</span>
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<Home className="h-5 w-5" />
Dashboard
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<ShoppingCart className="h-5 w-5" />
Orders
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-foreground"
>
<Package className="h-5 w-5" />
Products
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<Users2 className="h-5 w-5" />
Customers
</Link>
<Link
href="#"
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
>
<LineChart className="h-5 w-5" />
Settings
</Link>
</nav>
</SheetContent>
</Sheet>
<Breadcrumb className="hidden md:flex">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="#">Dashboard</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="#">Products</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Edit Product</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<div className="relative ml-auto flex-1 md:grow-0">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Search..."
className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
/>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="icon"
className="overflow-hidden rounded-full"
>
<Image
src="/placeholder-user.jpg"
width={36}
height={36}
loading="lazy"
alt="Avatar"
className="overflow-hidden rounded-full"
/>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</header>
<main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
<div className="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
<div className="flex items-center gap-4">
<Button variant="outline" size="icon" className="h-7 w-7">
<ChevronLeft className="h-4 w-4" />
<span className="sr-only">Back</span>
</Button>
<h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
Pro Controller
</h1>
<Badge variant="outline" className="ml-auto sm:ml-0">
In stock
</Badge>
<div className="hidden items-center gap-2 md:ml-auto md:flex">
<Button variant="outline" size="sm">
Discard
</Button>
<Button size="sm">Save Product</Button>
</div>
</div>
<div className="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
<div className="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
<Card x-chunk="dashboard-07-chunk-0">
<CardHeader>
<CardTitle>Product Details</CardTitle>
<CardDescription>
Lipsum dolor sit amet, consectetur adipiscing elit
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-6">
<div className="grid gap-3">
<Label htmlFor="name">Name</Label>
<Input
id="name"
type="text"
className="w-full"
defaultValue="Gamer Gear Pro Controller"
/>
</div>
<div className="grid gap-3">
<Label htmlFor="description">Description</Label>
<Textarea
id="description"
defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
className="min-h-32"
/>
</div>
</div>
</CardContent>
</Card>
<Card x-chunk="dashboard-07-chunk-1">
<CardHeader>
<CardTitle>Stock</CardTitle>
<CardDescription>
Lipsum dolor sit amet, consectetur adipiscing elit
</CardDescription>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">SKU</TableHead>
<TableHead>Stock</TableHead>
<TableHead>Price</TableHead>
<TableHead className="w-[100px]">Size</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-semibold">
GGPC-001
</TableCell>
<TableCell>
<Label htmlFor="stock-1" className="sr-only">
Stock
</Label>
<Input
id="stock-1"
type="number"
defaultValue="100"
/>
</TableCell>
<TableCell>
<Label htmlFor="price-1" className="sr-only">
Price
</Label>
<Input
id="price-1"
type="number"
defaultValue="99.99"
/>
</TableCell>
<TableCell>
<ToggleGroup
type="single"
defaultValue="s"
variant="outline"
>
<ToggleGroupItem value="s">S</ToggleGroupItem>
<ToggleGroupItem value="m">M</ToggleGroupItem>
<ToggleGroupItem value="l">L</ToggleGroupItem>
</ToggleGroup>
</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-semibold">
GGPC-002
</TableCell>
<TableCell>
<Label htmlFor="stock-2" className="sr-only">
Stock
</Label>
<Input
id="stock-2"
type="number"
defaultValue="143"
/>
</TableCell>
<TableCell>
<Label htmlFor="price-2" className="sr-only">
Price
</Label>
<Input
id="price-2"
type="number"
defaultValue="99.99"
/>
</TableCell>
<TableCell>
<ToggleGroup
type="single"
defaultValue="m"
variant="outline"
>
<ToggleGroupItem value="s">S</ToggleGroupItem>
<ToggleGroupItem value="m">M</ToggleGroupItem>
<ToggleGroupItem value="l">L</ToggleGroupItem>
</ToggleGroup>
</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-semibold">
GGPC-003
</TableCell>
<TableCell>
<Label htmlFor="stock-3" className="sr-only">
Stock
</Label>
<Input
id="stock-3"
type="number"
defaultValue="32"
/>
</TableCell>
<TableCell>
<Label htmlFor="price-3" className="sr-only">
Stock
</Label>
<Input
id="price-3"
type="number"
defaultValue="99.99"
/>
</TableCell>
<TableCell>
<ToggleGroup
type="single"
defaultValue="s"
variant="outline"
>
<ToggleGroupItem value="s">S</ToggleGroupItem>
<ToggleGroupItem value="m">M</ToggleGroupItem>
<ToggleGroupItem value="l">L</ToggleGroupItem>
</ToggleGroup>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
<CardFooter className="justify-center border-t p-4">
<Button size="sm" variant="ghost" className="gap-1">
<PlusCircle className="h-3.5 w-3.5" />
Add Variant
</Button>
</CardFooter>
</Card>
<Card x-chunk="dashboard-07-chunk-2">
<CardHeader>
<CardTitle>Product Category</CardTitle>
</CardHeader>
<CardContent>
<div className="grid gap-6 sm:grid-cols-3">
<div className="grid gap-3">
<Label htmlFor="category">Category</Label>
<Select>
<SelectTrigger
id="category"
aria-label="Select category"
>
<SelectValue placeholder="Select category" />
</SelectTrigger>
<SelectContent>
<SelectItem value="clothing">Clothing</SelectItem>
<SelectItem value="electronics">
Electronics
</SelectItem>
<SelectItem value="accessories">
Accessories
</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid gap-3">
<Label htmlFor="subcategory">
Subcategory (optional)
</Label>
<Select>
<SelectTrigger
id="subcategory"
aria-label="Select subcategory"
>
<SelectValue placeholder="Select subcategory" />
</SelectTrigger>
<SelectContent>
<SelectItem value="t-shirts">T-Shirts</SelectItem>
<SelectItem value="hoodies">Hoodies</SelectItem>
<SelectItem value="sweatshirts">
Sweatshirts
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</CardContent>
</Card>
</div>
<div className="grid auto-rows-max items-start gap-4 lg:gap-8">
<Card x-chunk="dashboard-07-chunk-3">
<CardHeader>
<CardTitle>Product Status</CardTitle>
</CardHeader>
<CardContent>
<div className="grid gap-6">
<div className="grid gap-3">
<Label htmlFor="status">Status</Label>
<Select>
<SelectTrigger id="status" aria-label="Select status">
<SelectValue placeholder="Select status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="draft">Draft</SelectItem>
<SelectItem value="published">Active</SelectItem>
<SelectItem value="archived">Archived</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</CardContent>
</Card>
<Card
className="overflow-hidden"
x-chunk="dashboard-07-chunk-4"
>
<CardHeader>
<CardTitle>Product Images</CardTitle>
<CardDescription>
Lipsum dolor sit amet, consectetur adipiscing elit
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-2">
<Image
alt="Product image"
className="aspect-square w-full rounded-md object-cover"
height="300"
src="/placeholder.svg"
width="300"
loading="lazy"
/>
<div className="grid grid-cols-3 gap-2">
<button>
<Image
alt="Product thumbnail image"
className="aspect-square w-full rounded-md object-cover"
height="84"
src="/placeholder.svg"
width="84"
loading="lazy"
/>
</button>
<button>
<Image
alt="Product thumbnail image"
className="aspect-square w-full rounded-md object-cover"
height="84"
src="/placeholder.svg"
width="84"
loading="lazy"
/>
</button>
<button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
<Upload className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">Upload</span>
</button>
</div>
</div>
</CardContent>
</Card>
<Card x-chunk="dashboard-07-chunk-5">
<CardHeader>
<CardTitle>Archive Product</CardTitle>
<CardDescription>
Lipsum dolor sit amet, consectetur adipiscing elit.
</CardDescription>
</CardHeader>
<CardContent>
<div></div>
<Button size="sm" variant="secondary">
Archive Product
</Button>
</CardContent>
</Card>
</div>
</div>
<div className="flex items-center justify-center gap-2 md:hidden">
<Button variant="outline" size="sm">
Discard
</Button>
<Button size="sm">Save Product</Button>
</div>
</div>
</main>
</div>
</div>
)
}
dashboard-07
Files
import Link from "next/link"
import { CircleUser, Menu, Package2, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
export const description =
"A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings."
export const iframeHeight = "780px"
export const containerClassName = "w-full h-full"
export function Dashboard() {
return (
<div className="flex min-h-screen w-full flex-col">
<header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
<nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
<Link
href="#"
className="flex items-center gap-2 text-lg font-semibold md:text-base"
>
<Package2 className="h-6 w-6" />
<span className="sr-only">Acme Inc</span>
</Link>
<Link
href="#"
className="text-muted-foreground transition-colors hover:text-foreground"
>
Dashboard
</Link>
<Link
href="#"
className="text-muted-foreground transition-colors hover:text-foreground"
>
Orders
</Link>
<Link
href="#"
className="text-muted-foreground transition-colors hover:text-foreground"
>
Products
</Link>
<Link
href="#"
className="text-muted-foreground transition-colors hover:text-foreground"
>
Customers
</Link>
<Link
href="#"
className="text-foreground transition-colors hover:text-foreground"
>
Settings
</Link>
</nav>
<Sheet>
<SheetTrigger asChild>
<Button
variant="outline"
size="icon"
className="shrink-0 md:hidden"
>
<Menu className="h-5 w-5" />
<span className="sr-only">Toggle navigation menu</span>
</Button>
</SheetTrigger>
<SheetContent side="left">
<nav className="grid gap-6 text-lg font-medium">
<Link
href="#"
className="flex items-center gap-2 text-lg font-semibold"
>
<Package2 className="h-6 w-6" />
<span className="sr-only">Acme Inc</span>
</Link>
<Link
href="#"
className="text-muted-foreground hover:text-foreground"
>
Dashboard
</Link>
<Link
href="#"
className="text-muted-foreground hover:text-foreground"
>
Orders
</Link>
<Link
href="#"
className="text-muted-foreground hover:text-foreground"
>
Products
</Link>
<Link
href="#"
className="text-muted-foreground hover:text-foreground"
>
Customers
</Link>
<Link href="#" className="hover:text-foreground">
Settings
</Link>
</nav>
</SheetContent>
</Sheet>
<div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
<form className="ml-auto flex-1 sm:flex-initial">
<div className="relative">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Search products..."
className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
/>
</div>
</form>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="secondary" size="icon" className="rounded-full">
<CircleUser className="h-5 w-5" />
<span className="sr-only">Toggle user menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
<main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
<div className="mx-auto grid w-full max-w-6xl gap-2">
<h1 className="text-3xl font-semibold">Settings</h1>
</div>
<div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
<nav
className="grid gap-4 text-sm text-muted-foreground"
x-chunk="dashboard-04-chunk-0"
>
<Link href="#" className="font-semibold text-primary">
General
</Link>
<Link href="#">Security</Link>
<Link href="#">Integrations</Link>
<Link href="#">Support</Link>
<Link href="#">Organizations</Link>
<Link href="#">Advanced</Link>
</nav>
<div className="grid gap-6">
<Card x-chunk="dashboard-04-chunk-1">
<CardHeader>
<CardTitle>Store Name</CardTitle>
<CardDescription>
Used to identify your store in the marketplace.
</CardDescription>
</CardHeader>
<CardContent>
<form>
<Input placeholder="Store Name" />
</form>
</CardContent>
<CardFooter className="border-t px-6 py-4">
<Button>Save</Button>
</CardFooter>
</Card>
<Card x-chunk="dashboard-04-chunk-2">
<CardHeader>
<CardTitle>Plugins Directory</CardTitle>
<CardDescription>
The directory within your project, in which your plugins are
located.
</CardDescription>
</CardHeader>
<CardContent>
<form className="flex flex-col gap-4">
<Input
placeholder="Project Name"
defaultValue="/content/plugins"
/>
<div className="flex items-center space-x-2">
<Checkbox id="include" defaultChecked />
<label
htmlFor="include"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Allow administrators to change the directory.
</label>
</div>
</form>
</CardContent>
<CardFooter className="border-t px-6 py-4">
<Button>Save</Button>
</CardFooter>
</Card>
</div>
</div>
</main>
</div>
)
}
dashboard-04
Files
import {
Bird,
Book,
Bot,
Code2,
CornerDownLeft,
LifeBuoy,
Mic,
Paperclip,
Rabbit,
Settings,
Settings2,
Share,
SquareTerminal,
SquareUser,
Triangle,
Turtle,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerContent,
DrawerDescription,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
export const description =
"An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages."
export const iframeHeight = "740px"
export const containerClassName = "w-full h-full"
export function Dashboard() {
return (
<div className="grid h-screen w-full pl-[56px]">
<aside className="inset-y fixed left-0 z-20 flex h-full flex-col border-r">
<div className="border-b p-2">
<Button variant="outline" size="icon" aria-label="Home">
<Triangle className="size-5 fill-foreground" />
</Button>
</div>
<nav className="grid gap-1 p-2">
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="rounded-lg bg-muted"
aria-label="Playground"
>
<SquareTerminal className="size-5" />
</Button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={5}>
Playground
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="rounded-lg"
aria-label="Models"
>
<Bot className="size-5" />
</Button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={5}>
Models
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="rounded-lg"
aria-label="API"
>
<Code2 className="size-5" />
</Button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={5}>
API
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="rounded-lg"
aria-label="Documentation"
>
<Book className="size-5" />
</Button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={5}>
Documentation
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="rounded-lg"
aria-label="Settings"
>
<Settings2 className="size-5" />
</Button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={5}>
Settings
</TooltipContent>
</Tooltip>
</nav>
<nav className="mt-auto grid gap-1 p-2">
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="mt-auto rounded-lg"
aria-label="Help"
>
<LifeBuoy className="size-5" />
</Button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={5}>
Help
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="mt-auto rounded-lg"
aria-label="Account"
>
<SquareUser className="size-5" />
</Button>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={5}>
Account
</TooltipContent>
</Tooltip>
</nav>
</aside>
<div className="flex flex-col">
<header className="sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4">
<h1 className="text-xl font-semibold">Playground</h1>
<Drawer>
<DrawerTrigger asChild>
<Button variant="ghost" size="icon" className="md:hidden">
<Settings className="size-4" />
<span className="sr-only">Settings</span>
</Button>
</DrawerTrigger>
<DrawerContent className="max-h-[80vh]">
<DrawerHeader>
<DrawerTitle>Configuration</DrawerTitle>
<DrawerDescription>
Configure the settings for the model and messages.
</DrawerDescription>
</DrawerHeader>
<form className="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
<fieldset className="grid gap-6 rounded-lg border p-4">
<legend className="-ml-1 px-1 text-sm font-medium">
Settings
</legend>
<div className="grid gap-3">
<Label htmlFor="model">Model</Label>
<Select>
<SelectTrigger
id="model"
className="items-start [&_[data-description]]:hidden"
>
<SelectValue placeholder="Select a model" />
</SelectTrigger>
<SelectContent>
<SelectItem value="genesis">
<div className="flex items-start gap-3 text-muted-foreground">
<Rabbit className="size-5" />
<div className="grid gap-0.5">
<p>
Neural{" "}
<span className="font-medium text-foreground">
Genesis
</span>
</p>
<p className="text-xs" data-description>
Our fastest model for general use cases.
</p>
</div>
</div>
</SelectItem>
<SelectItem value="explorer">
<div className="flex items-start gap-3 text-muted-foreground">
<Bird className="size-5" />
<div className="grid gap-0.5">
<p>
Neural{" "}
<span className="font-medium text-foreground">
Explorer
</span>
</p>
<p className="text-xs" data-description>
Performance and speed for efficiency.
</p>
</div>
</div>
</SelectItem>
<SelectItem value="quantum">
<div className="flex items-start gap-3 text-muted-foreground">
<Turtle className="size-5" />
<div className="grid gap-0.5">
<p>
Neural{" "}
<span className="font-medium text-foreground">
Quantum
</span>
</p>
<p className="text-xs" data-description>
The most powerful model for complex
computations.
</p>
</div>
</div>
</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid gap-3">
<Label htmlFor="temperature">Temperature</Label>
<Input id="temperature" type="number" placeholder="0.4" />
</div>
<div className="grid gap-3">
<Label htmlFor="top-p">Top P</Label>
<Input id="top-p" type="number" placeholder="0.7" />
</div>
<div className="grid gap-3">
<Label htmlFor="top-k">Top K</Label>
<Input id="top-k" type="number" placeholder="0.0" />
</div>
</fieldset>
<fieldset className="grid gap-6 rounded-lg border p-4">
<legend className="-ml-1 px-1 text-sm font-medium">
Messages
</legend>
<div className="grid gap-3">
<Label htmlFor="role">Role</Label>
<Select defaultValue="system">
<SelectTrigger>
<SelectValue placeholder="Select a role" />
</SelectTrigger>
<SelectContent>
<SelectItem value="system">System</SelectItem>
<SelectItem value="user">User</SelectItem>
<SelectItem value="assistant">Assistant</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid gap-3">
<Label htmlFor="content">Content</Label>
<Textarea id="content" placeholder="You are a..." />
</div>
</fieldset>
</form>
</DrawerContent>
</Drawer>
<Button
variant="outline"
size="sm"
className="ml-auto gap-1.5 text-sm"
>
<Share className="size-3.5" />
Share
</Button>
</header>
<main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
<div
className="relative hidden flex-col items-start gap-8 md:flex"
x-chunk="dashboard-03-chunk-0"
>
<form className="grid w-full items-start gap-6">
<fieldset className="grid gap-6 rounded-lg border p-4">
<legend className="-ml-1 px-1 text-sm font-medium">
Settings
</legend>
<div className="grid gap-3">
<Label htmlFor="model">Model</Label>
<Select>
<SelectTrigger
id="model"
className="items-start [&_[data-description]]:hidden"
>
<SelectValue placeholder="Select a model" />
</SelectTrigger>
<SelectContent>
<SelectItem value="genesis">
<div className="flex items-start gap-3 text-muted-foreground">
<Rabbit className="size-5" />
<div className="grid gap-0.5">
<p>
Neural{" "}
<span className="font-medium text-foreground">
Genesis
</span>
</p>
<p className="text-xs" data-description>
Our fastest model for general use cases.
</p>
</div>
</div>
</SelectItem>
<SelectItem value="explorer">
<div className="flex items-start gap-3 text-muted-foreground">
<Bird className="size-5" />
<div className="grid gap-0.5">
<p>
Neural{" "}
<span className="font-medium text-foreground">
Explorer
</span>
</p>
<p className="text-xs" data-description>
Performance and speed for efficiency.
</p>
</div>
</div>
</SelectItem>
<SelectItem value="quantum">
<div className="flex items-start gap-3 text-muted-foreground">
<Turtle className="size-5" />
<div className="grid gap-0.5">
<p>
Neural{" "}
<span className="font-medium text-foreground">
Quantum
</span>
</p>
<p className="text-xs" data-description>
The most powerful model for complex computations.
</p>
</div>
</div>
</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid gap-3">
<Label htmlFor="temperature">Temperature</Label>
<Input id="temperature" type="number" placeholder="0.4" />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-3">
<Label htmlFor="top-p">Top P</Label>
<Input id="top-p" type="number" placeholder="0.7" />
</div>
<div className="grid gap-3">
<Label htmlFor="top-k">Top K</Label>
<Input id="top-k" type="number" placeholder="0.0" />
</div>
</div>
</fieldset>
<fieldset className="grid gap-6 rounded-lg border p-4">
<legend className="-ml-1 px-1 text-sm font-medium">
Messages
</legend>
<div className="grid gap-3">
<Label htmlFor="role">Role</Label>
<Select defaultValue="system">
<SelectTrigger>
<SelectValue placeholder="Select a role" />
</SelectTrigger>
<SelectContent>
<SelectItem value="system">System</SelectItem>
<SelectItem value="user">User</SelectItem>
<SelectItem value="assistant">Assistant</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid gap-3">
<Label htmlFor="content">Content</Label>
<Textarea
id="content"
placeholder="You are a..."
className="min-h-[9.5rem]"
/>
</div>
</fieldset>
</form>
</div>
<div className="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
<Badge variant="outline" className="absolute right-3 top-3">
Output
</Badge>
<div className="flex-1" />
<form
className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
x-chunk="dashboard-03-chunk-1"
>
<Label htmlFor="message" className="sr-only">
Message
</Label>
<Textarea
id="message"
placeholder="Type your message here..."
className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
/>
<div className="flex items-center p-3 pt-0">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon">
<Paperclip className="size-4" />
<span className="sr-only">Attach file</span>
</Button>
</TooltipTrigger>
<TooltipContent side="top">Attach File</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon">
<Mic className="size-4" />
<span className="sr-only">Use Microphone</span>
</Button>
</TooltipTrigger>
<TooltipContent side="top">Use Microphone</TooltipContent>
</Tooltip>
<Button type="submit" size="sm" className="ml-auto gap-1.5">
Send Message
<CornerDownLeft className="size-3.5" />
</Button>
</div>
</form>
</div>
</main>
</div>
</div>
)
}
dashboard-03
Files
import Link from "next/link"
import {
Bell,
CircleUser,
Home,
LineChart,
Menu,
Package,
Package2,
Search,
ShoppingCart,
Users,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
export const description =
"A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action."
export const iframeHeight = "800px"
export const containerClassName = "w-full h-full"
export function Dashboard() {
return (
<div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
<div className="hidden border-r bg-muted/40 md:block">
<div className="flex h-full max-h-screen flex-col gap-2">
<div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
<Link href="/" className="flex items-center gap-2 font-semibold">
<Package2 className="h-6 w-6" />
<span className="">Acme Inc</span>
</Link>
<Button variant="outline" size="icon" className="ml-auto h-8 w-8">
<Bell className="h-4 w-4" />
<span className="sr-only">Toggle notifications</span>
</Button>
</div>
<div className="flex-1">
<nav className="grid items-start px-2 text-sm font-medium lg:px-4">
<Link
href="#"
className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
>
<Home className="h-4 w-4" />
Dashboard
</Link>
<Link
href="#"
className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
>
<ShoppingCart className="h-4 w-4" />
Orders
<Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
6
</Badge>
</Link>
<Link
href="#"
className="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
>
<Package className="h-4 w-4" />
Products{" "}
</Link>
<Link
href="#"
className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
>
<Users className="h-4 w-4" />
Customers
</Link>
<Link
href="#"
className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
>
<LineChart className="h-4 w-4" />
Analytics
</Link>
</nav>
</div>
<div className="mt-auto p-4">
<Card x-chunk="dashboard-02-chunk-0">
<CardHeader className="p-2 pt-0 md:p-4">
<CardTitle>Upgrade to Pro</CardTitle>
<CardDescription>
Unlock all features and get unlimited access to our support
team.
</CardDescription>
</CardHeader>
<CardContent className="p-2 pt-0 md:p-4 md:pt-0">
<Button size="sm" className="w-full">
Upgrade
</Button>
</CardContent>
</Card>
</div>
</div>
</div>
<div className="flex flex-col">
<header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
<Sheet>
<SheetTrigger asChild>
<Button
variant="outline"
size="icon"
className="shrink-0 md:hidden"
>
<Menu className="h-5 w-5" />
<span className="sr-only">Toggle navigation menu</span>
</Button>
</SheetTrigger>
<SheetContent side="left" className="flex flex-col">
<nav className="grid gap-2 text-lg font-medium">
<Link
href="#"
className="flex items-center gap-2 text-lg font-semibold"
>
<Package2 className="h-6 w-6" />
<span className="sr-only">Acme Inc</span>
</Link>
<Link
href="#"
className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
>
<Home className="h-5 w-5" />
Dashboard
</Link>
<Link
href="#"
className="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
>
<ShoppingCart className="h-5 w-5" />
Orders
<Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
6
</Badge>
</Link>
<Link
href="#"
className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
>
<Package className="h-5 w-5" />
Products
</Link>
<Link
href="#"
className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
>
<Users className="h-5 w-5" />
Customers
</Link>
<Link
href="#"
className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
>
<LineChart className="h-5 w-5" />
Analytics
</Link>
</nav>
<div className="mt-auto">
<Card>
<CardHeader>
<CardTitle>Upgrade to Pro</CardTitle>
<CardDescription>
Unlock all features and get unlimited access to our
support team.
</CardDescription>
</CardHeader>
<CardContent>
<Button size="sm" className="w-full">
Upgrade
</Button>
</CardContent>
</Card>
</div>
</SheetContent>
</Sheet>
<div className="w-full flex-1">
<form>
<div className="relative">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Search products..."
className="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
/>
</div>
</form>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="secondary" size="icon" className="rounded-full">
<CircleUser className="h-5 w-5" />
<span className="sr-only">Toggle user menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</header>
<main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
<div className="flex items-center">
<h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
</div>
<div
className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
x-chunk="dashboard-02-chunk-1"
>
<div className="flex flex-col items-center gap-1 text-center">
<h3 className="text-2xl font-bold tracking-tight">
You have no products
</h3>
<p className="text-sm text-muted-foreground">
You can start selling as soon as you add a product.
</p>
<Button className="mt-4">Add Product</Button>
</div>
</div>
</main>
</div>
</div>
)
}
dashboard-02
Files
import Link from "next/link"
import {
Activity,
ArrowUpRight,
CircleUser,
CreditCard,
DollarSign,
Menu,
Package2,
Search,
Users,
} from "lucide-react"
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
export const description =
"An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image."
export const iframeHeight = "825px"
export const containerClassName = "w-full h-full"
export function Dashboard() {
return (
<div className="flex min-h-screen w-full flex-col">
<header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
<nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
<Link
href="#"
className="flex items-center gap-2 text-lg font-semibold md:text-base"
>
<Package2 className="h-6 w-6" />
<span className="sr-only">Acme Inc</span>
</Link>
<Link
href="#"
className="text-foreground transition-colors hover:text-foreground"
>
Dashboard
</Link>
<Link
href="#"
className="text-muted-foreground transition-colors hover:text-foreground"
>
Orders
</Link>
<Link
href="#"
className="text-muted-foreground transition-colors hover:text-foreground"
>
Products
</Link>
<Link
href="#"
className="text-muted-foreground transition-colors hover:text-foreground"
>
Customers
</Link>
<Link
href="#"
className="text-muted-foreground transition-colors hover:text-foreground"
>
Analytics
</Link>
</nav>
<Sheet>
<SheetTrigger asChild>
<Button
variant="outline"
size="icon"
className="shrink-0 md:hidden"
>
<Menu className="h-5 w-5" />
<span className="sr-only">Toggle navigation menu</span>
</Button>
</SheetTrigger>
<SheetContent side="left">
<nav className="grid gap-6 text-lg font-medium">
<Link
href="#"
className="flex items-center gap-2 text-lg font-semibold"
>
<Package2 className="h-6 w-6" />
<span className="sr-only">Acme Inc</span>
</Link>
<Link href="#" className="hover:text-foreground">
Dashboard
</Link>
<Link
href="#"
className="text-muted-foreground hover:text-foreground"
>
Orders
</Link>
<Link
href="#"
className="text-muted-foreground hover:text-foreground"
>
Products
</Link>
<Link
href="#"
className="text-muted-foreground hover:text-foreground"
>
Customers
</Link>
<Link
href="#"
className="text-muted-foreground hover:text-foreground"
>
Analytics
</Link>
</nav>
</SheetContent>
</Sheet>
<div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
<form className="ml-auto flex-1 sm:flex-initial">
<div className="relative">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Search products..."
className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
/>
</div>
</form>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="secondary" size="icon" className="rounded-full">
<CircleUser className="h-5 w-5" />
<span className="sr-only">Toggle user menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
<main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
<div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
<Card x-chunk="dashboard-01-chunk-0">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
Total Revenue
</CardTitle>
<DollarSign className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">$45,231.89</div>
<p className="text-xs text-muted-foreground">
+20.1% from last month
</p>
</CardContent>
</Card>
<Card x-chunk="dashboard-01-chunk-1">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
Subscriptions
</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">+2350</div>
<p className="text-xs text-muted-foreground">
+180.1% from last month
</p>
</CardContent>
</Card>
<Card x-chunk="dashboard-01-chunk-2">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Sales</CardTitle>
<CreditCard className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">+12,234</div>
<p className="text-xs text-muted-foreground">
+19% from last month
</p>
</CardContent>
</Card>
<Card x-chunk="dashboard-01-chunk-3">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Active Now</CardTitle>
<Activity className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">+573</div>
<p className="text-xs text-muted-foreground">
+201 since last hour
</p>
</CardContent>
</Card>
</div>
<div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
<Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
<CardHeader className="flex flex-row items-center">
<div className="grid gap-2">
<CardTitle>Transactions</CardTitle>
<CardDescription>
Recent transactions from your store.
</CardDescription>
</div>
<Button asChild size="sm" className="ml-auto gap-1">
<Link href="#">
View All
<ArrowUpRight className="h-4 w-4" />
</Link>
</Button>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Customer</TableHead>
<TableHead className="hidden xl:table-column">
Type
</TableHead>
<TableHead className="hidden xl:table-column">
Status
</TableHead>
<TableHead className="hidden xl:table-column">
Date
</TableHead>
<TableHead className="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>
<div className="font-medium">Liam Johnson</div>
<div className="hidden text-sm text-muted-foreground md:inline">
liam@example.com
</div>
</TableCell>
<TableCell className="hidden xl:table-column">
Sale
</TableCell>
<TableCell className="hidden xl:table-column">
<Badge className="text-xs" variant="outline">
Approved
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell lg:hidden xl:table-column">
2023-06-23
</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Olivia Smith</div>
<div className="hidden text-sm text-muted-foreground md:inline">
olivia@example.com
</div>
</TableCell>
<TableCell className="hidden xl:table-column">
Refund
</TableCell>
<TableCell className="hidden xl:table-column">
<Badge className="text-xs" variant="outline">
Declined
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell lg:hidden xl:table-column">
2023-06-24
</TableCell>
<TableCell className="text-right">$150.00</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Noah Williams</div>
<div className="hidden text-sm text-muted-foreground md:inline">
noah@example.com
</div>
</TableCell>
<TableCell className="hidden xl:table-column">
Subscription
</TableCell>
<TableCell className="hidden xl:table-column">
<Badge className="text-xs" variant="outline">
Approved
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell lg:hidden xl:table-column">
2023-06-25
</TableCell>
<TableCell className="text-right">$350.00</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Emma Brown</div>
<div className="hidden text-sm text-muted-foreground md:inline">
emma@example.com
</div>
</TableCell>
<TableCell className="hidden xl:table-column">
Sale
</TableCell>
<TableCell className="hidden xl:table-column">
<Badge className="text-xs" variant="outline">
Approved
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell lg:hidden xl:table-column">
2023-06-26
</TableCell>
<TableCell className="text-right">$450.00</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Liam Johnson</div>
<div className="hidden text-sm text-muted-foreground md:inline">
liam@example.com
</div>
</TableCell>
<TableCell className="hidden xl:table-column">
Sale
</TableCell>
<TableCell className="hidden xl:table-column">
<Badge className="text-xs" variant="outline">
Approved
</Badge>
</TableCell>
<TableCell className="hidden md:table-cell lg:hidden xl:table-column">
2023-06-27
</TableCell>
<TableCell className="text-right">$550.00</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
<Card x-chunk="dashboard-01-chunk-5">
<CardHeader>
<CardTitle>Recent Sales</CardTitle>
</CardHeader>
<CardContent className="grid gap-8">
<div className="flex items-center gap-4">
<Avatar className="hidden h-9 w-9 sm:flex">
<AvatarImage src="/avatars/01.png" alt="Avatar" />
<AvatarFallback>OM</AvatarFallback>
</Avatar>
<div className="grid gap-1">
<p className="text-sm font-medium leading-none">
Olivia Martin
</p>
<p className="text-sm text-muted-foreground">
olivia.martin@email.com
</p>
</div>
<div className="ml-auto font-medium">+$1,999.00</div>
</div>
<div className="flex items-center gap-4">
<Avatar className="hidden h-9 w-9 sm:flex">
<AvatarImage src="/avatars/02.png" alt="Avatar" />
<AvatarFallback>JL</AvatarFallback>
</Avatar>
<div className="grid gap-1">
<p className="text-sm font-medium leading-none">
Jackson Lee
</p>
<p className="text-sm text-muted-foreground">
jackson.lee@email.com
</p>
</div>
<div className="ml-auto font-medium">+$39.00</div>
</div>
<div className="flex items-center gap-4">
<Avatar className="hidden h-9 w-9 sm:flex">
<AvatarImage src="/avatars/03.png" alt="Avatar" />
<AvatarFallback>IN</AvatarFallback>
</Avatar>
<div className="grid gap-1">
<p className="text-sm font-medium leading-none">
Isabella Nguyen
</p>
<p className="text-sm text-muted-foreground">
isabella.nguyen@email.com
</p>
</div>
<div className="ml-auto font-medium">+$299.00</div>
</div>
<div className="flex items-center gap-4">
<Avatar className="hidden h-9 w-9 sm:flex">
<AvatarImage src="/avatars/04.png" alt="Avatar" />
<AvatarFallback>WK</AvatarFallback>
</Avatar>
<div className="grid gap-1">
<p className="text-sm font-medium leading-none">
William Kim
</p>
<p className="text-sm text-muted-foreground">
will@email.com
</p>
</div>
<div className="ml-auto font-medium">+$99.00</div>
</div>
<div className="flex items-center gap-4">
<Avatar className="hidden h-9 w-9 sm:flex">
<AvatarImage src="/avatars/05.png" alt="Avatar" />
<AvatarFallback>SD</AvatarFallback>
</Avatar>
<div className="grid gap-1">
<p className="text-sm font-medium leading-none">
Sofia Davis
</p>
<p className="text-sm text-muted-foreground">
sofia.davis@email.com
</p>
</div>
<div className="ml-auto font-medium">+$39.00</div>
</div>
</CardContent>
</Card>
</div>
</main>
</div>
)
}
dashboard-01
