A react-pro-sidebar alternative

react-pro-sidebar gives you the menu and leaves the rest of the app to you. Reflow Sidebar is a finished app shell: collapse it to an icon rail and the whole page reflows with it on a spring.

Reflow Sidebar, preview
One payment$3

By buying you agree to the Terms.

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/dashboard/Shell.tsx

"use client";
import { useRouter } from "next/navigation";
import ReflowSidebar from "@/components/ReflowSidebar";
import northwind, { type ReflowSidebarData } from "@/data/northwind";

// react-pro-sidebar's <MenuItem>s become plain data: id, label, icon and an optional badge
const data: ReflowSidebarData = {
  ...northwind,
  nav: [
    { id: "overview", label: "Overview", icon: "grid" },
    { id: "revenue", label: "Revenue", icon: "chart" },
    { id: "customers", label: "Customers", icon: "users" },
    { id: "inbox", label: "Inbox", icon: "inbox", badge: 3 },
    { id: "settings", label: "Settings", icon: "sliders" },
  ],
};

export default function Shell() {
  const router = useRouter();
  return (
    <div style={{ height: "100dvh" }}>
      <ReflowSidebar
        data={data}
        autoplayDemo={false}
        // react-pro-sidebar's collapsed prop: pass defaultCollapsed to start folded, and hear changes here
        onCollapsedChange={(rail) => console.log(rail ? "icon rail" : "open")}
        onNavigate={(id) => router.push(`/dashboard/${id}`)}
      />
    </div>
  );
}

Good to know

  • react-pro-sidebar 1.1.0 (February 2024) depends on @emotion/react, @emotion/styled and @popperjs/core, and you restyle it with rootStyles and menuItemStyles objects. Reflow Sidebar keeps its styles in a plain CSS file next to the component, so it sits beside Tailwind with no CSS-in-JS.
  • How the props map: collapsed becomes defaultCollapsed plus onCollapsedChange. toggled and breakPoint are built in: up to 760 px wide the open sidebar slides over the page with a dimmed backdrop. MenuItem becomes an entry in data.nav.
  • There are no nested submenus. If your app needs SubMenu trees several levels deep, react-pro-sidebar or the shadcn/ui Sidebar fits better.
  • Nav icons come from a set of six inside the component (grid, chart, users, inbox, file, sliders). Add your own SVG paths there for more.
  • The component draws the whole shell: sidebar, header and a sample page with KPI cards, a chart and a table. Put your own page inside its <main>. Ctrl/Cmd + B toggles the rail, and the collapsible sidebar guide shows how to keep the state in a cookie across reloads.

Coming from react-sidebar?

  • react-sidebar (balloob/react-sidebar on GitHub) is archived. Its last release, 3.0.2, came out in August 2018, and npm still counted about 12,000 downloads in the week to October 22, 2026.
  • It installs next to React 19 without a peer warning, since it asks for react >=16.4.2. In a fresh project on October 25, 2026 the import failed, though. The package lists @babel/runtime as >=7.0.0-beta.56, npm picked 8.0.8, and 8.0.8 doesn't export the helpers/objectSpread file react-sidebar imports. With @babel/runtime 7.29.10 installed, it rendered fine on React 19.3. If your lockfile already holds @babel/runtime 7, you won't hit this. Pinning 7 in npm overrides works too.
  • sidebar (the content you pass in) becomes data.nav: one entry per item with an id, a label, an icon and an optional badge.
  • docked: on wide screens Reflow Sidebar is always docked. Instead of hiding, it folds to an icon rail and the page reflows into the space. defaultCollapsed starts it folded.
  • open and onSetOpen: up to 760 px wide, the open sidebar slides over the page with a dimmed backdrop, and Escape closes it. The component keeps that state itself and reports changes through onCollapsedChange. There's no controlled open prop.
  • touch, touchHandleWidth and dragToggleDistance: there's no swipe to open. react-sidebar's README says its own swipe is turned off on iPhone and iPad. Reflow opens from its toggle button or Ctrl/Cmd + B.
  • pullRight: Reflow sits on the left only.
  • styles and the className props: the look lives in reflow-sidebar.css next to the component, so you change it there.
  • If all you need is a bare slide-out drawer around your own markup, with swipe on Android, react-sidebar still does that once @babel/runtime 7 is in your tree. For a maintained free sidebar, the shadcn/ui Sidebar is the usual pick.

Install

  1. Copy from the zipPut react/src/components + react/src/data into src/, then npm i framer-motion.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

data
nav items with badges, projects, plan card and the sample page
defaultCollapsed
start as the icon rail
onCollapsedChange
called with true when it folds to the rail
onNavigate
called with the nav item id

How qodesign compares

  • qodesign vs shadcnblocksshadcnblocks is best for: assembling whole pages from ready-made sections.
  • qodesign vs Kokonut UIKokonut UI is best for: landing page sections and templates installed by an AI agent.
  • qodesign vs TremorTremor is best for: dashboards and charts: area, bar, line and donut charts, trackers, KPI cards, tables.

All comparisons, with prices read on each library's own site.

Questions

Does react-pro-sidebar work in the Next.js App Router?

Yes, from a client component, since its styles come from Emotion at runtime. Reflow Sidebar is a client component too, but its styles are a static CSS file.

Is it accessible?

The nav items are real buttons with aria-current, the toggle has aria-expanded, rail icons get tooltips and Escape closes the phone overlay.

Is react-sidebar still maintained?

No. The GitHub repo is archived and the last npm release, 3.0.2, is from August 2018. In our test it still rendered on React 19 once @babel/runtime 7 was installed.

Does the sidebar work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.