Velvet Sidebar — Glass Collapsible Navigation Sidebar for React

A cinema-grade glass navigation sidebar for React, made for streaming and media apps but at home in any dashboard.

• The active bar. A red bar runs edge to edge and travels between rows. It stretches toward its target, then the tail catches up. Its glow spills onto the glass, and the panel's border lights red where it meets the bar.
• Hover and focus. A glow glides after the pointer. Focus rings are designed, and rows press in when clicked.
• The rail. The panel folds into an 84 px rail (edge button, [ or Ctrl/⌘+B). The title shrinks to its first letter, section labels become glowing dashes, and the rows get tooltips with badges and shortcuts. "Peek on hover" opens the rail over the page.
• The bell. It swings when something new arrives, its count pops and rolls, and its popover marks items as seen.
• "Who's watching?" A profile switcher. Profiles can be PIN-locked, and switching wipes the avatar and rolls the name.
• Search. / or Ctrl/⌘+K opens it, with Recent and Trending lists, highlighted matches and arrow keys.
• Previews. Resting the pointer on Continue watching shows a resume card; on My List, a fan of posters.
• Log out asks first, and shows a spinner and then a check while it works.
• Themes and sides. Light, dark and auto themes, five accents (or any hex, with readable text worked out for you), full right-to-left, and a phone drawer you can swipe closed.

Built with Next.js 16, React 19, motion, lucide-react and @floating-ui/react-dom. The component itself is plain CSS.

Run it

pnpm install
pnpm dev          # http://localhost:3000

There are three demos:

Page	What it shows
/	In an app (the default). Docked in a small dark streaming app, Kinora: the billboard and rows follow the sidebar.
/showcase	Showcase. The floating sidebar over silk drawn by a WebGL shader, with a dock to try theme, accent, collapsed, peek, docked, RTL (Persian) and "Simulate notification".
/rail	Collapsed rail. The same app in light theme, as a rail that peeks open on hover.

Use it in your project

Copy components/velvet-sidebar/ (or install it from UpFork), then:

pnpm add motion lucide-react @floating-ui/react-dom

Props, keyboard, theming and accessibility are documented in components/velvet-sidebar/README.md.

Where things live

Path	What
components/velvet-sidebar/	The component (CSS, hooks, popovers, tests).
components/demo/	Demo-only code: Kinora's data (data.ts), the silk shader, the control dock, the in-app page, and Persian copy.
public/velvet/	Demo photos, cut by pnpm photos (scripts/photos.mjs). Credits are in CREDITS.md.
registry/	What UpFork lists, written by pnpm registry.

Kinora, its shows and its people are fictional. Any likeness to a real service or title is a coincidence.

Checks

pnpm lint && pnpm typecheck && pnpm test && pnpm build