Sidebar

An app sidebar that collapses to icons or off canvas, stays pinned under your header, and becomes a swipeable sheet on phones.

bypreet from Hextaui

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/sidebar

npx layro-cli add @preetsuthar17/sidebar

npx layro-cli add @preetsuthar17/sidebar

bunx layro-cli add @preetsuthar17/sidebar

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client"

import * as React from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { useRender } from "@base-ui/react/use-render"
import {
  IconCheck,
  IconChevronRight,
  IconLayoutSidebar,
  IconX,
} from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"