Railbase
GPTClaude

Sidebar

A full application sidebar system: provider, collapsible rail, groups, and menus.

Updated

Sidebar + inset
<SidebarProvider>
  <Sidebar collapsible="none">
    <SidebarHeader class="px-3 py-2 text-sm font-semibold">Railbase</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Platform</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem><SidebarMenuButton isActive>Dashboard</SidebarMenuButton></SidebarMenuItem>
            <SidebarMenuItem><SidebarMenuButton>Data</SidebarMenuButton></SidebarMenuItem>
            <SidebarMenuItem><SidebarMenuButton>Settings</SidebarMenuButton></SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset class="p-4 text-sm">Main content area</SidebarInset>
</SidebarProvider>

A full application sidebar system: provider, collapsible rail, groups, and menus.

Installation

railbase ui add sidebar

Peer dependencies:

npm install class-variance-authority

Note

railbase ui add also copies the button, input, separator, sheet, skeleton, tooltip components and shared primitives — they ship alongside this component automatically.

Usage

import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarInset, SidebarTrigger } from "@/lib/ui/sidebar";

<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarMenu>
          <SidebarMenuItem><SidebarMenuButton>Home</SidebarMenuButton></SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {/* page content */}
  </SidebarInset>
</SidebarProvider>

Anatomy

Exported parts: useSidebar · SidebarProvider · Sidebar · SidebarTrigger · SidebarRail · SidebarInset · SidebarInput · SidebarHeader · SidebarFooter · SidebarSeparator · SidebarContent · SidebarGroup · SidebarGroupLabel · SidebarGroupContent · SidebarMenu · SidebarMenuItem · SidebarMenuAction · SidebarMenuButton · SidebarMenuSub · SidebarMenuSubItem · SidebarMenuSubButton · SidebarMenuSkeleton

← PreviousSheetNext →Skeleton