4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:Tfb5,import { AppHeader } from "@/components/app-header" import { AppSidebar } from "@/components/app-sidebar" import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb" import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar" export default function Page() { return (

Building Your Application Data Fetching

) } 52:T148a,"use client" import * as React from "react" import { BookOpen, Bot, Frame, LifeBuoy, Map, PieChart, Send, Settings2, SquareTerminal, } from "lucide-react" import { NavMain } from "@/components/nav-main" import { NavProjects } from "@/components/nav-projects" import { NavResources } from "@/components/nav-resources" import { NavSecondary } from "@/components/nav-secondary" import { NavUser } from "@/components/nav-user" import { SearchCommand } from "@/components/search-command" import { ScrollFadeEffect } from "@/components/ui/scroll-fade-effect" import { Sidebar, SidebarContent, SidebarFooter, } from "@/components/ui/sidebar" const data = { user: { name: "pprunty", email: "m@example.com", avatar: "https://patrickprunty.com/icon.webp", }, navMain: [ { title: "Playground", url: "#", icon: SquareTerminal, isActive: true, items: [ { title: "History", url: "#", }, { title: "Starred", url: "#", }, { title: "Settings", url: "#", }, ], }, { title: "Models", url: "#", icon: Bot, items: [ { title: "Genesis", url: "#", }, { title: "Explorer", url: "#", }, { title: "Quantum", url: "#", }, ], }, { title: "Documentation", url: "#", icon: BookOpen, items: [ { title: "Introduction", url: "#", }, { title: "Get Started", url: "#", }, { title: "Tutorials", url: "#", }, { title: "Changelog", url: "#", }, ], }, { title: "Settings", url: "#", icon: Settings2, items: [ { title: "General", url: "#", }, { title: "Team", url: "#", }, { title: "Billing", url: "#", }, { title: "Limits", url: "#", }, ], }, { title: "Analytics", url: "#", icon: Bot, items: [ { title: "Overview", url: "#", }, { title: "Reports", url: "#", }, { title: "Insights", url: "#", }, ], }, { title: "Integrations", url: "#", icon: BookOpen, items: [ { title: "Apps", url: "#", }, { title: "Webhooks", url: "#", }, { title: "API Keys", url: "#", }, ], }, { title: "Security", url: "#", icon: Settings2, items: [ { title: "Authentication", url: "#", }, { title: "Permissions", url: "#", }, { title: "Audit Log", url: "#", }, ], }, ], navSecondary: [ { title: "Support", url: "#", icon: LifeBuoy, }, { title: "Feedback", url: "#", icon: Send, }, ], resources: [ { title: "Status", url: "#", }, { title: "Changelog", url: "#", }, { title: "Pricing", url: "#", }, { title: "Documentation", url: "#", }, { title: "API Reference", url: "#", }, { title: "Community", url: "#", }, { title: "Blog", url: "#", }, { title: "Careers", url: "#", }, ], projects: [ { name: "Design Engineering", url: "#", icon: Frame, }, { name: "Sales & Marketing", url: "#", icon: PieChart, }, { name: "Travel", url: "#", icon: Map, }, ], } export function AppSidebar({ ...props }: React.ComponentProps) { return (

) } 53:T893,"use client" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function AppHeader() { return (

Delta UI Platform

Help Pricing Manage cookies

) } 54:T8e0,"use client" import { ChevronRight, type LucideIcon } from "lucide-react" import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible" import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, } from "@/components/ui/sidebar" export function NavMain({ items, }: { items: { title: string url: string icon: LucideIcon isActive?: boolean items?: { title: string url: string }[] }[] }) { return ( Platform {items.map((item) => ( {item.title} {item.items?.length ? ( <> Toggle {item.items?.map((subItem) => ( {subItem.title} ))} ) : null} ))} ) } 55:T9c4,"use client" import { Folder, MoreHorizontal, Share, Trash2, type LucideIcon, } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, useSidebar, } from "@/components/ui/sidebar" export function NavProjects({ projects, }: { projects: { name: string url: string icon: LucideIcon }[] }) { const { isMobile } = useSidebar() return ( Projects {projects.map((item) => ( {item.name} More View Project Share Project Delete Project ))} More ) } 56:Td69,"use client" import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut, Sparkles, } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage, } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar, } from "@/components/ui/sidebar" export function NavUser({ user, }: { user: { name: string email: string avatar: string } }) { const { isMobile } = useSidebar() return ( CN

{user.name} {user.email}

Upgrade to Pro Account Billing Notifications Log out ) } 57:Td7e,"use client" import * as React from "react" import { CornerDownLeftIcon, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Command, CommandEmpty, CommandInput, CommandList, } from "@/components/ui/command" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" export function SearchCommand() { const [open, setOpen] = React.useState(false) React.useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === "k" && (e.metaKey || e.ctrlKey)) { if ( (e.target instanceof HTMLElement && e.target.isContentEditable) || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement ) { return } e.preventDefault() setOpen((open) => !open) } } document.addEventListener("keydown", down) return () => document.removeEventListener("keydown", down) }, []) return ( ) } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","button","dialog","command","@delta/scroll-fade-effect"]}]]}],["$","$L4f",null,{"sourceUrl":"https://deltacomponents.dev/r/admin-inset-layout.json","proxyUrl":"https://shadcnregistry.com/r/delta/admin-inset-layout","itemId":"@delta/admin-inset-layout"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"blocks/admin-inset-layout/page.tsx","content":"$51","type":"registry:page","target":"app/admin-inset-layout/page.tsx"},{"path":"blocks/admin-inset-layout/components/app-sidebar.tsx","content":"$52","type":"registry:component","target":"components/app-sidebar.tsx"},{"path":"blocks/admin-inset-layout/components/app-header.tsx","content":"$53","type":"registry:component","target":"components/app-header.tsx"},{"path":"blocks/admin-inset-layout/components/nav-main.tsx","content":"$54","type":"registry:component","target":"components/nav-main.tsx"},{"path":"blocks/admin-inset-layout/components/nav-projects.tsx","content":"$55","type":"registry:component","target":"components/nav-projects.tsx"},{"path":"blocks/admin-inset-layout/components/nav-resources.tsx","content":"import * as React from \"react\"\n\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavResources({\n items,\n}: {\n items: {\n title: string\n url: string\n }[]\n}) {\n return (\n \n \n Resources\n \n \n {items.map((item) => (\n \n \n \n {item.title}\n \n \n \n ))}\n \n \n )\n}\n","type":"registry:component","target":"components/nav-resources.tsx"},{"path":"blocks/admin-inset-layout/components/nav-secondary.tsx","content":"import * as React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nexport function NavSecondary({\n items,\n ...props\n}: {\n items: {\n title: string\n url: string\n icon: LucideIcon\n }[]\n} & React.ComponentPropsWithoutRef) {\n return (\n \n \n \n {items.map((item) => (\n \n \n \n \n {item.title}\n \n \n \n ))}\n \n \n \n )\n}\n","type":"registry:component","target":"components/nav-secondary.tsx"},{"path":"blocks/admin-inset-layout/components/nav-user.tsx","content":"$56","type":"registry:component","target":"components/nav-user.tsx"},{"path":"blocks/admin-inset-layout/components/search-command.tsx","content":"$57","type":"registry:component","target":"components/search-command.tsx"}]}]]}],"$L58"]}]

Admin Inset Layout

Installation

Files

app

components

Styles