shadcn sidebar on mobile: the fixes

On a phone, shadcn's Sidebar isn't a panel. Below 768 px it turns into a Sheet that stays shut until something opens it, and it stays open when you tap a link. Here are the small fixes for both, the breakpoint that makes it vanish, and when Reflow Sidebar's always-visible icon rail is the better phone layout.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Reflow Sidebar as the phone layout for a dashboard route

app/(reflow)/dashboard/dashboard-shell.tsx

"use client";
import { useRouter } from "next/navigation";
import ReflowSidebar from "@/components/ReflowSidebar";
import data from "@/data/northwind"; // swap for your own ReflowSidebarData

export default function DashboardShell() {
  const router = useRouter();
  return (
    <div style={{ height: "100dvh" }}>
      <ReflowSidebar
        data={data}
        autoplayDemo={false}
        // no defaultCollapsed: on a phone it starts as the 76 px rail, on desktop open
        onNavigate={(id) => router.push(`/dashboard/${id}`)}
      />
    </div>
  );
}

app/(reflow)/dashboard/layout.tsx

import DashboardShell from "./dashboard-shell";

// Its own route group, outside the layout with SidebarProvider: both listen for
// Ctrl/Cmd + B. The layout stays mounted across /dashboard pages.
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <DashboardShell />
      {children}
    </>
  );
}

app/(reflow)/dashboard/[[...page]]/page.tsx

export default function Page() {
  return null;
}

Good to know

Free first. If your app already uses shadcn's Sidebar, keep it and make the two edits in the sections below: a SidebarTrigger the phone can reach, and a close call on every link. That's a few lines in your own files and no new package.
On phones Reflow Sidebar never hides. When its box is 760 px wide or less it starts as the 76 px icon rail, so the pages stay one tap away. Opening it slides the full 264 px panel over the page with a dimmed backdrop, and picking a page, tapping the backdrop or pressing Escape folds it back to the rail. Nothing for you to wire.
It decides rail or open from the width of its own box when it mounts, not from the window. Leave defaultCollapsed undefined, as in the snippet, and it picks for you. Pass true or false only if you save the visitor's choice yourself (our collapse animation guide reads shadcn's sidebar_state cookie for that).
Reflow Sidebar is a whole dashboard screen, not a skin for shadcn's Sidebar. It draws its own rail, header, KPI cards, chart and table from one data object and has no children prop, so to show your own page you edit the <main> in ReflowSidebar.tsx. Use it for the dashboard route and keep shadcn's Sidebar elsewhere.
Give the Reflow route its own route group, outside the layout that renders SidebarProvider. Both listen for Ctrl/Cmd + B, and with both on one page a single press would toggle two sidebars.
If shadcn components go inside Reflow's main area, make the CSS edits in our collapse animation guide first (the button reset and the --muted and --font-mono names). That section is linked below.
What we ran on Oct 26 2026: the snippets on this page type-check against next 15.5.28, react 19.1.1, @types/react 19.3.0, radix-ui 1.8.1, lucide-react 1.61.0, framer-motion 11.18.2 and TypeScript 5.9.3, with shadcn's sidebar.tsx, sheet.tsx, tooltip.tsx and use-mobile.ts from its new-york-v4 registry and the shipped Reflow Sidebar. We built them into a scratch Next.js app with Tailwind 4.3.3 and checked it in headless Chromium at 390 and 1440 px: the stock sidebar left open after a link tap and the fixed one closing, the panel at 1440, the breakpoint case at 900 px, the Reflow rail opening, closing on a pick, the backdrop and Escape, and no sideways scroll. We didn't test Safari, Firefox or a real phone.

Why the shadcn sidebar disappears on mobile

We read sidebar.tsx and use-mobile.ts from shadcn's new-york-v4 registry on Oct 26 2026, the files the shadcn CLI copies into your project. When useIsMobile() is true, Sidebar returns a Sheet (a Radix Dialog) instead of the panel. The Sheet's open state is openMobile in SidebarProvider, and it starts as false.
The desktop panel is in the markup too, but its wrapper has the classes hidden md:block, so on a phone nothing shows. The only thing that opens the Sheet is toggleSidebar(), which SidebarTrigger and Ctrl/Cmd + B call. If your only trigger lives inside the Sidebar, or in a header you hide on small screens, a phone has no way in. That's one way to end up with a sidebar that seems not to work on mobile.
Two smaller things from the same file. The mobile branch doesn't use the className you pass to <Sidebar>, so classes you set there apply on desktop only. And on phones the Sheet is 18rem wide (SIDEBAR_WIDTH_MOBILE), not 16rem, while collapsible="icon" only changes the desktop panel: a phone always gets the full Sheet.
The fix is a SidebarTrigger outside the Sidebar that stays visible on small screens. The layout below puts it in a sticky header inside SidebarInset. In our scratch app at 390 px the panel measured 0 px wide before the tap and the Sheet opened on it.

app/(app)/layout.tsx

import { cookies } from "next/headers";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/app-sidebar";

export default async function AppLayout({ children }: { children: React.ReactNode }) {
  const defaultOpen = (await cookies()).get("sidebar_state")?.value !== "false";
  return (
    <SidebarProvider defaultOpen={defaultOpen}>
      <AppSidebar />
      <SidebarInset>
        {/* On a phone this button is the only way in: below 768 px the
            sidebar is a closed Sheet, not a panel. Keep it outside <Sidebar>. */}
        <header className="sticky top-0 z-10 flex h-12 items-center gap-2 border-b bg-background px-3">
          <SidebarTrigger />
          <span className="text-sm font-medium">Acme</span>
        </header>
        <div className="p-4">{children}</div>
      </SidebarInset>
    </SidebarProvider>
  );
}

