Icon Rail Sidebar

blocklayout

Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer. Pure template, no props -- edit Sidebar01.svelte to change routes and NavUser.svelte to wire your auth session. Pair with SidebarProvider + SidebarInset for the full admin shell.

Installation

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

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

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

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

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

Variants

Loading interactive previews…

npm dependencies

@lucide/svelte

Includes

sidebar avatar dropdown-menu

Files installed (3)

src/lib/components/blocks/sidebar-01/Sidebar01.svelte4 kB

<script lang="ts">
  // Edit this file to change brand, navigation, and the user dropdown.
  // Every menu item is spelled out below -- copy, remove, or rename rows directly.
  import { BarChart3, BookOpen, FileText, Files, History, LayoutDashboard, Table as TableIcon } from '@lucide/svelte'
  import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarRail,
  } from '$lib/components/ui/sidebar'
  import NavUser from './NavUser.svelte'
</script>

<Sidebar data-slot="sidebar-01" collapsible="icon">
  <SidebarHeader>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton size="lg" tooltip="uipkge" class="group-data-[collapsible=icon]:!justify-center">
          <div
            class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:size-6"
          >
            <svg
              viewBox="0 0 24 24"
              class="size-4 group-data-[collapsible=icon]:size-3.5"
              fill="currentColor"
              aria-hidden="true"
            >
              <rect x="2" y="2" width="9" height="9" rx="1.5" />
              <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
              <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
              <rect x="13" y="13" width="9" height="9" rx="1.5" />
            </svg>
          </div>
          <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
            <span class="font-display truncate font-bold">uipkge</span>
            <span class="text-muted-foreground truncate text-xs">uipkge.dev</span>
          </div>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarHeader>

  <SidebarContent>
    <SidebarGroup>
      <SidebarGroupLabel>Workspace</SidebarGroupLabel>
      <SidebarGroupContent>
        <SidebarMenu>
          <SidebarMenuItem>
            <!-- TODO: wrap in an <a href="..."> and bind isActive to your route -->
            <SidebarMenuButton isActive tooltip="Dashboard">
              <LayoutDashboard class="size-4" />
              <span>Dashboard</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Data tables">
              <TableIcon class="size-4" />
              <span>Data tables</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Forms">
              <FileText class="size-4" />
              <span>Forms</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Charts">
              <BarChart3 class="size-4" />
              <span>Charts</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Pages">
              <Files class="size-4" />
              <span>Pages</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>

    <SidebarGroup>
      <SidebarGroupLabel>Resources</SidebarGroupLabel>
      <SidebarGroupContent>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Docs">
              <BookOpen class="size-4" />
              <span>Docs</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Changelog">
              <History class="size-4" />
              <span>Changelog</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  </SidebarContent>

  <SidebarFooter>
    <NavUser />
  </SidebarFooter>

  <SidebarRail />
</Sidebar>

src/lib/components/blocks/sidebar-01/NavUser.svelte5.2 kB

src/routes/sidebar-01-demo/+page.svelte1.1 kB

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

Change language