51: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"] 52: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"] 53: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"] 54:T3d8a,'use client'; import * as React from 'react'; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/components/ui/breadcrumb'; import { Separator } from '@/components/ui/separator'; import { SidebarProvider, SidebarInset, SidebarTrigger, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarRail, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuAction, } from '@/components/animate-ui/components/radix/sidebar'; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@/components/animate-ui/primitives/radix/collapsible'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from '@/components/animate-ui/components/radix/dropdown-menu'; import { AudioWaveform, BadgeCheck, Bell, BookOpen, Bot, ChevronRight, ChevronsUpDown, Command, CreditCard, Folder, Forward, Frame, GalleryVerticalEnd, LogOut, Map, MoreHorizontal, PieChart, Plus, Settings2, Sparkles, SquareTerminal, Trash2, } from 'lucide-react'; import { Avatar, AvatarFallback, AvatarImage, } from '@/components/ui/avatar'; import { useIsMobile } from '@/hooks/use-mobile'; const DATA = { user: { name: 'Skyleen', email: 'skyleen@example.com', avatar: 'https://pbs.twimg.com/profile_images/1909615404789506048/MTqvRsjo_400x400.jpg', }, teams: [ { name: 'Acme Inc', logo: GalleryVerticalEnd, plan: 'Enterprise', }, { name: 'Acme Corp.', logo: AudioWaveform, plan: 'Startup', }, { name: 'Evil Corp.', logo: Command, plan: 'Free', }, ], 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: '#', }, ], }, ], projects: [ { name: 'Design Engineering', url: '#', icon: Frame, }, { name: 'Sales & Marketing', url: '#', icon: PieChart, }, { name: 'Travel', url: '#', icon: Map, }, ], }; export const RadixSidebarDemo = () => { const isMobile = useIsMobile(); const [activeTeam, setActiveTeam] = React.useState(DATA.teams[0]); if (!activeTeam) return null; return ( {/* Team Switcher */}

{activeTeam.name} {activeTeam.plan}

Teams {DATA.teams.map((team, index) => ( setActiveTeam(team)} className="gap-2 p-2" >

{team.name} ⌘{index + 1} ))}

Add team

{/* Team Switcher */} {/* Nav Main */} Platform {DATA.navMain.map((item) => ( {item.icon && } {item.title} {item.items?.map((subItem) => ( {subItem.title} ))} ))} {/* Nav Main */} {/* Nav Project */} Projects {DATA.projects.map((item) => ( {item.name} More View Project Share Project Delete Project ))} More {/* Nav Project */} {/* Nav User */} CN

{DATA.user.name} {DATA.user.email}

Upgrade to Pro Account Billing Notifications Log out {/* Nav User */}

Building Your Application Data Fetching

); }; 4d:["$","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":[]}],["$","$L51",null,{"registryDependencies":["@animate-ui/components-radix-sidebar"]}]]}],["$","$L52",null,{"sourceUrl":"https://animate-ui.com/r/demo-components-radix-sidebar.json","proxyUrl":"https://shadcnregistry.com/r/animate-ui/demo-components-radix-sidebar","itemId":"@animate-ui/demo-components-radix-sidebar"}],["$","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"}],["$","$L53",null,{"files":[{"path":"registry/demo/components/radix/sidebar/index.tsx","content":"$54","type":"registry:ui","target":"components/animate-ui/demo/components/radix/sidebar.tsx"}]}]]}],"$L55"]}]

Radix Sidebar Demo

Installation

Files

components

Styles