Components / Data

Detail Panel

A record's fields grouped into titled sections, one field per row.

Contact

sample_creator

84000000000

Sample Brand - Skincare

Segment A - Group B - Category one / category two / category three

Ownership

Sample Owner 84000000001

Online

PICSample Assignee

demos.tsx

import {
  Briefcase01Icon,
  SmartPhone01Icon,
  TiktokIcon,
  UserGroupIcon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { CopyButton } from "@/components/ui/hiip-ui/copy-button";
import {
  DetailMeta,
  DetailPanel,
  DetailRow,
  DetailSection,
} from "@/components/ui/hiip-ui/detail-panel";

function DetailPanelDemo() {
  return (
    <DetailPanel className="w-full max-w-sm">
      <DetailSection title="Contact">
        <DetailRow
          icon={<HugeiconsIcon icon={TiktokIcon} strokeWidth={2} />}
          action={<CopyButton value="sample_creator" ariaLabel="Copy handle" />}
          hint
        >
          sample_creator
        </DetailRow>
        <DetailRow
          icon={<HugeiconsIcon icon={SmartPhone01Icon} strokeWidth={2} />}
          action={
            <CopyButton value="84000000000" ariaLabel="Copy phone number" />
          }
        >
          84000000000
        </DetailRow>
        <DetailRow
          icon={<HugeiconsIcon icon={Briefcase01Icon} strokeWidth={2} />}
          hint
        >
          Sample Brand - Skincare
        </DetailRow>
        {/* Long enough to truncate, which is the behaviour worth showing: the
            panel holds its width instead of the tag list stretching it. */}
        <DetailRow
          icon={<HugeiconsIcon icon={UserGroupIcon} strokeWidth={2} />}
        >
          Segment A - Group B - Category one / category two / category three
        </DetailRow>
      </DetailSection>

      <DetailSection title="Ownership">
        <DetailRow
          icon={
            <span className="flex size-7 items-center justify-center rounded-full bg-primary/10 text-[0.625rem] font-semibold text-primary">
              ZL
            </span>
          }
          action={
            <span className="rounded-full bg-success/10 px-2 py-0.5 text-xs font-medium text-success">
              Online
            </span>
          }
        >
          Sample Owner <DetailMeta>84000000001</DetailMeta>
        </DetailRow>
        <DetailRow
          icon={
            <span className="flex size-7 items-center justify-center rounded-full bg-foreground text-xs font-semibold text-background">
              S
            </span>
          }
          label="PIC"
          action={
            <span className="rounded-full bg-border px-2 py-0.5 text-xs text-foreground/70 tabular-nums">
              +1
            </span>
          }
        >
          Sample Assignee
        </DetailRow>
      </DetailSection>
    </DetailPanel>
  );
}

Install — needs @hiip registered in components.json

bunx shadcn@latest add @hiip/detail-panel

Or by URL, with the token in the query

bunx shadcn@latest add "https://ui.hiip.ai/r/detail-panel.json?token=$HIIP_REGISTRY_TOKEN"

Both need a token — set one up.

Anatomy

Import from components/ui/hiip-ui/detail-panel.

<DetailPanel>
  <DetailSection title="Contact">
    <DetailRow icon={…} action={…} hint>
      value
      <DetailMeta>secondary value</DetailMeta>
    </DetailRow>
  </DetailSection>
</DetailPanel>

API Reference

Generated from the source. Props forwarded to the underlying element are not listed.

DetailPanel

No props of its own.

DetailSection

One titled group.

Prop	Type	Default
`title`	`ReactNode`	—

DetailRow

One field.

Prop	Type	Default
`action`	`ReactNode`	—
`hint` Marks the value as carrying more than it shows — a handle that opens a profile, a brand that resolves to a campaign.	`boolean \| undefined`	—
`icon`	`ReactNode`	—
`label`	`ReactNode`	—

DetailMeta

The muted second value on a row — a phone number beside a name, a count beside a label.

No props of its own.

Type

registry:ui

Files written

components/ui/hiip-ui/detail-panel.tsx