Sidebar Navigation Blocks based on shadcn/ui
The sidebar is the part of an app people use every single day, so it is the part you do not want to rebuild from scratch every time. These blocks give you a working shadcn/ui sidebar you can drop into a React or Next.js app and ship the same afternoon: collapsible groups, active states, nested items, icons, and a footer for the account menu.
Each one is built on the shadcn sidebar primitive and Tailwind, so it already handles the boring parts you usually forget, like keyboard focus, mobile collapse, and remembering open/closed state. Copy the code straight off the page, or run one npx shadcn add command and it lands in your project wired up. Then make it yours: swap the nav items, change the width, restyle it to match your brand.
Pick a layout below that is closest to what you are building (a dashboard shell, an app nav, a settings panel) and start from there instead of an empty file.
Crypto dashboard sidebar with real-time cryptocurrency price tracking, collapsible navigation menus, and user profile section. Features Bitcoin, Ethereum, Litecoin, and Ripple price cards with percentage changes.
Creative Tim UI
- Overview
- Portfolio
- Yield Providers14
- Rewards Calculator
- Market Data
- Investments
BTCBitcoin$46,727.54+2.92%
ETHEthereum$4,307.22+1.02%
USDTTetherUS$1,846.11+2.92%
SOLSolana$183.73-0.12%
import CryptoSidebar from "@/components/creative-tim/blocks/crypto-sidebar"
export default function Page() {
return (
<div className="flex min-h-dvh items-center justify-center">
<CryptoSidebar />
</div>
)
}
Frequently asked questions
Are these shadcn sidebar blocks free to use?
Yes. You can copy the code for the free blocks straight from the page with no account, and use them in personal and commercial projects. A few advanced layouts are PRO, and those are clearly marked.
How do I add a sidebar to my project?
Two ways. Copy the code from the block and paste it into your app, or run the npx shadcn add command shown on the block to install it plus its dependencies in one step. Both drop a real, editable component into your codebase, not a black-box package.
Does the sidebar collapse on mobile?
Yes. These are built on the shadcn/ui sidebar primitive, which handles the mobile drawer, the collapse-to-icons state, and keyboard focus for you. You get that behaviour out of the box and can tune it.
Can I change the width, colors, and nav items?
All of it. The code lives in your project once you copy or install it, so you edit the markup and Tailwind classes directly. Change the width, swap icons, restyle the active state, and replace the menu items with your own routes.
Do these work with Next.js?
Yes, they are built for React and Next.js with the App Router in mind. They are plain components, so they also work in a Vite or Remix setup with Tailwind and shadcn/ui installed.