Components
Sidebar
A collapsible sidebar with ref-based external control
Installation
$npx litefy@latest add sidebar
$pnpm dlx litefy@latest add sidebar
$yarn dlx litefy@latest add sidebar
$bun --bun litefy@latest add sidebar
Usage
Basic Usage
A sidebar rendered as an aside next to your content. When closed, it collapses to zero width through the data-close attribute. The sidebar exposes an imperative handle through ref — toggle, open, close, isOpen — so sibling nodes or any external code can control it without lifting state.
"use client";import { useRef } from "react";import { Sidebar, type SidebarHandle } from "@/ui";export default function SidebarBasicDemo() { const sidebarRef = useRef<SidebarHandle>(null); return ( <div className="flex w-full flex-col gap-3"> <div className="flex gap-2"> <button type="button" onClick={() => sidebarRef.current?.toggle()} className="px-3 py-1.5 text-sm border rounded hover:bg-primary-accent" > Toggle </button> <button type="button" onClick={() => sidebarRef.current?.open()} className="px-3 py-1.5 text-sm border rounded hover:bg-primary-accent" > Open </button> <button type="button" onClick={() => sidebarRef.current?.close()} className="px-3 py-1.5 text-sm border rounded hover:bg-primary-accent" > Close </button> </div> <div className="flex w-full h-48 border rounded-md overflow-hidden"> <Sidebar ref={sidebarRef} defaultOpen className="w-48 p-4 border-r"> <nav className="flex flex-col gap-2 text-sm"> <span className="font-medium">Dashboard</span> <span>Projects</span> <span>Settings</span> </nav> </Sidebar> <main className="flex-1 p-4 text-sm text-muted-foreground"> Main content, controlled through the sidebar ref </main> </div> </div> );}API Reference
High-level Components
Sidebar
An aside element with internal open state, collapsed via the data-close attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
ref | React.Ref<SidebarHandle> | - | Imperative handle with toggle, open, close and isOpen for external control |
defaultOpen | boolean | true | Initial open state |
className | ClassNameValue | - | Custom CSS class |
...props | React.ComponentProps<"aside"> | - | Supports all native aside props (except className, ref) |
SidebarHandle
The imperative handle attached to ref.
| Property | Type | Description |
|---|---|---|
toggle | () => void | Toggle the open state |
open | () => void | Open the sidebar |
close | () => void | Close the sidebar |
isOpen | boolean | Current open state |