# Velvet Sidebar — Glass Collapsible Navigation Sidebar for React

> A cinema-grade glass sidebar for React: a red active bar that travels between rows, a collapse into a monogram rail, notifications, a profile switcher, search, preview flyouts, light/dark/auto, five accents, RTL and a phone drawer.

- Kind: Component (Menus)
- Price: comes with the Pro plan
- License: UpFork Standard License. Use it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.
- Developer: UpFork
- Tags: menu, navigation-menu, sidebar, notification, glassmorphism, collapsible, streaming, dark-mode, rtl, framer-motion, react, nextjs
- npm packages: @floating-ui/react-dom, lucide-react, motion
- Published: 2026-10-20
- Updated: 2026-10-20
- Page: https://upfork.dev/products/glass-collapsible-sidebar-react

## How to get it

Install it into a React + Tailwind project with the shadcn CLI:

```bash
npx shadcn@latest add @upfork/glass-collapsible-sidebar-react
```

It installs with the member's personal CLI token (UPFORK_TOKEN), made on their UpFork account page. It comes with UpFork's Pro plan and the plans after it.

## About

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

```bash
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:

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

Props, keyboard, theming and accessibility are documented in [`components/velvet-sidebar/README.md`](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](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

```bash
pnpm lint && pnpm typecheck && pnpm test && pnpm build
```