indevuisidebar

Navigation

About

here is indevui modern sidebar component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds indevuisidebar to your project and fits it to your theme.

Code

How indevuisidebar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import * as React from 'react';
import {
   HomeIcon,
   LayoutGridIcon,
   LibraryIcon,
   ListMusicIcon,
   MicIcon,
   MusicIcon,
   PlayCircleIcon,
   RadioIcon,
   SettingsIcon,
   UserIcon,
} from 'lucide-react';

import SidebarProvider, {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
   SidebarInset,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   SidebarSeparator,
   SidebarTrigger,
} from '@/components/ui/indevuisidebar';

const SidebarProviderDemo = () => {
   return (
      <SidebarProvider defaultOpen={true}>
         <Sidebar variant="inset" collapsible="icon">
            <SidebarHeader className="p-4">
               <div className="flex items-center gap-2">
                  <MusicIcon className="size-6" />
                  <span className="text-lg font-semibold">Music</span>
               </div>
            </SidebarHeader>
            <SidebarContent className="p-2">
               <SidebarMenu>
                  <SidebarMenuItem>
                     <SidebarMenuButton tooltip="Home" isActive>
                        <HomeIcon />
                        <span>Home</span>
                     </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                     <SidebarMenuButton tooltip="Browse">
                        <LayoutGridIcon />
                        <span>Browse</span>
                     </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                     <SidebarMenuButton tooltip="Radio">
                        <RadioIcon />
                        <span>Radio</span>
                     </SidebarMenuButton>
                  </SidebarMenuItem>
               </SidebarMenu>
               <SidebarSeparator />
               <SidebarMenu>
                  <SidebarMenuItem>
                     <SidebarMenuButton tooltip="My Library">
                        <LibraryIcon />
                        <span>My Library</span>
                     </SidebarMenuButton>
                     <SidebarMenuSub>
                        <SidebarMenuSubItem>
                           <SidebarMenuSubButton>
                              <PlayCircleIcon />
                              <span>Playlists</span>
                           </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                        <SidebarMenuSubItem>
                           <SidebarMenuSubButton>
                              <MicIcon />
                              <span>Artists</span>
                           </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                        <SidebarMenuSubItem>
                           <SidebarMenuSubButton>
                              <ListMusicIcon />
                              <span>Albums</span>
                           </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                     </SidebarMenuSub>
                  </SidebarMenuItem>
               </SidebarMenu>
            </SidebarContent>
            <SidebarFooter className="p-2">
               <SidebarMenu>
                  <SidebarMenuItem>
                     <SidebarMenuButton asChild tooltip="Account">
                        <a href="#">
                           <UserIcon />
                           <span>Account</span>
                        </a>
                     </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                     <SidebarMenuButton tooltip="Settings">
                        <SettingsIcon />
                        <span>Settings</span>
                     </SidebarMenuButton>
                  </SidebarMenuItem>
               </SidebarMenu>
            </SidebarFooter>
         </Sidebar>
         <SidebarInset>
            <header className="flex h-14 items-center gap-4 border-b bg-background px-6">
               <SidebarTrigger className="flex md:hidden" />
               <h1 className="text-lg font-semibold">Home</h1>
            </header>
            <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6">

               <p>The main content area. Resize the window to see the sidebar collapse.</p>
               <p>
                  Press <kbd className="rounded-md border bg-muted px-2 py-1 text-xs">⌘B</kbd> to toggle the sidebar.
               </p>
            </main>
         </SidebarInset>
      </SidebarProvider>
   );
};

export { SidebarProviderDemo as DemoOne };