unknown

Learn to create a reusable and responsive sidebar in Next.js using ShadCN UI components. The guide walks through setting up a fresh Next.js project, installing ShadCN, and integrating various components like buttons, cards, and badges. It also covers how to create separate components for mobile and desktop views and implements a dark mode feature for dynamic theming.

How To Build a Reusable Sidebar (Next.js, Shadcn ui)

Join the Horde. ⚔️

We dig into tech, software engineering life, and solid best practices.

TypeScript is our weapon of choice, frontend, backend, we handle it all.

Jump in.

Horde

Learn the fastest way to set up a proper sidebar in Next.js with Shadcn in this quick tutorial. This sidebar is fully responsive, and it's working both in light and dark mode.

Learn the fastest way to set up a proper sidebar in Next.js with Shadcn in this quick tutorial. This sidebar is fully responsive, and it's working both in light and dark mode.

Thank you for your help. However, I’ve found that using Framer is much faster for the same task. While I enjoy coding, it can be time-consuming when I have to complete work for someone else. Nevertheless, I can still use flex-box with coding. Thank you.

Great work again! You are very active. Shadcn announced he will share a new responsive sidebar with a tree view. Will you update this video after that release?

Oho nice tutorial <a href="https://app.daily.dev/orcdev" data-mention-id="pWEhX8JhjnUQB2l4CNVSW" data-mention-username="orcdev">@orcdev</a>, recently the art of mastering sidebar implementation has been a headache for me, especially the part where many menu items are involved and the component still has to be responsive.

Big up schadcn, love their philosophy and what they’re doing over there