50: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"] 51: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"] 52: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"] 53:T7af,import { AppSidebar } from "@/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/app-sidebar"; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"; import { Card } from "@/components/ui/card"; import Search from "@/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/search"; const Page = () => { return (

Dashboard Analytics

{Array.from({ length: 8 }).map((_, index) => (

))}

); }; export default Page; 54:T16e5,"use client"; import { useState } from "react"; import SimpleBar from "simplebar-react"; import "simplebar-react/dist/simplebar.min.css"; import { Button } from "@/components/ui/button"; import { Sheet, SheetContent, SheetHeader, SheetTitle, } from "@/components/ui/sheet"; import { NavMain, MobileNav, NavSection, } from "@/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/nav-main"; import { AlignStartVertical, PieChart, CircleUserRound, ClipboardList, Menu, Notebook, NotepadText, Table, Languages, Ticket, ShoppingCart, House, Sparkles, GraduationCap, HeartPulse, Settings, HelpCircle, Tag, ShieldCheck, Plug, Key, Calendar, MessageCircle, Mail, NotebookText, Contact, TextCursorInput, MousePointer2, ListChecks, Disc, Calendar1, LaptopMinimalCheck, MapPinCheckInside, Globe, } from "lucide-react"; import ProfileDropdown from "@/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/dropdown-profile"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import LanguageDropdown from "@/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/dropdown-language"; export const navData: NavSection[] = [ { label: "Dashboards", items: [ { title: "Analytics", icon: PieChart, href: "#" }, { title: "CRM Dashboard", icon: ClipboardList, href: "#" }, { title: "eCommerce", icon: ShoppingCart, href: "#" }, { title: "Modern", icon: House, href: "#" }, { title: "SaaS + AI Dashboard", icon: Sparkles, href: "#" }, { title: "School Management", icon: GraduationCap, href: "#" }, { title: "Health Management", icon: HeartPulse, href: "#" }, ], }, { label: "Pages", items: [ { title: "Account Setting", icon: Settings, href: "#" }, { title: "FAQ", icon: HelpCircle, href: "#" }, { title: "Pricing", icon: Tag, href: "#" }, { title: "Roll Base Access", icon: ShieldCheck, href: "#" }, { title: "Integrations", icon: Plug, href: "#" }, { title: "API Keys", icon: Key, href: "#" }, ], }, { label: "Apps", items: [ { title: "Notes", icon: Notebook, href: "#" }, { title: "Tickets", icon: Ticket, href: "#" }, { title: "Blogs", icon: Languages, href: "#" }, { title: "Calendar", icon: Calendar, href: "#" }, { title: "Chats", icon: MessageCircle, href: "#" }, { title: "Email", icon: Mail, href: "#" }, { title: "Notes", icon: NotebookText, href: "#" }, { title: "Contacts", icon: Contact, href: "#" }, ], }, { label: "Form Elements", items: [ { title: "Input", icon: TextCursorInput, href: "#" }, { title: "Select", icon: MousePointer2, href: "#" }, { title: "Checkbox", icon: ListChecks, href: "#" }, { title: "Radio", icon: Disc, href: "#" }, { title: "Datepicker", icon: Calendar1, href: "#" }, { title: "Autocomplete", icon: LaptopMinimalCheck, href: "#" }, { title: "Dropzone", icon: MapPinCheckInside, href: "#" }, ], }, ]; export function AppSidebar() { const [mobileOpen, setMobileOpen] = useState(false); return (

{/* ---------------- Logo ---------------- */}

{/* ---------------- Desktop horizontal nav (left aligned) ---------------- */}

} />

); } 55:T15b1,"use client"; import * as React from "react"; import { ChevronDown, LucideIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { Collapsible, CollapsibleTrigger, CollapsibleContent, } from "@/components/ui/collapsible"; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from "@/components/ui/navigation-menu"; export type NavChild = { title: string; href: string; }; export type NavItem = { title: string; icon?: LucideIcon; href?: string; children?: NavChild[]; }; export type NavSection = { label: string; items: NavItem[]; }; export function NavMain({ sections, className, }: { sections: NavSection[]; className?: string; }) { return ( {sections.map((section) => ( {section.label}

{item.children?.length ? (
{item.title}
- } className="flex items-center px-2 py-1.5 text-sm text-foreground hover:bg-accent hover:text-accent-foreground" > {child.title}
) : ( } className="flex items-center gap-2 px-2 py-1.5 text-sm text-foreground hover:bg-accent hover:text-accent-foreground" > {item.icon && } {item.title} )}

))} ); } export function MobileNav({ sections, onNavigate, }: { sections: NavSection[]; onNavigate?: () => void; }) { return (

{sections.map((section) => (

{section.label}

{section.items.map((item) => ( ))}

))}

); } function MobileNavItem({ item, onNavigate, }: { item: NavItem; onNavigate?: () => void; }) { const hasChildren = !!item.children?.length; const [isOpen, setIsOpen] = React.useState(false); if (hasChildren) { return ( {item.icon && } {item.title} {item.children!.map((child) => ( {child.title} ))} ); } return ( {item.icon && } {item.title} ); } 56:Te90,"use client"; import { useState } from "react"; import SimpleBar from "simplebar-react"; import "simplebar-react/dist/simplebar.min.css"; import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { SearchIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; interface SearchType { href: string; title: string; } const SearchLinks: SearchType[] = [ { title: 'Modern', href: '/', }, { title: 'eCommerce', href: '/dashboards/eCommerce', }, { title: 'General', href: '/dashboards/general', }, { title: 'Music', href: '/dashboards/music', }, { title: 'General', href: '/dashboards/general', }, ]; const Search = () => { const [openModal, setOpenModal] = useState(false); return (

); }; export default Search; 57:Td9c,"use client"; import type { ReactElement } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Bookmark, LogOut, LucideIcon, ReceiptText, Settings, User, } from "lucide-react"; type Props = { trigger: ReactElement; defaultOpen?: boolean; align?: "start" | "center" | "end"; }; type MenuItem = { label: string; icon: LucideIcon; destructive?: boolean; }; const PROFILE_ITEMS: MenuItem[] = [ { label: "My Profile", icon: User }, { label: "My Subscription", icon: Bookmark }, { label: "My Invoice", icon: ReceiptText }, ]; const SETTINGS_ITEMS: MenuItem[] = [ { label: "Account Settings", icon: Settings }, ]; const LOGOUT_ITEM: MenuItem = { label: "Signout", icon: LogOut, destructive: true, }; const itemClass = "px-4 py-2.5 text-base cursor-pointer gap-3"; const ProfileDropdown = ({ trigger, defaultOpen, align = "end" }: Props) => { return ( {trigger} {/* User Info */}

David McMichael david.mcmichael@example.com

{/* Main Links */} {PROFILE_ITEMS.map(({ label, icon: Icon }) => ( {label} ))} {/* Settings */} {SETTINGS_ITEMS.map(({ label, icon: Icon }) => ( {label} ))} {/* Logout */} {LOGOUT_ITEM.label} ); }; export default ProfileDropdown; 58:T93f,'use client' import { useState, type ReactElement } from 'react' import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' type Props = { trigger: ReactElement defaultOpen?: boolean align?: 'start' | 'center' | 'end' } type Language = { value: string label: string icon: string } const LANGUAGES: Language[] = [ { value: 'english', label: 'English (UK)', icon: 'https://images.shadcnspace.com/assets/flags/flag-us.svg', }, { value: 'chinese', label: '中国人 (Chinese)', icon: 'https://images.shadcnspace.com/assets/flags/flag-china.svg', }, { value: 'french', label: 'français (French)', icon: 'https://images.shadcnspace.com/assets/flags/flag-france.svg', }, { value: 'arabic', label: 'عربي (Arabic)', icon: 'https://images.shadcnspace.com/assets/flags/flag-australia.svg', }, ] const itemClass = 'cursor-pointer gap-2 pl-2 text-sm data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground [&>span]:hidden' const LanguageDropdown = ({ trigger, defaultOpen, align = 'end' }: Props) => { const [language, setLanguage] = useState(LANGUAGES[0].value) return ( {trigger} {LANGUAGES.map(({ value, label, icon }) => (

{label} ))} ) } export default LanguageDropdown 4c:["$","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"}]]}]}],["$","li","simplebar-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/simplebar-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":"simplebar-react"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["navigation-menu","collapsible","sheet","button","avatar","dropdown-menu","dialog","input","breadcrumb","card"]}]]}],["$","$L51",null,{"sourceUrl":"https://shadcndashboard.dev/r/dashboard-layout-03.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-dashboard/dashboard-layout-03","itemId":"@shadcn-dashboard/dashboard-layout-03"}],["$","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"}],["$","$L52",null,{"files":[{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/page.tsx","content":"$53","type":"registry:page","target":"app/dashboard-layout-03/page.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/app-sidebar.tsx","content":"$54","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/app-sidebar.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/nav-main.tsx","content":"$55","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/nav-main.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/search.tsx","content":"$56","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/search.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/dropdown-profile.tsx","content":"$57","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/dropdown-profile.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/dropdown-language.tsx","content":"$58","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-03/dropdown-language.tsx"}]}]]}],"$L59"]}]

Quick Page Links

{link.title}

Dashboard Layout 03 Horizontal Layout

Installation

Files

app

components

Styles