Browse components
Line Sidebar
Sidebar navigation whose glowing line indicator stretches toward the new item and springs back to size.
Installation
npx shadcn@latest add @glint-ui/line-sidebarFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/line-sidebar.json
Usage
import { LineSidebar } from "@/components/ui/line-sidebar";
<LineSidebar
items={[
{ label: "Dashboard", icon: <LayoutGrid /> },
{ label: "Inbox", icon: <Inbox />, badge: "12" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { label, icon?, badge? }. |
| defaultActive | number | 0 | Index selected at first render. |
| color | string | "#c6f24e" | Indicator color. |
| stiffness | number | 420 | Spring stiffness of the leading edge. |
| showTrack | boolean | true | Show the faint rail behind the indicator. |
| onSelect | ReactNode | — | Called with the selected index. |
| className | string | — | Extra classes for the root element. |