{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sidebar-15", "type": "registry:block", "author": "shadcn (https://ui.shadcn.com)", "description": "A left and right sidebar.", "registryDependencies": [ "sidebar", "breadcrumb", "separator", "popover", "collapsible", "dropdown-menu", "calendar", "avatar" ], "files": [ { "path": "blocks/sidebar-15/page.tsx", "content": "import { SidebarLeft } from \"@/registry/default/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/default/blocks/sidebar-15/components/sidebar-right\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbList,\n BreadcrumbPage,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function Page() {\n return (\n \n \n \n

\n \n \n \n \n \n \n Project Management & Task Tracking\n \n \n \n \n

\n \n \n \n )\n}\n", "type": "registry:page", "target": "app/dashboard/page.tsx" }, { "path": "blocks/sidebar-15/components/calendars.tsx", "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarSeparator,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function Calendars({\n calendars,\n}: {\n calendars: {\n name: string\n items: string[]\n }[]\n}) {\n return (\n <>\n {calendars.map((calendar, index) => (\n \n \n \n \n \n {calendar.name}{\" \"}\n \n \n \n \n \n \n {calendar.items.map((item, index) => (\n \n \n \n \n

\n {item}\n \n \n ))}\n \n \n \n \n \n \n \n ))}\n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "blocks/sidebar-15/components/date-picker.tsx", "content": "import { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n SidebarGroup,\n SidebarGroupContent,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function DatePicker() {\n return (\n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "blocks/sidebar-15/components/nav-favorites.tsx", "content": "\"use client\"\n\nimport {\n ArrowUpRight,\n Link,\n MoreHorizontal,\n StarOff,\n Trash2,\n} from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavFavorites({\n favorites,\n}: {\n favorites: {\n name: string\n url: string\n emoji: string\n }[]\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n Favorites\n \n {favorites.map((item) => (\n \n \n \n {item.emoji}\n {item.name}\n \n \n \n \n \n \n More\n \n \n \n \n \n Remove from Favorites\n \n \n \n \n Copy Link\n \n \n \n Open in New Tab\n \n \n \n \n Delete\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "blocks/sidebar-15/components/nav-main.tsx", "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n items,\n}: {\n items: {\n title: string\n url: string\n icon: LucideIcon\n isActive?: boolean\n }[]\n}) {\n return (\n \n {items.map((item) => (\n \n \n \n \n {item.title}\n \n \n \n ))}\n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "blocks/sidebar-15/components/nav-secondary.tsx", "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavSecondary({\n items,\n ...props\n}: {\n items: {\n title: string\n url: string\n icon: LucideIcon\n badge?: React.ReactNode\n }[]\n} & React.ComponentPropsWithoutRef) {\n return (\n \n \n \n {items.map((item) => (\n \n \n \n \n {item.title}\n \n \n {item.badge && {item.badge}}\n \n ))}\n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "blocks/sidebar-15/components/nav-user.tsx", "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n

\n {user.name}\n {user.email}\n

\n \n \n \n \n \n

\n \n \n CN\n \n

\n {user.name}\n {user.email}\n

\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "blocks/sidebar-15/components/nav-workspaces.tsx", "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavWorkspaces({\n workspaces,\n}: {\n workspaces: {\n name: string\n emoji: React.ReactNode\n pages: {\n name: string\n emoji: React.ReactNode\n }[]\n }[]\n}) {\n return (\n \n Workspaces\n \n \n {workspaces.map((workspace) => (\n \n \n \n \n {workspace.emoji}\n {workspace.name}\n \n \n \n \n \n \n \n \n \n \n \n \n {workspace.pages.map((page) => (\n \n \n \n {page.emoji}\n {page.name}\n \n \n \n ))}\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "blocks/sidebar-15/components/sidebar-left.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n AudioWaveform,\n Blocks,\n Calendar,\n Command,\n Home,\n Inbox,\n MessageCircleQuestion,\n Search,\n Settings2,\n Sparkles,\n Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/default/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/default/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/default/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/default/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/default/blocks/sidebar-15/components/team-switcher\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarHeader,\n SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n teams: [\n {\n name: \"Acme Inc\",\n logo: Command,\n plan: \"Enterprise\",\n },\n {\n name: \"Acme Corp.\",\n logo: AudioWaveform,\n plan: \"Startup\",\n },\n {\n name: \"Evil Corp.\",\n logo: Command,\n plan: \"Free\",\n },\n ],\n navMain: [\n {\n title: \"Search\",\n url: \"#\",\n icon: Search,\n },\n {\n title: \"Ask AI\",\n url: \"#\",\n icon: Sparkles,\n },\n {\n title: \"Home\",\n url: \"#\",\n icon: Home,\n isActive: true,\n },\n {\n title: \"Inbox\",\n url: \"#\",\n icon: Inbox,\n badge: \"10\",\n },\n ],\n navSecondary: [\n {\n title: \"Calendar\",\n url: \"#\",\n icon: Calendar,\n },\n {\n title: \"Settings\",\n url: \"#\",\n icon: Settings2,\n },\n {\n title: \"Templates\",\n url: \"#\",\n icon: Blocks,\n },\n {\n title: \"Trash\",\n url: \"#\",\n icon: Trash2,\n },\n {\n title: \"Help\",\n url: \"#\",\n icon: MessageCircleQuestion,\n },\n ],\n favorites: [\n {\n name: \"Project Management & Task Tracking\",\n url: \"#\",\n emoji: \"📊\",\n },\n {\n name: \"Family Recipe Collection & Meal Planning\",\n url: \"#\",\n emoji: \"🍳\",\n },\n {\n name: \"Fitness Tracker & Workout Routines\",\n url: \"#\",\n emoji: \"💪\",\n },\n {\n name: \"Book Notes & Reading List\",\n url: \"#\",\n emoji: \"📚\",\n },\n {\n name: \"Sustainable Gardening Tips & Plant Care\",\n url: \"#\",\n emoji: \"🌱\",\n },\n {\n name: \"Language Learning Progress & Resources\",\n url: \"#\",\n emoji: \"🗣️\",\n },\n {\n name: \"Home Renovation Ideas & Budget Tracker\",\n url: \"#\",\n emoji: \"🏠\",\n },\n {\n name: \"Personal Finance & Investment Portfolio\",\n url: \"#\",\n emoji: \"💰\",\n },\n {\n name: \"Movie & TV Show Watchlist with Reviews\",\n url: \"#\",\n emoji: \"🎬\",\n },\n {\n name: \"Daily Habit Tracker & Goal Setting\",\n url: \"#\",\n emoji: \"✅\",\n },\n ],\n workspaces: [\n {\n name: \"Personal Life Management\",\n emoji: \"🏠\",\n pages: [\n {\n name: \"Daily Journal & Reflection\",\n url: \"#\",\n emoji: \"📔\",\n },\n {\n name: \"Health & Wellness Tracker\",\n url: \"#\",\n emoji: \"🍏\",\n },\n {\n name: \"Personal Growth & Learning Goals\",\n url: \"#\",\n emoji: \"🌟\",\n },\n ],\n },\n {\n name: \"Professional Development\",\n emoji: \"💼\",\n pages: [\n {\n name: \"Career Objectives & Milestones\",\n url: \"#\",\n emoji: \"🎯\",\n },\n {\n name: \"Skill Acquisition & Training Log\",\n url: \"#\",\n emoji: \"🧠\",\n },\n {\n name: \"Networking Contacts & Events\",\n url: \"#\",\n emoji: \"🤝\",\n },\n ],\n },\n {\n name: \"Creative Projects\",\n emoji: \"🎨\",\n pages: [\n {\n name: \"Writing Ideas & Story Outlines\",\n url: \"#\",\n emoji: \"✍️\",\n },\n {\n name: \"Art & Design Portfolio\",\n url: \"#\",\n emoji: \"🖼️\",\n },\n {\n name: \"Music Composition & Practice Log\",\n url: \"#\",\n emoji: \"🎵\",\n },\n ],\n },\n {\n name: \"Home Management\",\n emoji: \"🏡\",\n pages: [\n {\n name: \"Household Budget & Expense Tracking\",\n url: \"#\",\n emoji: \"💰\",\n },\n {\n name: \"Home Maintenance Schedule & Tasks\",\n url: \"#\",\n emoji: \"🔧\",\n },\n {\n name: \"Family Calendar & Event Planning\",\n url: \"#\",\n emoji: \"📅\",\n },\n ],\n },\n {\n name: \"Travel & Adventure\",\n emoji: \"🧳\",\n pages: [\n {\n name: \"Trip Planning & Itineraries\",\n url: \"#\",\n emoji: \"🗺️\",\n },\n {\n name: \"Travel Bucket List & Inspiration\",\n url: \"#\",\n emoji: \"🌎\",\n },\n {\n name: \"Travel Journal & Photo Gallery\",\n url: \"#\",\n emoji: \"📸\",\n },\n ],\n },\n ],\n}\n\nexport function SidebarLeft({\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "blocks/sidebar-15/components/sidebar-right.tsx", "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/default/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/default/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-15/components/nav-user\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarRail,\n SidebarSeparator,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n user: {\n name: \"shadcn\",\n email: \"m@example.com\",\n avatar: \"/avatars/shadcn.jpg\",\n },\n calendars: [\n {\n name: \"My Calendars\",\n items: [\"Personal\", \"Work\", \"Family\"],\n },\n {\n name: \"Favorites\",\n items: [\"Holidays\", \"Birthdays\"],\n },\n {\n name: \"Other\",\n items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n },\n ],\n}\n\nexport function SidebarRight({\n ...props\n}: React.ComponentProps) {\n return (\n