Spec Label Section

A product spec section styled like a nutrition label — rows stamp themselves in one by one as it scrolls into the window, and any row can expand to show notes and supporting links.

Loading preview…

npx shadcn@latest add https://webberui.com/r/spec-label-section.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Section titletitle

Subheading textsubtitle

Footnotefootnote

Row stamp interval (s)stagger

0.08

Expand / collapse duration (s)duration

0.3

Play the entrance animation onceonce

<SpecLabelSection />

Installation

npx shadcn@latest add https://webberui.com/r/spec-label-section.json

Or, once registries are configured in components.json, install it as @webberui/spec-label-section.

Usage

import {
  SpecLabelSection,
  type SpecItem,
} from "@/components/ui/spec-label-section";

const items: SpecItem[] = [
  {
    id: "battery",
    label: "Battery life",
    value: "38",
    unit: "hours",
    emphasis: true,
    detail: "Measured in continuous playback with active noise cancelling on at 50% volume.",
    links: [{ label: "Test method", href: "#" }],
  },
  { id: "weight", label: "Weight", value: "248", unit: "g" },
];

<SpecLabelSection
  title="Specs at a glance"
  subtitle="Model NC-900 · per pair"
  items={items}
/>;

Props

`SpecLabelSection`

Prop	Type	Default	Description
`items`	`SpecItem[]`	—	Spec item data
`title`	`React.ReactNode`	—	Section title, also used as the aria label
`subtitle`	`React.ReactNode`	—	Subtitle below the title (model, serving size, and so on)
`featureHeading`	`React.ReactNode`	`"Item"`	Column header: title of the feature column
`valueHeading`	`React.ReactNode`	`"Spec"`	Column header: title of the value column
`footnote`	`React.ReactNode`	—	Small footnote at the bottom (separated by a thick rule)
`openIds`	`string[]`	—	Controlled mode: array of currently expanded row ids
`defaultOpenIds`	`string[]`	`[]`	Initial array of expanded ids in uncontrolled mode
`onOpenChange`	`(ids: string[]) => void`	—	Fires when the expanded state changes
`stagger`	`number`	`0.08`	Interval between each row's stamp-in (seconds)
`delay`	`number`	`0`	Delay before the reveal starts (seconds)
`duration`	`number`	`0.3`	Expand / collapse duration (seconds)
`once`	`boolean`	`true`	Play only the first time the element enters the viewport

`SpecItem`

Field	Type	Description
`id`	`string`	Unique key, used to match controlled expansion — keep it stable
`label`	`React.ReactNode`	Feature / item name (left side of the row)
`value`	`React.ReactNode`	Main value (format it yourself)
`unit`	`React.ReactNode`	Unit after the value (at a smaller size)
`emphasis`	`boolean`	Emphasize this row with a thick rule and a larger number
`detail`	`React.ReactNode`	Explanatory note shown once expanded
`links`	`SpecEvidenceLink[]`	Supporting links shown once expanded

`SpecEvidenceLink`

Field	Type	Description
`label`	`React.ReactNode`	Link text
`href`	`string`	Link URL (opens in a new tab)

How it works

Stamp-in: when the whole table scrolls into the window, each row settles down from a slightly larger scale, accompanied by a fade in and a touch of blur, stamping in row by row according to stagger. Set once={false} to replay it every time it enters the viewport.
Thick and thin rules: the outer frame, the signature thick black bar, and the bottom edge of the header are thick rules; ordinary rows are separated by thin gray lines, while emphasis rows switch to a thick black rule and enlarge the value, mimicking the hierarchy of a nutrition label.
Expandable rows: rows that carry detail or links show an indicator arrow and are clickable, expanding the note and supporting links below the row with a height transition; rows with neither render as static, non-interactive rows.
Controlled and uncontrolled: when openIds is not passed, the component manages the expanded state itself (use defaultOpenIds to set the initial one); passing openIds makes it fully controlled, synchronized through onOpenChange. Multiple rows may be expanded at once.

Accessibility

Expandable rows are native <button>s carrying aria-expanded and aria-controls; they are keyboard focusable and toggle with Enter / Space.
The expanded block is a role="region" that points back at its trigger row through aria-labelledby.
When title is provided, the section is associated with its heading through aria-labelledby.
Supporting links open with target="_blank" and carry rel="noopener noreferrer".
When the user has "reduce motion" enabled at the system level, the stamp-in and the expand transition are disabled and a static table is shown directly.

Spec Label Section

On this page