Sidebar
Application sidebar navigation.
import { Bot, LayoutDashboard, Users } from "lucide-react";
import { MhAvatar } from "@/components/ui/mh-avatar";import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarLogo, SidebarLogoMark, SidebarLogoName, SidebarNavItem, SidebarUserRow,} from "@/registry/new-york/items/manpowerhub-sidebar/components/sidebar";
export function ManpowerhubSidebarBasic() { return ( <Sidebar className="h-[420px] rounded-lg border border-r"> <SidebarHeader> <SidebarLogo> <SidebarLogoMark> <Users className="stroke-[var(--text-inverse)]" /> </SidebarLogoMark> <SidebarLogoName>ManpowerHub</SidebarLogoName> </SidebarLogo> </SidebarHeader> <SidebarContent> <SidebarGroup> <SidebarGroupLabel>Main</SidebarGroupLabel> <SidebarNavItem active icon={<LayoutDashboard />}> Overview </SidebarNavItem> <SidebarNavItem icon={<Users />} count={2847}> Workers </SidebarNavItem> <SidebarNavItem icon={<Bot />}>AI Agents</SidebarNavItem> </SidebarGroup> </SidebarContent> <SidebarFooter> <SidebarUserRow> <MhAvatar initials="JK" size="sm" /> <div> <div className="text-xs font-semibold">Junaid Khan</div> <div className="text-[10.5px] text-[var(--text-3)]">Admin</div> </div> </SidebarUserRow> </SidebarFooter> </Sidebar> );}Installation
Section titled “Installation”This installation provides support for all official Shadcn icon libraries. The component is otherwise identical to the non-experimental installation.
Icon support is experimental and may not be fully stable since it uses internal Shadcn APIs.
This component relies on other items which must be installed first.
Copy and paste the following code into your project.
components/ui/sidebar.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
function Sidebar({ className, ...props }: React.ComponentProps<"nav">) { return ( <nav data-slot="sidebar" className={cn( "flex w-[220px] min-w-[220px] flex-col overflow-y-auto border-r border-border bg-card", className, )} {...props} /> );}
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="sidebar-header" className={cn( "mb-1.5 border-b border-border px-2.5 pt-3.5 pb-2.5", className, )} {...props} /> );}
function SidebarLogo({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="sidebar-logo" className={cn("mb-2.75 flex items-center gap-2.25", className)} {...props} /> );}
function SidebarLogoMark({ className, children, ...props}: React.ComponentProps<"div">) { return ( <div data-slot="sidebar-logo-mark" className={cn( "grid size-7 shrink-0 place-items-center rounded-[var(--r-sm)] bg-[var(--brand)] shadow-[0_0_0_3px_var(--brand-subtle)] [&_svg]:size-3.5", className, )} {...props} > {children} </div> );}
function SidebarLogoName({ className, ...props}: React.ComponentProps<"span">) { return ( <span data-slot="sidebar-logo-name" className={cn( "text-[13.5px] font-bold tracking-[-0.3px] text-foreground", className, )} {...props} /> );}
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="sidebar-content" className={cn("flex flex-1 flex-col px-1.5", className)} {...props} /> );}
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="sidebar-group" className={cn("px-1.5 pb-0.5", className)} {...props} /> );}
function SidebarGroupLabel({ className, ...props}: React.ComponentProps<"div">) { return ( <div data-slot="sidebar-group-label" className={cn( "px-1.5 pt-3 pb-1 text-[10px] font-semibold tracking-[0.6px] text-[var(--text-3)] uppercase", className, )} {...props} /> );}
export interface SidebarNavItemProps extends React.ComponentProps<"button"> { active?: boolean; icon?: React.ReactNode; count?: React.ReactNode;}
function SidebarNavItem({ className, active, icon, count, children, ...props}: SidebarNavItemProps) { return ( <button type="button" data-slot="sidebar-nav-item" data-active={active} className={cn( "relative mb-px flex w-full items-center gap-2 rounded-[var(--r-xs)] border-none bg-transparent px-2 py-1.5 text-left text-[13px] font-[450] text-[var(--text-2)] transition-all hover:bg-[var(--surface-3)] hover:text-foreground", active && "bg-[var(--brand-subtle)] font-medium text-[var(--brand)] before:absolute before:top-[5px] before:bottom-[5px] before:left-0 before:w-0.5 before:rounded-sm before:bg-[var(--brand)]", className, )} {...props} > {icon ? ( <span className="flex w-[15px] shrink-0 items-center justify-center [&_svg]:size-3.5"> {icon} </span> ) : null} <span className="flex-1">{children}</span> {count != null ? ( <span className={cn( "ml-auto min-w-[18px] rounded-full bg-[var(--surface-4)] px-1.5 py-px text-center text-[10px] font-semibold text-[var(--text-3)]", active && "bg-[var(--brand-subtle)] text-[var(--brand)]", )} > {count} </span> ) : null} </button> );}
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="sidebar-footer" className={cn( "mt-auto border-t border-border px-1.5 pt-2.5 pb-3", className, )} {...props} /> );}
function SidebarUserRow({ className, ...props}: React.ComponentProps<"button">) { return ( <button type="button" data-slot="sidebar-user-row" className={cn( "flex w-full cursor-pointer items-center gap-2.25 rounded-[var(--r-xs)] border-none bg-transparent px-2 py-1.75 text-left transition-colors hover:bg-[var(--surface-3)]", className, )} {...props} /> );}
export { Sidebar, SidebarHeader, SidebarLogo, SidebarLogoMark, SidebarLogoName, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarNavItem, SidebarFooter, SidebarUserRow,};Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this sidebar:
npx shadcn@latest add @woxcn/manpowerhub-sidebar