ShadCN Sidebar component -- Implementation (with code)

[MatthewNicastro]

ShadCN Sidebar converted to Angular with Spartan components

Currently trying to learn angular and stumbled across spartan, love the initiative. Wanted to use the ShadCN side bar inside one of my side projects so decided to just try and implement it myself (I am no expert at angular so it is probably very poo). I am putting this here incase someone else wants to use this or actually try and integrate this properly (I have attached a simple example for reference but it should have full feature coverage I believe).

Screen.Recording.2025-02-26.at.3.41.50.AM.mov

NOTE: For some reason recording did not capture the cursor changes. Also demo does not show full functionality.

Installation

NOTE This implementation used tailwind v4 so step for for the installation might be different for you if you are using tailwind v3 (but should still be easy).

1. Download the source ui-sidebar-helm.zip
2. Unzip and put inside the libs folder
3. Add the following to the tsconfig.json and vite.config.ts (if using vite, i'm using analog so I needed to add)

// tsconfig.json
"@spartan-ng/ui-sidebar-helm": ["./libs/ui/ui-sidebar-helm/src/index.ts"],
// vite.config.ts
'@spartan-ng/ui-sidebar-helm': resolve(__dirname, './libs/ui/ui-sidebar-helm/src/index.ts'),

4. Add the sidebar styles to the styles.css (tailwind v4)

--sidebar-width: 16rem;
--sidebar-width-mobile: 18rem;
--sidebar-width-icon: 3rem;

/* Light theme, add to :root */
--sidebar-background: hsl(0 0% 98%);
--sidebar-foreground: hsl(240 5.3% 26.1%);
--sidebar-primary: hsl(240 5.9% 10%);
--sidebar-primary-foreground: hsl(0 0% 98%);
--sidebar-accent: hsl(240 4.8% 95.9%);
--sidebar-accent-foreground: hsl(240 5.9% 10%);
--sidebar-border: hsl(220 13% 91%);
--sidebar-ring: hsl(217.2 91.2% 59.8%);

/* Dark theme, add to .dark */
--sidebar-background: hsl(240 5.9% 10%);
--sidebar-foreground: hsl(240 4.8% 95.9%);
--sidebar-primary: hsl(224.3 76.3% 48%);
--sidebar-primary-foreground: hsl(0 0% 100%);
--sidebar-accent: hsl(240 3.7% 15.9%);
--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
--sidebar-border: hsl(240 3.7% 15.9%);
--sidebar-ring: hsl(217.2 91.2% 59.8%);

/* add to @theme inline */
--color-sidebar: var(--sidebar-background);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--shadow-sidebar-border: 0 0 0 1px var(--sidebar-border);
--shadow-sidebar-accent: 0 0 0 1px var(--sidebar-accent); 

Here is my full tailwind v4 css file

@import "tailwindcss";
@import "@angular/cdk/overlay-prebuilt.css";

:root {
  --sidebar-width: 16rem;
  --sidebar-width-mobile: 18rem;
  --sidebar-width-icon: 3rem;
  --font-sans: "Inter", sans-serif;
  --radius: hsl(0.5rem);
  /* Colors */
  --background: hsl(0 0% 100%);
  --foreground: hsl(240 10% 3.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(240 10% 3.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(240 10% 3.9%);
  --primary: hsl(240 5.9% 10%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(240 4.8% 95.9%);
  --secondary-foreground: hsl(240 5.9% 10%);
  --muted: hsl(240 4.8% 95.9%);
  --muted-foreground: hsl(240 3.8% 46.1%);
  --accent: hsl(240 4.8% 95.9%);
  --accent-foreground: hsl(240 5.9% 10%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(240 5.9% 90%);
  --input: hsl(240 5.9% 90%);
  --ring: hsl(240 5.9% 10%);
  --sidebar-background: hsl(0 0% 98%);
  --sidebar-foreground: hsl(240 5.3% 26.1%);
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(240 4.8% 95.9%);
  --sidebar-accent-foreground: hsl(240 5.9% 10%);
  --sidebar-border: hsl(220 13% 91%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
  color-scheme: light;
}

.dark {
  --background: hsl(240 10% 3.9%);
  --foreground: hsl(0 0% 98%);
  --card: hsl(240 10% 3.9%);
  --card-foreground: hsl(0 0% 98%);
  --popover: hsl(240 10% 3.9%);
  --popover-foreground: hsl(0 0% 98%);
  --primary: hsl(0 0% 98%);
  --primary-foreground: hsl(240 5.9% 10%);
  --secondary: hsl(240 3.7% 15.9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(240 3.7% 15.9%);
  --muted-foreground: hsl(240 5% 64.9%);
  --accent: hsl(240 3.7% 15.9%);
  --accent-foreground: hsl(0 0% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(240 3.7% 15.9%);
  --input: hsl(240 3.7% 15.9%);
  --ring: hsl(240 4.9% 83.9%);
  --sidebar-background: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
  color-scheme: dark;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar-background);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --shadow-sidebar-border: 0 0 0 1px var(--sidebar-border);
  --shadow-sidebar-accent: 0 0 0 1px var(--sidebar-accent);
  --radius: var(--radius);
}

/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.

If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  * {
    @apply border-border;
  }
}

NOTE: In installation instructions it says to add @import '@spartan-ng/brain/hlm-tailwind-preset.css'; to the imports in the css file (for tailwind v4) but for some reason this breaks all styles so omitted and it worked.

For tailwind v3 you would just need to add these

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        sidebar: 'var(--sidebar-background)',
        'sidebar-foreground': 'var(--sidebar-foreground)',
        'sidebar-primary': 'var(--sidebar-primary)',
        'sidebar-primary-foreground': 'var(--sidebar-primary-foreground)',
        'sidebar-accent': 'var(--sidebar-accent)',
        'sidebar-accent-foreground': 'var(--sidebar-accent-foreground)',
        'sidebar-border': 'var(--sidebar-border)',
        'sidebar-ring': 'var(--sidebar-ring)',
      },
      boxShadow: {
        'sidebar-border': '0 0 0 1px var(--sidebar-border)',
        'sidebar-accent': '0 0 0 1px var(--sidebar-accent)',
      },
    },
  },
  plugins: [],
};

NOTE: you might also need to properly add the vars to the css style sheet (i.e. if you are using css variables you need to add the proper hsl).

--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));