Close the sheet when a link is clicked

In the Next.js App Router a Link changes the page without unmounting the layout, so SidebarProvider and its openMobile state live on. The Sheet stays open over the new page. In our scratch app at 390 px the stock setup still had the Sheet open after tapping Customers, with the new page loaded behind it.
useSidebar() gives you isMobile and setOpenMobile. Call setOpenMobile(false) from each link's onClick when isMobile is true. On desktop the call is skipped, so the panel stays where the visitor left it. With that one handler the Sheet closed on the tap in our test, and the Customers page was on screen.
isActive, set from usePathname(), marks the current page in both the Sheet and the desktop panel.

components/app-sidebar.tsx

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Inbox, LayoutGrid, Settings, Users } from "lucide-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar";

const items = [
  { title: "Overview", url: "/overview", icon: LayoutGrid },
  { title: "Customers", url: "/customers", icon: Users },
  { title: "Inbox", url: "/inbox", icon: Inbox },
  { title: "Settings", url: "/settings", icon: Settings },
];

export function AppSidebar() {
  const pathname = usePathname();
  const { isMobile, setOpenMobile } = useSidebar();

  // The layout stays mounted when a Link changes the page, and so does the
  // provider's openMobile state. Close the sheet yourself on a phone.
  const closeOnPhone = () => {
    if (isMobile) setOpenMobile(false);
  };

  return (
    <Sidebar collapsible="icon">
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
          <SidebarMenu>
            {items.map((item) => (
              <SidebarMenuItem key={item.url}>
                <SidebarMenuButton asChild isActive={pathname === item.url} tooltip={item.title}>
                  <Link href={item.url} onClick={closeOnPhone}>
                    <item.icon />
                    <span>{item.title}</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}

useIsMobile and the md breakpoint

The hook in hooks/use-mobile.ts sets MOBILE_BREAKPOINT = 768, listens to the media query (max-width: 767px) and returns false until it has run once in the browser. So the server render and the first client render both take the desktop path. On a phone that path is hidden by md:block, so nothing flashes, but if you render something of your own from isMobile it will show the desktop version for a moment. Prefer md: classes for layout and keep isMobile for behaviour.
The 768 matches Tailwind's default md breakpoint (48rem). If you move md in your theme, move the hook with it. We set --breakpoint-md to 64rem and left the hook at 768: at 900 px wide the hook said desktop, the panel was hidden by md:block, and the trigger only flipped the desktop state. The sidebar was gone. With MOBILE_BREAKPOINT = 1024 the same 900 px window opened the Sheet.

app/globals.css

/* app/globals.css: you moved Tailwind's md breakpoint to 64rem */
@theme {
  --breakpoint-md: 64rem;
}

hooks/use-mobile.ts

// hooks/use-mobile.ts: keep the hook on the same number (64rem = 1024px)
const MOBILE_BREAKPOINT = 1024

When Reflow Sidebar fits the phone better

Stay with shadcn's Sidebar when it wraps many different pages, or when you need nested groups, a right-hand sidebar or the floating and inset variants. Reflow Sidebar does none of that, and its nav icons come from a set of six.
Reflow fits a dashboard route where the phone layout matters. Measured in our scratch app at 390 px: it started as a 76 px rail with the page beside it, the toggle opened it to 264 px over a dimmed backdrop, and picking Customers called onNavigate (the URL became /dashboard/customers) and folded it back to 76 px. The backdrop tap and Escape did the same. At 1440 px it started open at 264 px and Ctrl + B folded it to the rail. The page never scrolled sideways.
It takes your numbers as one object (app name, user, nav items, KPIs, chart series, table rows) and calls onNavigate with an item id, so routing stays in Next.js. Reflow Sidebar isn't a shadcn component and doesn't install with the shadcn CLI. You copy its files from the zip.

Reflow Sidebar's CSS next to shadcn components

Install

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

Props

data: every string and number on the screen (Northwind mock by default)
defaultCollapsed: true starts it as the 76 px rail; leave it undefined to let the piece pick (rail on phones, open on desktop)
onCollapsedChange: called with true when it folds to the rail (button, Ctrl/Cmd + B, backdrop tap)
onNavigate: called with the nav item id
autoplayDemo: false in a real app

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.

From the blog: shadcn Sidebar Icon Rail in Next.js: Keep the Collapsed State With a Cookie

Questions

Why does the shadcn sidebar disappear on mobile?

Below 768 px it renders as a Sheet that starts closed, and the desktop panel is hidden by md:block. You need a SidebarTrigger outside the Sidebar that stays visible on phones.

How do I close the shadcn sidebar when a link is clicked on mobile?

Get isMobile and setOpenMobile from useSidebar() and call setOpenMobile(false) in the link's onClick when isMobile is true. The layout stays mounted on navigation, so the Sheet won't close on its own.

What breakpoint does the shadcn sidebar use?

768 px, set as MOBILE_BREAKPOINT in hooks/use-mobile.ts. It matches Tailwind's default md. If you change md in your theme, change the hook to the same number.

Can the shadcn sidebar stay an icon rail on phones?

Not with the stock file. collapsible="icon" only applies to the desktop panel, and on phones Sidebar always returns the Sheet. You'd have to change the isMobile branch in sidebar.tsx yourself.

Is Reflow Sidebar a shadcn component?

No. It's a React component (Tailwind setup, Framer Motion) that you copy from the zip. It can run on its own route in a shadcn app, with the CSS edits from our collapse animation guide.

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.