Sidebar

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

CLI
Manual

Install the sidebar components

npx shadcn-svelte@next add sidebar

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);
}

Copy and paste the component source

Copy and paste the component source code into your project.

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.

Get Started

Components

Customization

CLI

Advanced

Resources

Installation

Structure

Usage

Links

​Installation

​Structure

​Usage

​Links

Installation

Structure

Usage

Links