Team Switcher Sidebar

blocklayout

Full-featured app sidebar -- collapsible="icon" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.

Installation

$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-02.json

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-02.json

$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-02.json

$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-02.json

Manifest:https://uipkge.dev/r/svelte/sidebar-02.jsonInstalls to:src/lib/components/blocks/sidebar-02/

Variants

Loading interactive previews…

npm dependencies

@lucide/svelte

Includes

sidebar avatar collapsible dropdown-menu

Used by

dashboard-layout

[data-used-by-list] { max-height: none !important; overflow: visible !important; } [data-used-by-toggle] { display: none !important; }

Files installed (8)

src/lib/components/blocks/sidebar-02/Sidebar02.svelte3.1 kB

<script lang="ts">
  import type { Component } from 'svelte'
  import { BookOpen, Bot, Frame, LifeBuoy, Map, PieChart, Send, Settings2, SquareTerminal } from '@lucide/svelte'
  import NavMain from './NavMain.svelte'
  import NavProjects from './NavProjects.svelte'
  import NavSecondary from './NavSecondary.svelte'
  import NavUser from './NavUser.svelte'
  import TeamSwitcher from './TeamSwitcher.svelte'
  import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from '$lib/components/ui/sidebar'

  const data = {
    user: {
      name: 'shadcn',
      email: '[email protected]',
    },
    navMain: [
      {
        title: 'Playground',
        url: '#',
        icon: SquareTerminal as Component,
        isActive: true,
        items: [
          {
            title: 'History',
            url: '#',
          },
          {
            title: 'Starred',
            url: '#',
          },
          {
            title: 'Settings',
            url: '#',
          },
        ],
      },
      {
        title: 'Models',
        url: '#',
        icon: Bot as Component,
        items: [
          {
            title: 'Genesis',
            url: '#',
          },
          {
            title: 'Explorer',
            url: '#',
          },
          {
            title: 'Quantum',
            url: '#',
          },
        ],
      },
      {
        title: 'Documentation',
        url: '#',
        icon: BookOpen as Component,
        items: [
          {
            title: 'Introduction',
            url: '#',
          },
          {
            title: 'Get Started',
            url: '#',
          },
          {
            title: 'Tutorials',
            url: '#',
          },
          {
            title: 'Changelog',
            url: '#',
          },
        ],
      },
      {
        title: 'Settings',
        url: '#',
        icon: Settings2 as Component,
        items: [
          {
            title: 'General',
            url: '#',
          },
          {
            title: 'Team',
            url: '#',
          },
          {
            title: 'Billing',
            url: '#',
          },
          {
            title: 'Limits',
            url: '#',
          },
        ],
      },
    ],
    navSecondary: [
      {
        title: 'Support',
        url: '#',
        icon: LifeBuoy as Component,
      },
      {
        title: 'Feedback',
        url: '#',
        icon: Send as Component,
      },
    ],
    projects: [
      {
        name: 'Design Engineering',
        url: '#',
        icon: Frame as Component,
      },
      {
        name: 'Sales & Marketing',
        url: '#',
        icon: PieChart as Component,
      },
      {
        name: 'Travel',
        url: '#',
        icon: Map as Component,
      },
    ],
  }
</script>

<Sidebar data-slot="sidebar-02" collapsible="icon">
  <SidebarHeader>
    <TeamSwitcher />
  </SidebarHeader>
  <SidebarContent>
    <NavMain items={data.navMain} />
    <NavProjects projects={data.projects} />
    <NavSecondary items={data.navSecondary} class="mt-auto" />
  </SidebarContent>
  <SidebarFooter>
    <NavUser user={data.user} />
  </SidebarFooter>
  <SidebarRail />
</Sidebar>

src/lib/components/blocks/sidebar-02/TeamSwitcher.svelte3.6 kB

src/lib/components/blocks/sidebar-02/NavMain.svelte2.6 kB

src/lib/components/blocks/sidebar-02/NavProjects.svelte2.9 kB

src/lib/components/blocks/sidebar-02/NavSecondary.svelte1.1 kB

src/lib/components/blocks/sidebar-02/NavUser.svelte4.9 kB

src/lib/components/blocks/sidebar-02/UipkgeMark.svelte0.6 kB

src/routes/sidebar-02-demo/+page.svelte1 kB

Raw manifest:https://uipkge.dev/r/svelte/sidebar-02.json

Change language