A vertical rail of glossy app tiles that swell under the pointer like a lens, with a floating label that glides to the nearest tile. Keyboard focus drives the same magnification.
Library
Recently added
npx shadcn@latest add https://hyperblur.dev/r/sidebar-fisheye.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-fisheye.tsx.
import { SidebarFisheye } from "@/components/hyperblur/sidebar-fisheye"
<SidebarFisheye defaultActive="library" onChange={(id) => setView(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; icon?: SidebarFisheyeIconName | ReactNode; tint?: string; hint?: string }[] | seven music app sections | Tiles. tint colors the tile gradient. hint shows a small chip in the floating label. |
| 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 tile is pressed. | |
| magnify | number | 0.5 | Extra scale of the tile right under the pointer. 0.5 means 150%. |
| radius | number | 96 | Distance in pixels over which the lens fades out. |
| size | number | 36 | Resting tile size in pixels. |
| gap | number | 8 | Space between tiles in pixels. |
| footer | ReactNode | Content under the tiles, such as an avatar. | |
| accent | string | "#2f7bff" | Fallback tile color for items without a tint. |