An icon rail that opens a flyout of sub-links beside the hovered icon, gliding and resizing between sections with content sliding in the direction you moved. Arrow keys open, walk and close it.
prod-eu-postgres
npx shadcn@latest add https://hyperblur.dev/r/sidebar-flyout-rail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-flyout-rail.tsx.
import { SidebarFlyoutRail } from "@/components/hyperblur/sidebar-flyout-rail"
<SidebarFlyoutRail onChange={(link, section) => router.push(`/${section}/${link}`)} />| Prop | Type | Default | Description |
|---|---|---|---|
| sections | { id: string; label: string; icon?: SidebarFlyoutRailIconName | ReactNode; description?: string; links: { id: string; label: string; hint?: string }[] }[] | Functions, Storage, Network, Analytics, Settings | Rail sections and their flyout links. Built-in icons: bolt, box, globe, db, chart, gear. |
| active | string | Controlled current link id. Pair with onChange. | |
| defaultActive | string | first link | Initially current link when uncontrolled. |
| onChange | (linkId: string, sectionId: string) => void | Called when a flyout link is chosen. | |
| defaultOpenSection | string | null | null | Section whose flyout is open on first render. |
| openDelay | number | 90 | Hover time in milliseconds before the first flyout opens. Moving between icons afterwards is instant. |
| closeDelay | number | 220 | Grace time in milliseconds after the pointer leaves. |
| flyoutWidth | number | 212 | Flyout width in pixels. |
| brand | ReactNode | Logo above the icons. | |
| footer | ReactNode | Content pinned to the bottom of the rail. | |
| accent | string | "#2f7bff" | Accent for the owner indicator, current link and focus rings. |