Status Strip

beta

Joined status pills for the top of a home page: a label with an optional status, the value under it, and controls at the end.

Preview

segments, aside

trailing

a narrow column

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```

3. Add the component.

npx shadcn@latest add @txbrendan/status-strip

The few facts a home page leads with, top right: next event, your status, an invoice due.
Each segment has a label on line 1 and a value on line 2. aside puts a status right after the label, like a StatusText.
trailing is for controls only, like Yes and No buttons, centered across both lines.
It hugs its content. In a narrow column its segments wrap onto more rows and stay joined.

segments
Required. The pills, in order.
{ label: string; value: string; aside?: ReactNode; trailing?: ReactNode }[]
className
Extra classes on the strip. Later classes win.
string

Prop	Type	Default	What it does
segments	{ label: string; value: string; aside?: ReactNode; trailing?: ReactNode }[]	-	Required. The pills, in order.
className	string	-	Extra classes on the strip. Later classes win.

A description list: each label is a <dt>, and its status, value, and controls are <dd>s, so screen readers read each pair together.
The 1px lines between segments are gaps that show the border color, so they stay in forced colors.
Controls in trailing need their own names, like "Yes, I'm going".

<StatusStrip
  segments={[
    { label: "Next event", value: "Sat 3 Oct · Demo day" },
    { label: "Invoice", value: "£15 due Fri" },
  ]}
/>