Usage

Too lazy to document so here is an example usage (If this discussion gets enough traction will actually spend the effort to properly document). Since its a pretty exact port of the ShadCN the docs from ShadCN React implementation are usable here.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import {
  lucideHouse,
  lucideInbox,
  lucideCalendar,
  lucideSearch,
  lucideSettings,
  lucideMenu,
  lucideEllipsis,
} from '@ng-icons/lucide';
import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
import { BrnSeparatorComponent } from '@spartan-ng/brain/separator';
import {
  HlmSidebarComponent,
  HlmSidebarContentDirective,
  HlmSidebarFooterDirective,
  HlmSidebarGroupDirective,
  HlmSidebarGroupActionDirective,
  HlmSidebarGroupContentDirective,
  HlmSidebarGroupLabelDirective,
  HlmSidebarHeaderDirective,
  HlmSidebarInputDirective,
  // HlmSidebarInsetDirective,
  HlmSidebarMenuDirective,
  HlmSidebarMenuActionDirective,
  HlmSidebarMenuBadgeDirective,
  HlmSidebarMenuButtonDirective,
  HlmSidebarMenuItemDirective,
  HlmSidebarMenuSubDirective,
  HlmSidebarMenuSubButtonDirective,
  HlmSidebarRailDirective,
  HlmSidebarSeparatorDirective,
  HlmSidebarTriggerDirective,
} from '@spartan-ng/ui-sidebar-helm';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    HlmSidebarComponent,
    HlmSidebarHeaderDirective,
    HlmSidebarContentDirective,
    HlmSidebarFooterDirective,
    HlmSidebarMenuDirective,
    HlmSidebarMenuBadgeDirective,
    HlmSidebarMenuItemDirective,
    HlmSidebarMenuButtonDirective,
    HlmSidebarTriggerDirective,
    HlmSidebarRailDirective,
    HlmIconDirective,
    HlmSidebarGroupDirective,
    HlmSidebarGroupLabelDirective,
    HlmSidebarGroupContentDirective,
    HlmSidebarSeparatorDirective,
    BrnSeparatorComponent,
    HlmSidebarGroupActionDirective,
    HlmSidebarInputDirective,
    // HlmSidebarInsetDirective,
    HlmSidebarMenuActionDirective,
    HlmSidebarMenuSubDirective,
    HlmSidebarMenuSubButtonDirective,
    NgIcon,
  ],
  providers: [
    provideIcons({
      lucideHouse,
      lucideInbox,
      lucideCalendar,
      lucideSearch,
      lucideSettings,
      lucideMenu,
      lucideEllipsis,
    }),
  ],
  template: `
    <div class="flex h-screen">
      <hlm-sidebar side="left">
        <div hlmSidebarHeader>
          <h1 class="text-2xl font-bold">My app</h1>
          <div hlmSidebarGroup>
            <div hlmSidebarGroupContent class="relative">
              <input hlmSidebarInput placeholder="Search" class="pl-8" />
              <ng-icon
                hlm
                name="lucideSearch"
                size="sm"
                class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50"
              ></ng-icon>
            </div>
          </div>
        </div>
        <div hlmSidebarContent>
          <div hlmSidebarGroup>
            <div hlmSidebarGroupLabel>Application</div>
            <button hlmSidebarGroupAction>
              <ng-icon hlm name="lucideEllipsis" size="sm"></ng-icon>
            </button>

            <div hlmSidebarGroupContent>
              <ul hlmSidebarMenu>
                <li hlmSidebarMenuItem>
                  <button
                    hlmSidebarMenuButton
                    aria-describedby="Home"
                    [isActive]="true"
                  >
                    <ng-icon hlm name="lucideHouse" size="sm"></ng-icon>
                    <span>Home</span>
                  </button>
                  <ul hlmSidebarMenuSub>
                    <li>
                      <a hlmSidebarMenuSubButton>
                        <ng-icon hlm name="lucideHouse" size="sm"></ng-icon>
                        <span>Home</span>
                      </a>
                    </li>
                    <li>
                      <a hlmSidebarMenuSubButton>
                        <ng-icon hlm name="lucideHouse" size="sm"></ng-icon>
                        <span>Home</span>
                      </a>
                    </li>
                  </ul>
                </li>

                <!-- Home -->
                <li hlmSidebarMenuItem>
                  <button hlmSidebarMenuButton aria-describedby="Home">
                    <ng-icon hlm name="lucideHouse" size="sm"></ng-icon>
                    <span>Home</span>
                  </button>
                  <button hlmSidebarMenuAction aria-describedby="Home">
                    <ng-icon hlm name="lucideEllipsis" size="sm"></ng-icon>
                  </button>
                </li>

                <!-- Inbox -->
                <li hlmSidebarMenuItem>
                  <button
                    hlmSidebarMenuButton
                    tooltip="Inbox"
                    aria-describedby="Inbox"
                  >
                    <ng-icon hlm name="lucideInbox" size="sm"></ng-icon>
                    <span>Inbox</span>
                  </button>
                </li>

                <!-- Calendar -->
                <li hlmSidebarMenuItem>
                  <button
                    hlmSidebarMenuButton
                    tooltip="Calendar"
                    aria-describedby="Calendar"
                  >
                    <ng-icon hlm name="lucideCalendar" size="sm"></ng-icon>
                    <span>Calendar</span>
                  </button>
                </li>
                <brn-separator hlmSidebarSeparator />

                <!-- Search -->
                <li hlmSidebarMenuItem>
                  <button
                    hlmSidebarMenuButton
                    tooltip="Search"
                    aria-describedby="Search"
                  >
                    <ng-icon hlm name="lucideSearch" size="sm"></ng-icon>
                    <span>Search</span>
                    <div hlmSidebarMenuBadge>10</div>
                  </button>
                </li>

                <!-- Settings -->
                <li hlmSidebarMenuItem>
                  <button
                    hlmSidebarMenuButton
                    tooltip="Settings"
                    aria-describedby="Settings"
                  >
                    <ng-icon hlm name="lucideSettings" size="sm"></ng-icon>
                    <span>Settings</span>
                  </button>
                </li>
              </ul>
            </div>
          </div>
          <div hlmSidebarGroup collapsible="icon">
            <div hlmSidebarGroupLabel>Application1</div>
            <div hlmSidebarGroupContent>
              <ul hlmSidebarMenu>
                <!-- Home -->
                <li hlmSidebarMenuItem>
                  <button
                    hlmSidebarMenuButton
                    tooltip="Home"
                    aria-describedby="Home"
                  >
                    <ng-icon hlm name="lucideHouse" size="sm"></ng-icon>
                    <span>Home</span>
                  </button>
                </li>

                <!-- Inbox -->
                <li hlmSidebarMenuItem>
                  <button
                    hlmSidebarMenuButton
                    tooltip="Inbox"
                    aria-describedby="Inbox"
                  >
                    <ng-icon hlm name="lucideInbox" size="sm"></ng-icon>
                    <span>Inbox</span>
                  </button>
                </li>

                <!-- Calendar -->
                <li hlmSidebarMenuItem>
                  <button
                    hlmSidebarMenuButton
                    tooltip="Calendar"
                    aria-describedby="Calendar"
                  >
                    <ng-icon hlm name="lucideCalendar" size="sm"></ng-icon>
                    <span>Calendar</span>
                  </button>
                </li>

                <!-- Search -->
                <li hlmSidebarMenuItem>
                  <button
                    hlmSidebarMenuButton
                    tooltip="Search"
                    aria-describedby="Search"
                  >
                    <ng-icon hlm name="lucideSearch" size="sm"></ng-icon>
                    <span>Search</span>
                  </button>
                </li>

                <!-- Settings -->
                <li hlmSidebarMenuItem>
                  <button
                    hlmSidebarMenuButton
                    tooltip="Settings"
                    aria-describedby="Settings"
                  >
                    <ng-icon hlm name="lucideSettings" size="sm"></ng-icon>
                    <span>Settings</span>
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div hlmSidebarFooter>
          <button
            hlmSidebarMenuButton
            tooltip="Settings"
            aria-describedby="Settings"
          >
            <ng-icon hlm name="lucideSettings" size="sm"></ng-icon>
            <span>Settings</span>
          </button>
        </div>

        <!-- Rail for resizing -->
        <button hlmSidebarRail></button>
      </hlm-sidebar>
      <button hlmSidebarTrigger>
        <ng-icon hlm name="lucideMenu" size="sm"></ng-icon>
      </button>
      <!-- <main hlmSidebarInset></main> -->
      <!-- Main content -->
      <div class="flex flex-col items-center justify-center h-screen w-full">
        <h1 class="text-2xl font-bold">Hello World</h1>
      </div>
    </div>
  `,
})
export default class HomeComponent {}

