# Status Strip

> 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.

- Name: `status-strip`
- Status: beta
- Categories: data, display
- File: the install writes `status-strip.tsx` to your `ui` alias, `@/components/ui` by default.
- Other registry items: `@arbokui/motion`. The install adds them.
- Gallery: https://arbokui.com/components/status-strip
- Registry item: https://arbokui.com/r/status-strip.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the component:

   ```bash
   npx shadcn@latest add @arbokui/status-strip
   ```

## Use it for

- 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.

## Avoid it for

- More than four segments. Put the rest on the page.
- Long values. Keep each to a few words, like a date and a team.
- Links or text in trailing. Put a link in the value's page instead.

## Props

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

## Accessibility

- 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".

## Examples

### Two facts for a home page

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