UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Starred Project Sidebar

blocklayout
Boilerplate repo

Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.

Installation

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-06.json
Manifest:https://uipkge.dev/r/svelte/sidebar-06.jsonInstalls to:src/lib/components/blocks/sidebar-06/

Variants

Loading interactive previews…

npm dependencies

@lucide/svelte

Files installed (2)

  • src/lib/components/blocks/sidebar-06/Sidebar06.svelte14 kB
    <script lang="ts">
  // Colorful, customised HRMS-style sidebar -- branded project tiles, badges,
  // status dots, and a user pill footer. Every row is spelled out inline so
  // you can swap colors and labels in place.
  import {
    Briefcase,
    Calendar,
    ChartLine,
    ChevronsUpDown,
    ClipboardList,
    Folder,
    GraduationCap,
    HeartPulse,
    HelpCircle,
    Inbox,
    LayoutDashboard,
    Monitor,
    Moon,
    Palette,
    Search,
    Send,
    Settings as SettingsIcon,
    Star,
    Sun,
    Users,
  } from '@lucide/svelte'
  import { Avatar, AvatarFallback } from '$lib/components/ui/avatar'
  import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuSeparator,
    DropdownMenuSub,
    DropdownMenuSubContent,
    DropdownMenuSubTrigger,
    DropdownMenuTrigger,
  } from '$lib/components/ui/dropdown-menu'
  import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarInput,
    SidebarMenu,
    SidebarMenuBadge,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarRail,
    SidebarSeparator,
    useSidebar,
  } from '$lib/components/ui/sidebar'

  const sidebar = useSidebar()

  // Local theme model (the Vue twin leans on an app-level useTheme
  // composable; SvelteKit apps own this in a lib of their own, so the block
  // ships a minimal localStorage-backed version — swap `setTheme` for yours).
  type Theme = 'light' | 'dark' | 'system'
  let theme = $state<Theme>('system')

  function applyTheme(value: Theme) {
    if (typeof document === 'undefined') return
    const dark =
      value === 'dark' || (value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
    document.documentElement.classList.toggle('dark', dark)
  }

  function setTheme(value: Theme) {
    theme = value
    try {
      localStorage.setItem('uipkge-theme', value)
    } catch {
      // private mode — theme still applies for this session
    }
    applyTheme(value)
  }

  $effect(() => {
    try {
      const stored = localStorage.getItem('uipkge-theme') as Theme | null
      if (stored === 'light' || stored === 'dark' || stored === 'system') theme = stored
    } catch {
      // ignore — fall back to system
    }
    applyTheme(theme)
  })
</script>

<Sidebar data-slot="sidebar-06" 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 shadow-sm 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>

    <div class="px-1 pt-1 group-data-[collapsible=icon]:hidden">
      <div class="relative">
        <Search class="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
        <SidebarInput type="text" placeholder="Search..." class="pr-12 pl-8" />
        <kbd
          class="bg-muted text-muted-foreground pointer-events-none absolute top-1/2 right-2 inline-flex h-5 -translate-y-1/2 items-center gap-0.5 rounded border px-1 font-mono text-xs font-medium select-none"
        >
          <span>&#8984;</span>F
        </kbd>
      </div>
    </div>
  </SidebarHeader>

  <SidebarContent>
    <SidebarGroup>
      <SidebarGroupContent>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive tooltip="Dashboard">
              <LayoutDashboard class="size-4" />
              <span>Dashboard</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Employees">
              <Users class="size-4" />
              <span>Employees</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Clients">
              <Briefcase class="size-4" />
              <span>Clients</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Projects">
              <Folder class="size-4" />
              <span>Projects</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>

    <SidebarSeparator />

    <SidebarGroup>
      <SidebarGroupLabel>Workforce</SidebarGroupLabel>
      <SidebarGroupContent>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Calendar">
              <Calendar class="size-4" />
              <span>Calendar</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Attendance">
              <ClipboardList class="size-4" />
              <span>Attendance</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Inbox">
              <Inbox class="size-4" />
              <span>Inbox</span>
            </SidebarMenuButton>
            <SidebarMenuBadge class="bg-destructive text-white">6</SidebarMenuBadge>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Analytics">
              <ChartLine class="size-4" />
              <span>Analytics</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>

    <SidebarSeparator />

    <SidebarGroup>
      <SidebarGroupLabel>Projects</SidebarGroupLabel>
      <SidebarGroupContent>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Shift Planner">
              <div
                class="bg-chart-1 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
              >
                <Folder class="size-3" />
              </div>
              <span>Shift Planner</span>
            </SidebarMenuButton>
            <SidebarMenuBadge class="text-warning">
              <Star class="size-3.5 fill-current" />
            </SidebarMenuBadge>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Training Portal">
              <div
                class="bg-chart-2 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
              >
                <GraduationCap class="size-3" />
              </div>
              <span>Training Portal</span>
            </SidebarMenuButton>
            <SidebarMenuBadge class="text-warning">
              <Star class="size-3.5 fill-current" />
            </SidebarMenuBadge>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Performance Hub">
              <div
                class="bg-chart-3 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
              >
                <HeartPulse class="size-3" />
              </div>
              <span>Performance Hub</span>
            </SidebarMenuButton>
            <SidebarMenuBadge class="text-warning">
              <Star class="size-3.5 fill-current" />
            </SidebarMenuBadge>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Expense Claims">
              <div
                class="bg-chart-4 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
              >
                <ChartLine class="size-3" />
              </div>
              <span>Expense Claims</span>
            </SidebarMenuButton>
            <SidebarMenuBadge class="text-warning">
              <Star class="size-3.5 fill-current" />
            </SidebarMenuBadge>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>

    <SidebarSeparator />

    <SidebarGroup>
      <SidebarGroupLabel>My team</SidebarGroupLabel>
      <SidebarGroupContent>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Olivia Bennett">
              <Avatar class="size-5">
                <AvatarFallback class="bg-chart-1/15 text-foreground text-xs">OB</AvatarFallback>
              </Avatar>
              <span>Olivia Bennett</span>
            </SidebarMenuButton>
            <SidebarMenuBadge>
              <span class="bg-destructive size-1.5 rounded-full"></span>
            </SidebarMenuBadge>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Daniel Morgan">
              <Avatar class="size-5">
                <AvatarFallback class="bg-chart-2/15 text-foreground text-xs">DM</AvatarFallback>
              </Avatar>
              <span>Daniel Morgan</span>
            </SidebarMenuButton>
            <SidebarMenuBadge>
              <span class="bg-warning size-1.5 rounded-full"></span>
            </SidebarMenuBadge>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Ethan Reynolds">
              <Avatar class="size-5">
                <AvatarFallback class="bg-chart-3/15 text-foreground text-xs">ER</AvatarFallback>
              </Avatar>
              <span>Ethan Reynolds</span>
            </SidebarMenuButton>
            <SidebarMenuBadge>
              <span class="bg-success size-1.5 rounded-full"></span>
            </SidebarMenuBadge>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>

    <SidebarSeparator />

    <SidebarGroup>
      <SidebarGroupLabel>Administration</SidebarGroupLabel>
      <SidebarGroupContent>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Settings">
              <SettingsIcon class="size-4" />
              <span>Settings</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton tooltip="Help center">
              <HelpCircle class="size-4" />
              <span>Help center</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  </SidebarContent>

  <SidebarFooter>
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger>
            {#snippet child({ props })}
              <SidebarMenuButton
                size="lg"
                {...props}
                class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center"
              >
                <div class="relative shrink-0">
                  <Avatar class="h-8 w-8 rounded-lg group-data-[collapsible=icon]:size-6">
                    <AvatarFallback class="bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs"
                      >JC</AvatarFallback
                    >
                  </Avatar>
                  <span
                    class="bg-destructive ring-sidebar absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2"
                  ></span>
                </div>
                <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                  <span class="truncate font-medium">James Carter</span>
                  <span class="text-muted-foreground truncate text-xs">Admin</span>
                </div>
                <ChevronsUpDown class="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
              </SidebarMenuButton>
            {/snippet}
          </DropdownMenuTrigger>
          <DropdownMenuContent
            class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            side={sidebar.isMobile ? 'bottom' : 'right'}
            align="end"
            sideOffset={4}
          >
            <DropdownMenuLabel>James Carter</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem><Send class="size-4" /> Invite teammates</DropdownMenuItem>
            <DropdownMenuItem><SettingsIcon class="size-4" /> Workspace settings</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <Palette class="size-4" />
                Theme
                <span class="text-muted-foreground ml-auto text-xs capitalize">{theme}</span>
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent class="min-w-36">
                <DropdownMenuRadioGroup value={theme} onValueChange={(v) => setTheme(v as Theme)}>
                  <DropdownMenuRadioItem value="light"><Sun class="size-4" /> Light</DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="dark"><Moon class="size-4" /> Dark</DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="system"><Monitor class="size-4" /> System</DropdownMenuRadioItem>
                </DropdownMenuRadioGroup>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarFooter>

  <SidebarRail />
</Sidebar>
  • src/routes/sidebar-06-demo/+page.svelte1 kB

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