Layout Components
Sidebar navigation, scroll areas, and resizable panels for app layouts.
Sidebar
Full-featured collapsible sidebar with header, content, footer, menu hierarchy, and mobile sheet fallback. Includes keyboard shortcut (b) and cookie-based state persistence.
Setup
Wrap your layout in SidebarProvider and place Sidebar alongside main content:
import { SidebarProvider, Sidebar, SidebarContent, SidebarTrigger, SidebarInset } from '@artasce/crystal-ui';
export default function Layout({ children }) {
return (
<SidebarProvider>
<Sidebar>
<SidebarContent>
{/* Menu items */}
</SidebarContent>
</Sidebar>
<SidebarInset>
<header>
<SidebarTrigger />
</header>
<main>{children}</main>
</SidebarInset>
</SidebarProvider>
);
}Menu Structure
import {
SidebarMenu, SidebarMenuItem, SidebarMenuButton,
SidebarGroup, SidebarGroupLabel, SidebarGroupContent,
} from '@artasce/crystal-ui';
<SidebarGroup>
<SidebarGroupLabel>Dashboard</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton asChild>
<a href="/dashboard"><LayoutDashboard />Overview</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>useSidebar Hook
import { useSidebar } from '@artasce/crystal-ui';
const { state, open, setOpen, toggleSidebar, isMobile } = useSidebar();
// state: 'expanded' | 'collapsed'All Sidebar Exports
Sidebar, SidebarProvider, SidebarContent, SidebarHeader, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar
Behavior
| Feature | Detail |
|---|---|
| Collapse | Collapses to icon-only (3rem width) |
| Mobile | Switches to Sheet overlay below mobile breakpoint |
| Keyboard | b key toggles sidebar |
| Persistence | State saved in cookie (sidebar_state, 7-day expiry) |
| Desktop width | 16rem expanded, 3rem collapsed |
| Mobile width | 18rem |
ScrollArea
Custom scrollbar container using Radix ScrollArea. Replaces native scrollbars with styled overlay scrollbars.
import { ScrollArea, ScrollBar } from '@artasce/crystal-ui';
<ScrollArea className="h-72 w-48 rounded-md border">
<div className="p-4">
{items.map(item => <div key={item}>{item}</div>)}
</div>
</ScrollArea>For horizontal scrolling:
<ScrollArea className="w-96 whitespace-nowrap">
<div className="flex gap-4">
{items.map(item => <div key={item} className="w-48 shrink-0">{item}</div>)}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>Resizable
Resizable panel groups for split-pane layouts. Powered by react-resizable-panels.
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@artasce/crystal-ui';
<ResizablePanelGroup direction="horizontal">
<ResizablePanel defaultSize={25}>
<div className="p-4">Sidebar</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={75}>
<div className="p-4">Main Content</div>
</ResizablePanel>
</ResizablePanelGroup>Supports direction="vertical" and nested panel groups.
Import All
import {
SidebarProvider, Sidebar, SidebarContent, SidebarHeader, SidebarFooter,
SidebarMenu, SidebarMenuItem, SidebarMenuButton,
SidebarGroup, SidebarGroupLabel, SidebarGroupContent,
SidebarTrigger, SidebarInset, SidebarRail, useSidebar,
ScrollArea, ScrollBar,
ResizablePanelGroup, ResizablePanel, ResizableHandle,
} from '@artasce/crystal-ui';