Topbar
Application top bar.
import { Badge } from "@/components/ui/badge";import { Button } from "@/components/ui/button";import { Topbar, TopbarLeft, TopbarRight, TopbarSeparator, TopbarSubtitle, TopbarTitle,} from "@/registry/new-york/items/manpowerhub-topbar/components/topbar";export function ManpowerhubTopbarBasic() { return ( <Topbar className="rounded-lg border"> <TopbarLeft> <TopbarTitle>Overview</TopbarTitle> <TopbarSeparator>/</TopbarSeparator> <TopbarSubtitle>May 2026</TopbarSubtitle> </TopbarLeft> <TopbarRight> <Badge variant="brand">6 Agents</Badge> <Button size="sm">Export</Button> </TopbarRight> </Topbar> );}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/topbar.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
function Topbar({ className, ...props }: React.ComponentProps<"header">) { return ( <header data-slot="topbar" className={cn( "flex h-[50px] min-h-[50px] shrink-0 items-center gap-2.5 border-b border-border bg-card px-5", className, )} {...props} /> );}
function TopbarLeft({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="topbar-left" className={cn("flex flex-1 items-center gap-2", className)} {...props} /> );}
function TopbarTitle({ className, ...props }: React.ComponentProps<"span">) { return ( <span data-slot="topbar-title" className={cn("text-[13.5px] font-semibold text-foreground", className)} {...props} /> );}
function TopbarSeparator({ className, ...props}: React.ComponentProps<"span">) { return ( <span data-slot="topbar-separator" className={cn("text-xs text-[var(--text-3)]", className)} {...props} /> );}
function TopbarSubtitle({ className, ...props }: React.ComponentProps<"span">) { return ( <span data-slot="topbar-subtitle" className={cn("text-[12.5px] text-[var(--text-3)]", className)} {...props} /> );}
function TopbarRight({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="topbar-right" className={cn("flex items-center gap-1.75", className)} {...props} /> );}
export { Topbar, TopbarLeft, TopbarTitle, TopbarSeparator, TopbarSubtitle, TopbarRight,};Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this topbar:
npx shadcn@latest add @woxcn/manpowerhub-topbar