Falnix UI

Navigation Sidebar

A collapsible, mobile-responsive sidebar layout with customizable header, content, and footer sections. Supports multiple collapse modes (icon, offcanvas) and automatic state persistence.

CollapsibleResponsivePersistent State

Component Preview

Welcome back!

This is a preview of the Sidebar component. Try collapsing it using the trigger or resizing the window.

Installation

npm install @falnix/ui

Or copy the source code for customization:

1"use client"
2

3import * as React from "react"
4import { Slot } from "@radix-ui/react-slot"
5import { VariantProps, cva } from "class-variance-authority"
6import { PanelLeft } from "lucide-react"
7

8import { useIsMobile } from "@/hooks/use-mobile"
9import { cn } from "@/lib/utils"
10// ... (Full sidebar code)

Core Props

PropComponentDescription
defaultOpenSidebarProviderInitial state of the sidebar (expanded or collapsed).
collapsibleSidebarBehavior on collapse:offcanvas (slides out),icon (shrinks to icons),none (static).