Skip to main content
Sidebars are one of the most complex components to build. They are central to any application and often contain a lot of moving parts. Shad doesn’t like building sidebars, so he built 30+ of them with all kinds of configurations. The core components have been extracted into sidebar-*.svelte files, and you can use them in your own projects. We now have a solid foundation to build on top of. Composable. Themeable. Customizable. Browse the Blocks Library.

​
Installation

1

Install the sidebar components

npx shadcn-svelte@next add sidebar
2

Add colors to your CSS file

We’ll go over the colors later in the theming section.
src/routes/layout.css
:root {
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
}

​
Structure

A Sidebar component is composed of the following parts:
  • Sidebar.Provider - Handles collapsible state.
  • Sidebar.Root - The sidebar container.
  • Sidebar.Header and Sidebar.Footer - Sticky at the top and bottom of the sidebar.
  • Sidebar.Content - Scrollable content.
  • Sidebar.Group - Section within the Sidebar.Content.
  • Sidebar.Trigger - Trigger for the Sidebar.

​
Usage

src/routes/+layout.svelte
<script lang="ts">
  import * as Sidebar from "$lib/components/ui/sidebar/index.js";
  import AppSidebar from "$lib/components/app-sidebar.svelte";

  let { children } = $props();
</script>

<Sidebar.Provider>
  <AppSidebar />
  <main>
    <Sidebar.Trigger />
    {@render children?.()}
  </main>
</Sidebar.Provider>
src/lib/components/app-sidebar.svelte
<script lang="ts">
  import * as Sidebar from "$lib/components/ui/sidebar/index.js";
</script>

<Sidebar.Root>
  <Sidebar.Header />
  <Sidebar.Content>
    <Sidebar.Group />
    <Sidebar.Group />
  </Sidebar.Content>
  <Sidebar.Footer />
</Sidebar.Root>
For complete documentation on all components, props, and advanced usage, visit the shadcn-svelte documentation.

​
Links

Build docs developers (and LLMs) love

Get started for freeTalk to us