{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-layouts-01",
  "type": "registry:component",
  "title": "Page Layouts",
  "author": "Toby Belhome",
  "description": "Design organized and intuitive dashboard experiences with Tailwind CSS page layouts. These sections combine sidebars, headers, content areas, and responsive grids to present data clearly. Perfect for SaaS platforms, admin panels, and analytics tools seeking modern, user-friendly, and visually structured interfaces.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "sidebar",
    "separator",
    "scroll-area",
    "collapsible",
    "sidebar"
  ],
  "files": [
    {
      "path": "examples/blocks/dashboard-ui/page-layouts/01/components/app-header.tsx",
      "content": "import { SidebarTrigger } from \"@/components/ui/sidebar\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator\n} from \"@/components/ui/breadcrumb\";\n\nexport function AppHeader() {\n  return (\n    <header className=\"flex h-16 shrink-0 items-center gap-2\">\n      <div className=\"flex items-center gap-2 px-4\">\n        <SidebarTrigger className=\"-ml-1\" />\n        <Separator orientation=\"vertical\" className=\"mr-2 data-[orientation=vertical]:h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem className=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">Building Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator className=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </div>\n    </header>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/page-layouts/components/app-header.tsx"
    },
    {
      "path": "examples/blocks/dashboard-ui/page-layouts/01/components/app-sidebar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal\n} from \"lucide-react\";\n\nimport { NavMain } from \"./nav-main\";\nimport { NavProjects } from \"./nav-projects\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem\n} from \"@/components/ui/sidebar\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\n\nconst data = {\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2\n    }\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map\n    }\n  ]\n};\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <ScrollArea className=\"h-full\">\n          <NavMain items={data.navMain} />\n          <NavProjects projects={data.projects} />\n        </ScrollArea>\n      </SidebarContent>\n    </Sidebar>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/page-layouts/components/app-sidebar.tsx"
    },
    {
      "path": "examples/blocks/dashboard-ui/page-layouts/01/components/nav-main.tsx",
      "content": "\"use client\";\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\";\n\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem\n} from \"@/components/ui/sidebar\";\n\nexport function NavMain({\n  items\n}: {\n  items: {\n    title: string;\n    url: string;\n    icon: LucideIcon;\n    isActive?: boolean;\n    items?: {\n      title: string;\n      url: string;\n    }[];\n  }[];\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton asChild>\n                            <a href={subItem.url}>\n                              <span>{subItem.title}</span>\n                            </a>\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/page-layouts/components/nav-main.tsx"
    },
    {
      "path": "examples/blocks/dashboard-ui/page-layouts/01/components/nav-projects.tsx",
      "content": "\"use client\";\n\nimport { type LucideIcon } from \"lucide-react\";\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem\n} from \"@/components/ui/sidebar\";\nimport Link from \"next/link\";\n\nexport function NavProjects({\n  projects\n}: {\n  projects: {\n    name: string;\n    url: string;\n    icon: LucideIcon;\n  }[];\n}) {\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <Link href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </Link>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/page-layouts/components/nav-projects.tsx"
    },
    {
      "path": "examples/blocks/dashboard-ui/page-layouts/01/page.tsx",
      "content": "import { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\";\n\nimport { AppSidebar } from \"./components/app-sidebar\";\nimport { AppHeader } from \"./components/app-header\";\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <AppHeader />\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"bg-muted/50 grid min-h-[100vh] flex-1 place-items-center rounded-xl md:min-h-min\">\n            <span className=\"text-muted-foreground text-sm\">Content goes here</span>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/page-layouts/page-layouts.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}