A continuous seam opens around the hovered or focused row, then rejoins below it. A damped spring lets the contour reverse smoothly and return to the selected page. Search filters grouped links by label or keywords. The sidebar supports links, controlled selection, custom headers and footers, keyboard navigation, and reduced motion.
Installation
$pnpm dlx shadcn@latest add https://your-docs-domain.com/r/glass-sidebar.json
Usage
"use client"
import { useState } from "react"
import { LayoutDashboard, FolderOpen, Inbox, Settings } from "lucide-react"
import { GlassSidebar } from "@/components/ui/glass-sidebar"
export default function Navigation() {
const [value, setValue] = useState("projects")
return <GlassSidebar
className="h-[620px]"
value={value}
onValueChange={setValue}
items={[
{ heading: "Workspace" },
{ id: "overview", label: "Overview", icon: <LayoutDashboard /> },
{ id: "projects", label: "Projects", icon: <FolderOpen />, badge: "3" },
{ id: "inbox", label: "Inbox", icon: <Inbox />, badge: "2" },
{ heading: "Manage" },
{ id: "settings", label: "Settings", icon: <Settings /> },
]}
/>
}
API
| Property | Type | Description |
|---|
items | (GlassSidebarItem | GlassSidebarHeading)[] | Navigation rows and group headings. Rows can include an href, icon, badge, and search keywords. |
value? | string | Selected row ID when the parent controls selection. |
defaultValue? | string | Initial selected row ID for an uncontrolled sidebar. Defaults to the first row. |
onValueChange? | (id: string) => void | Called when a row is selected. |
header? | React.ReactNode | Replaces the brand row above search. |
footer? | React.ReactNode | Account details or other content anchored below navigation. |
searchable? | boolean | Shows a local filter for the navigation rows. Defaults to true. |
searchPlaceholder? | string | Placeholder and accessible label for the search field. |
Standard element attributes are supported where the props extend a React element type. Required properties appear without a question mark.
Dependencies
motion, tailwindcss-concentric
Its icons come from animate-ui and install with the component.
Shared local files are included in the Code panel. See project setup for Tailwind, path aliases, and theme tokens.