shadcn/app/public/registry/styles/default/dashboard-01.json

{
  "name": "dashboard-01",
  "registryDependencies": [
    "button",
    "dropdown-menu",
    "input",
    "sheet"
  ],
  "files": [
    {
      "name": "dashboard-01.tsx",
      "content": "import Link from \"next/link\"\nimport {\n  Activity,\n  ArrowUpRight,\n  CircleUser,\n  CreditCard,\n  DollarSign,\n  Menu,\n  Package2,\n  Search,\n  Users,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nexport const description =\n  \"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.\"\n\nexport const iframeHeight = \"825px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <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\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Analytics\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Analytics\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <main className=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n        <div className=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n          <Card x-chunk=\"dashboard-01-chunk-0\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Total Revenue\n              </CardTitle>\n              <DollarSign className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">$45,231.89</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +20.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"dashboard-01-chunk-1\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Subscriptions\n              </CardTitle>\n              <Users className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+2350</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +180.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"dashboard-01-chunk-2\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Sales</CardTitle>\n              <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+12,234</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +19% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"dashboard-01-chunk-3\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Active Now</CardTitle>\n              <Activity className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+573</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +201 since last hour\n              </p>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n          <Card className=\"xl:col-span-2\" x-chunk=\"dashboard-01-chunk-4\">\n            <CardHeader className=\"flex flex-row items-center\">\n              <div className=\"grid gap-2\">\n                <CardTitle>Transactions</CardTitle>\n                <CardDescription>\n                  Recent transactions from your store.\n                </CardDescription>\n              </div>\n              <Button asChild size=\"sm\" className=\"ml-auto gap-1\">\n                <Link href=\"#\">\n                  View All\n                  <ArrowUpRight className=\"h-4 w-4\" />\n                </Link>\n              </Button>\n            </CardHeader>\n            <CardContent>\n              <Table>\n                <TableHeader>\n                  <TableRow>\n                    <TableHead>Customer</TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Type\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Status\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Date\n                    </TableHead>\n                    <TableHead className=\"text-right\">Amount</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        [email protected]\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-23\n                    </TableCell>\n                    <TableCell className=\"text-right\">$250.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Olivia Smith</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        [email protected]\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Refund\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Declined\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-24\n                    </TableCell>\n                    <TableCell className=\"text-right\">$150.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Noah Williams</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        [email protected]\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Subscription\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-25\n                    </TableCell>\n                    <TableCell className=\"text-right\">$350.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Emma Brown</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        [email protected]\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-26\n                    </TableCell>\n                    <TableCell className=\"text-right\">$450.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        [email protected]\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-27\n                    </TableCell>\n                    <TableCell className=\"text-right\">$550.00</TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"dashboard-01-chunk-5\">\n            <CardHeader>\n              <CardTitle>Recent Sales</CardTitle>\n            </CardHeader>\n            <CardContent className=\"grid gap-8\">\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                  <AvatarFallback>OM</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Olivia Martin\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    [email protected]\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$1,999.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                  <AvatarFallback>JL</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Jackson Lee\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    [email protected]\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                  <AvatarFallback>IN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Isabella Nguyen\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    [email protected]\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$299.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                  <AvatarFallback>WK</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    William Kim\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    [email protected]\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$99.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                  <AvatarFallback>SD</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Sofia Davis\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    [email protected]\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </main>\n    </div>\n  )\n}\n"
    }
  ],
  "type": "components:block",
  "category": "Application",
  "subcategory": "Dashboard"
}