There was one major hack that needed to be implemented in order to get this working. In the sidebar component needed to add

export class HlmSidebarComponent implements AfterViewInit {
  @ViewChild('trigger', { static: false })
  trigger!: ElementRef<HTMLButtonElement>;
  private sheetReady = signal(false);
  public readonly side = input<'left' | 'right'>('left');
  public readonly variant = input<'sidebar' | 'floating' | 'inset'>('sidebar');
  public readonly collapsible = input<'offcanvas' | 'icon' | 'none'>(
    'offcanvas'
  );
  public readonly userClass = input<ClassValue>('', { alias: 'class' });

  constructor(public sidebarService: HlmSidebarService) {
    effect(() => {
      if (
        this.sheetReady() &&
        this.sidebarService.isMobile() &&
        this.sidebarService.openMobile()
      ) {
        queueMicrotask(() => {
          this.trigger.nativeElement.click(); // << HERE
          this.sidebarService.setOpenMobile(false); // << HERE
        });
      }
    });
  }

  ngAfterViewInit() {
    this.sheetReady.set(true);
  }

  protected _cn(...args: ClassValue[]): string {
    return hlm(...args);
  }
}

This way the sheet can be triggered via an external source since the sheet seems to require the trigger to live as a child. If anyone has a better solve please LMK!

[MatthewNicastro]

If Any one is interested here is v2 of the side bar with improved logic for triggering the side bar in mobile mode
ui-sidebar-helm.zip

[goetzrobin]

Really awesome stuff! Would you be interested in adding this to the documentation as an example?

[MatthewNicastro]

hey @goetzrobin just finished one of my side projects now I'm jumping onto the one that uses Analogjs (where I implemented the component). Do you want me to create a PR with this component?

[goetzrobin]

Hey there sorry I had missed this! Happy to help you get a PR going for this!