# Duet Sidebar — Glassmorphism Icon Dock & Expandable Menu for React

> A two-part glass sidebar for React: a slim icon dock with a glowing indicator, and a full menu that unfurls beside it. Linked hover, expandable channels, Settings and Help views, an account switcher, light/dark/auto, five tints, RTL and a phone bottom dock.

- 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, dock, sidebar, glassmorphism, icon-sidebar, expandable, dark-mode, rtl, framer-motion, react, nextjs
- npm packages: @floating-ui/react-dom, motion
- Published: 2026-10-21
- Updated: 2026-10-21
- Page: https://upfork.dev/products/glassmorphism-icon-sidebar-menu-react

## How to get it

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

```bash
npx shadcn@latest add @upfork/glassmorphism-icon-sidebar-menu-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 glass icon dock that unfurls a full menu panel beside it, for React. Two slabs of tinted glass work as a pair: the
dock is always there, and pressing the brand mark opens the panel from the corner nearest it.

- **One selection, two slabs.** Choosing on either moves the dock's glowing indicator (it stretches as it travels), the
  dock's tile and the panel's tile with its chevron, together.
- **The slabs talk.** Hover a dock icon and its row lights in the panel; hover a row and its icon lights in the dock.
  With the panel closed, the dock has tooltips with shortcuts.
- **The unfurl.** The panel opens from the corner nearest the mark while light crosses the gap; the wordmark rises,
  "MENU" settles, the dividers draw and the rows arrive one after another. The mark's play notch turns into a chevron.
- **Subscriptions** expand in place with LIVE and "new" channels; their dot shows on both slabs and clears once seen.
- **Settings and Help** push inside the panel, with a breadcrumb back. Themed settings parts are included.
- **Account** popover with plan, renewal and account switching; sign-out asks first.
- **Pinned or overlay**, light, dark and auto themes, five glass tints or any hex, full RTL, and a phone layout (a
  bottom dock with a raised mark and a sheet).

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

## Run it

```bash
pnpm install
pnpm dev          # http://localhost:5901
```

| Page | What it shows |
| --- | --- |
| `/` | **In an app** (the default). Duet in a small dark video app, *Playtide*, panel folded into the dock: navigating really changes the page. |
| `/showcase` | **Showcase.** The dock alone on silk drawn by a WebGL shader, with a dock of options: theme, tint, pinned, search, window dots, RTL and "New uploads". |
| `/phone` | **Phone.** The same component in a 390 px phone frame: the bottom dock, the raised mark and the sheet. |

In the sidebar's Settings you can switch the theme, the glass tint and the language (فارسی turns everything right to left).

## Use it in your project

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

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

Props, keyboard, theming and accessibility: [`components/duet-sidebar/README.md`](components/duet-sidebar/README.md).

## Where things live

| Path | What |
| --- | --- |
| `components/duet-sidebar/` | The component (CSS, hooks, popovers, views, phone layout, tests). |
| `components/demo/` | Demo-only code: Playtide's data (`data.ts`), the bloom shader, the option dock, the app and phone pages, the demo fonts. |
| `public/duet/` | Demo photos, cut by `pnpm photos` (scripts/photos.mjs). Credits are in [CREDITS.md](CREDITS.md). |
| `registry/` | What UpFork lists, written by `pnpm registry`. |

Playtide, its channels, people and videos are fictional. Any likeness to a real service is a coincidence.

## Checks

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