--- title: October 2024 - Sidebar | daily.dev description: shadcn introduced sidebar.tsx, a new set of 25 composable components designed as a foundation for building all kinds of sidebar layouts. The component works... canonical: https://daily.dev/posts/october-2024---sidebar-ywubeqebh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: October 2024 - Sidebar | daily.dev og:description: shadcn introduced sidebar.tsx, a new set of 25 composable components designed as a foundation for building all kinds of sidebar layouts. The component works... og:url: https://daily.dev/posts/october-2024---sidebar-ywubeqebh og:image: https://api.daily.dev/og/posts/YWuBeQEbH.png og:image:alt: October 2024 - Sidebar og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # October 2024 - Sidebar **[The Foundation for your Design System - shadcn/ui](https://daily.dev/sources/shadcn-ui)** · 1 min read · 0 upvotes · 0 comments ## Summary shadcn introduced sidebar.tsx, a new set of 25 composable components designed as a foundation for building all kinds of sidebar layouts. The component works with Next.js, Remix, Vite, and Laravel, and follows shadcn's copy-paste-into-your-project philosophy rather than being an installable package. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I build a sidebar with shadcn/ui? Use sidebar.tsx, a component introduced by shadcn that is built from 25 smaller composable components to support many sidebar layout types. It works with Next.js, Remix, Vite, and Laravel, and follows shadcn's typical approach of copying the component source directly into a project rather than installing it as a dependency. _Developers wiring up app layouts can track new shadcn/ui component releases like this on daily.dev._ ## Similar posts on daily.dev - [How to Build an Admin Dashboard Sidebar with shadcn/ui and Base UI](https://daily.dev/posts/how-to-build-an-admin-dashboard-sidebar-with-shadcn-ui-and-base-ui-gbxkpsjck) · freeCodeCamp · 16 upvotes · 0 comments - [Shadcn UI adoption guide: Overview, examples, and alternatives](https://daily.dev/posts/shadcn-ui-adoption-guide-overview-examples-and-alternatives-0pr6z5eli) · LogRocket · 1 upvotes · 0 comments - [How to Build an Open Source SaaS Landing Page Template with shadcn/ui](https://daily.dev/posts/how-to-build-an-open-source-saas-landing-page-template-with-shadcn-ui-skzpt3hrd) · freeCodeCamp · 7 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#nextjs](https://daily.dev/tags/nextjs), [#tailwind-css](https://daily.dev/tags/tailwind-css), [#shadcn](https://daily.dev/tags/shadcn) [View this post on daily.dev](https://daily.dev/posts/october-2024---sidebar-ywubeqebh) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"October 2024 - Sidebar","url":"https://daily.dev/posts/october-2024---sidebar-ywubeqebh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/october-2024---sidebar-ywubeqebh"},"datePublished":"2026-08-23T12:17:41.438Z","dateModified":"2026-08-23T12:24:20.440Z","description":"shadcn introduced sidebar.tsx, a new set of 25 composable components designed as a foundation for building all kinds of sidebar layouts. The component works...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/0ed8149a50a90a99e07f6b640b42b929?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/0ed8149a50a90a99e07f6b640b42b929?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"The Foundation for your Design System - shadcn/ui","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"The Foundation for your Design System - shadcn/ui","logo":"https://media.daily.dev/image/upload/s--GiOq6F7Y--/f_auto,q_auto/v1787487441/logos/shadcn-ui?_a=BAMAMicg0","url":"https://daily.dev/sources/shadcn-ui"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/october-2024---sidebar-ywubeqebh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,nextjs,tailwind-css,shadcn","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"The Foundation for your Design System - shadcn/ui","item":"https://daily.dev/sources/shadcn-ui"},{"@type":"ListItem","position":3,"name":"October 2024 - Sidebar"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/october-2024---sidebar-ywubeqebh#faq","mainEntity":[{"@type":"Question","name":"How do I build a sidebar with shadcn/ui?","acceptedAnswer":{"@type":"Answer","text":"Use sidebar.tsx, a component introduced by shadcn that is built from 25 smaller composable components to support many sidebar layout types. It works with Next.js, Remix, Vite, and Laravel, and follows shadcn's typical approach of copying the component source directly into a project rather than installing it as a dependency. Developers wiring up app layouts can track new shadcn/ui component releases like this on daily.dev."}}]} ```