Shadcn.io is not affiliated with official shadcn/ui
Sidebar Custom Width
A React sidebar with custom width configuration, built with Next.js, TypeScript, shadcn/ui Sidebar components, and Tailwind CSS. Features CSS variable override for width customization.
Build a React and Next.js sidebar with custom width dimensions using TypeScript, shadcn/ui Sidebar components, and Tailwind CSS. Uses SidebarProvider with a style prop to override the --sidebar-width CSS variable, setting a wider 19rem sidebar instead of the default 16rem. Content area adapts automatically with Tailwind CSS flexbox. Ideal for Next.js applications with longer navigation labels, nested structures, or sidebars displaying additional metadata.
Related Components
Controlled State Sidebar
Sidebar with externally controlled open state
Secondary Navigation Sidebar
Sidebar with primary and secondary nav sections
Sticky Header Sidebar
Sidebar with sticky content area header
Badges Sidebar
Sidebar with badge counts on menu items
Right Side Sidebar
Sidebar positioned on the right side
Offcanvas Sidebar
Sidebar that slides completely off screen
FAQ
Was this page helpful?
Sign in to leave feedback.
Crm Dashboard
A React sidebar for CRM platforms with nested navigation, built with Next.js, TypeScript, shadcn/ui Sidebar and SidebarMenuSub components, and Tailwind CSS. Features pipeline, activities, and reports.
Customer Support
A React sidebar for help desk platforms with badge counts, built with Next.js, TypeScript, shadcn/ui Sidebar components, and Tailwind CSS. Features conversations, contacts, and support tools.