saturation/uiLoading...
Installation
pnpm dlx shadcn@latest add @saturation-ui/detail-heroTailwind v4 — Source Scanning
The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:
@source "../components";This ensures all utility classes in CVA variants and data attribute selectors are included in your build.
Usage
import {
DetailHero,
SHADER_STYLE,
} from "@/components/ui/detail-hero"<DetailHero size="M" variant="shader" background={<MyShader style={SHADER_STYLE} />}
avatar={<Avatar />} title={record.name} value={money(record.amount)} replayKey={record.id} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | "S" | "M" | "L" | "M" | Matched set: S = inline identity row · M = 184px block · L = 240px block and the only size that renders actions. |
variant | "normal" | "shader" | "image" | "shader" | normal = theme colors, no background layer; shader/image = background slot over the dark canvas with fade + progressive blur. |
background | ReactNode | — | The background SLOT — shaders/images stay in the consumer; docs use gradient stubs. |
overlay | boolean | true | Render the chassis fade + progressive blur over the background. Wrappers with a TUNED scrim (document previews, brand washes) set false and own the treatment inside the slot. |
canvasColor | string | — | Canvas color behind the background — entity-wrapper config for brand canvases. Defaults to the design's near-black hero canvas. |
centered | boolean | false | ENTITY-WRAPPER CONFIG, not a per-instance axis: centered-profile arrangement at M/L (Contact) vs the default bottom-left inline row (Transaction). |
avatar / title / subtitle / value / valueClassName | … | — | Identity content. value counts up from 0 on intro. |
onTitleClick / titleTooltip | … | — | Clickable title deep-link. |
pill | { icon?, label, onClick?, ariaLabel? } | — | Provenance pill, top-left (M/L). With onClick it renders as a button (hover glass + focus ring); ariaLabel names the action for assistive tech. |
actions | ReactNode | — | Action row — rendered ONLY at size L. |
expandable / onExpand | … | — | Hover 'Open' chip for widget-embedded heroes. |
replayKey | unknown | — | Replays the intro choreography when it changes (e.g. the entity id). |
children | ReactNode | — | Custom foreground — replaces the avatar/title/value layout for bespoke heroes. |
childrenLayout | "bottom" | "fill" | "bottom" | Children placement at M/L: bottom-anchored with standard padding, or the whole block (inset-0) for vertically-centered foregrounds. |
On This Page