Detail Panel
Worker/profile detail panel.
import { Badge } from "@/components/ui/badge";import { MhAvatar } from "@/components/ui/mh-avatar";import { DetailPanel, DetailPanelBody, DetailPanelHero, InfoGrid, InfoItem, InfoLabel, InfoValue,} from "@/registry/new-york/items/manpowerhub-detail-panel/components/detail-panel";export function ManpowerhubDetailPanelBasic() { return ( <DetailPanel className="max-w-lg"> <DetailPanelHero> <MhAvatar initials="AR" size="xl" color="#6366f1" /> <div className="flex-1"> <div className="text-[17px] font-bold">Ahmed Al-Rashid</div> <div className="text-[12.5px] text-[var(--text-3)]"> Heavy Equipment Operator · W-10042 </div> <div className="mt-2 flex gap-1.5"> <Badge variant="success">Active</Badge> </div> </div> <div className="text-right"> <div className="text-[22px] font-extrabold">$1,240</div> <div className="text-[11px] text-[var(--text-3)]">per month</div> </div> </DetailPanelHero> <DetailPanelBody> <InfoGrid> <InfoItem> <InfoLabel>Employee ID</InfoLabel> <InfoValue>W-10042</InfoValue> </InfoItem> <InfoItem> <InfoLabel>Nationality</InfoLabel> <InfoValue>Pakistani</InfoValue> </InfoItem> </InfoGrid> </DetailPanelBody> </DetailPanel> );}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/detail-panel.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
function DetailPanel({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="detail-panel" className={cn( "overflow-hidden rounded-[var(--r-lg)] border border-border bg-card", className, )} {...props} /> );}
function DetailPanelHero({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="detail-panel-hero" className={cn( "flex items-start gap-3.5 border-b border-border bg-[var(--surface-2)] p-5", className, )} {...props} /> );}
function DetailPanelBody({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="detail-panel-body" className={cn("p-4.5", className)} {...props} /> );}
function InfoGrid({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="info-grid" className={cn("grid grid-cols-2 gap-3.5", className)} {...props} /> );}
function InfoItem({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="info-item" className={cn("flex flex-col gap-0.75", className)} {...props} /> );}
function InfoLabel({ className, ...props }: React.ComponentProps<"span">) { return ( <span data-slot="info-label" className={cn( "text-[10.5px] font-medium tracking-[0.4px] text-[var(--text-3)] uppercase", className, )} {...props} /> );}
function InfoValue({ className, ...props }: React.ComponentProps<"span">) { return ( <span data-slot="info-value" className={cn("text-[13px] font-medium text-foreground", className)} {...props} /> );}
export { DetailPanel, DetailPanelHero, DetailPanelBody, InfoGrid, InfoItem, InfoLabel, InfoValue,};Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this detail panel:
npx shadcn@latest add @woxcn/manpowerhub-detail-panel