Components
Sidebar
Sidebar layout.
Use Sidebar to add a collapsible application sidebar.
import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarTrigger } from '@tile-ui/react';
export default function SidebarDemo() {
return (
<SidebarProvider style={{ minHeight: 220 }}>
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>Registry install
pnpm dlx shadcn@latest add @tile-ui/sidebarPackage usage
import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarTrigger } from '@tile-ui/react';
<SidebarProvider>
<Sidebar>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Menu</SidebarGroupLabel>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarTrigger />
</SidebarProvider>Highlights
- Provider and trigger
- Variants and sides
- Collapsible modes
Registry dependencies
| Item | Purpose |
|---|---|
sidebar | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
Sidebar
| Prop | Type | Default |
|---|---|---|
side | 'left' | 'right' | — |
variant | 'sidebar' | 'floating' | 'inset' | — |
collapsible | 'offcanvas' | 'icon' | 'none' | — |
SidebarProvider
| Prop | Type | Default |
|---|---|---|
defaultOpen | boolean | — |
open | boolean | — |
onOpenChange | (open: boolean) => void | — |