A frosted glass sidebar floating over slowly drifting aurora light, with a soft light that follows the pointer down the list. The active row is a raised glass pill with a bright top edge.
Gallery
128 renders
npx shadcn@latest add https://hyperblur.dev/r/sidebar-glass-aurora.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-glass-aurora.tsx.
import { SidebarGlassAurora } from "@/components/hyperblur/sidebar-glass-aurora"
<SidebarGlassAurora colors={["#6d5dfc", "#2fd3c5", "#ff4d8d"]} onUpgrade={() => openCheckout()} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; icon?: SidebarGlassAuroraIconName | ReactNode; badge?: string }[] | Create, Gallery, Styles, Assets, Team, Settings | Navigation rows. |
| active | string | Controlled current item id. Pair with onChange. | |
| defaultActive | string | first item | Initially current item when uncontrolled. |
| onChange | (id: string) => void | Called when a row is chosen. | |
| colors | [string, string, string] | ["#6d5dfc", "#2fd3c5", "#ff4d8d"] | The three aurora colors, also used by the workspace orb and the usage bar. |
| workspace | string | "Prism Studio" | Workspace name at the top. |
| plan | string | "Creator plan" | Line under the workspace name. |
| usage | { label: string; used: number; total: number } | null | { label: "Renders this month", used: 742, total: 1000 } | Usage card at the bottom. null hides it. |
| onUpgrade | () => void | Called by the upgrade button. | |
| upgradeLabel | string | "Upgrade to Pro" | Upgrade button text. Empty hides the button. |
| speed | number | 18 | Seconds for one aurora drift cycle. |