NEW
An AI chat composer: the prompt lifts into a message and the answer card blooms out of the input.
Catalogue
An app-shell sidebar for SaaS dashboards. Collapse it and it springs into a 76 px icon rail while the page widens with it: the KPI cards stretch, the chart redraws to the new width and the table opens a column it had no room for. The lime pill on the current page stretches between items, rail icons get tooltips, the unread badge shrinks to a dot and the plan card turns into a credits ring. On phones it opens over the page with a dimmed backdrop. Real buttons with aria-expanded and aria-current, Ctrl/Cmd + B to toggle, onNavigate and onCollapsedChange props.
- React + Tailwind (TSX)
- Next.js App Router ready
- PROMPT.md
- HTML, also included
Install
- One command
npx shadcn@latest add "https://qodesign.dev/r/reflow-sidebar.json?key=YOUR_KEY"Your key comes with the order. Works in any shadcn project, Next.js App Router included. - Or copy it inThe zip has
react/src/components, ready for Next.js ("use client" included). - Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.
What it does
- Full sidebar to 76 px icon rail on a spring
- The page reflows with it: cards, chart and table
- Current-page pill stretches between items
- Rail tooltips, badge dot and credits ring
- Phones: opens over the page with a backdrop
- Stack
- React · Framer Motion · HTML version
- Released
- Licence
- Personal and client projects. Licence
Came from Instagram? The reel keyword was SIDEBAR.
Keep browsing
All 17NEW
A glass drop magnifies the tab under it, stretches between tabs and bursts into the player.
NEW
A sign-in page in the dark: a desk lamp finds each field and floods the screen when you sign in.
NEW
Products fly into the cart as discs; open it and they unfold into line items.
NEW
Arcs spin around six chunky cells, merge into one check, and the blurred dashboard behind them unlocks.
NEW
Your card becomes the receipt: it splits, unrolls into paper and gets stamped PAID.
Reflow Sidebar
$3