Sidebar

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

A sidebar rendered as an aside next to your content; it collapses to zero width when closed and is controlled imperatively via ref (toggle / open / close / isOpen).

Main content, controlled through the sidebar ref

"use client";

import { useRef } from "react";
import { Button, 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 variant="outline" onClick={() => sidebarRef.current?.toggle()}>
          Toggle
        </Button>
        <Button variant="outline" onClick={() => sidebarRef.current?.open()}>
          Open
        </Button>
        <Button variant="outline" onClick={() => sidebarRef.current?.close()}>
          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

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