# Versus

Two-column comparison: numbers become mirrored bars, booleans become check/cross marks, strings stay text, and the side with more wins is highlighted in the accent.

```bash
npx shadcn add https://www.reelcn.dev/r/versus.json
```

Usage:

```tsx
<Center>
  <Versus
    left="Starter"
    right="Pro"
    rows={[
      { label: "Price / mo", left: 19, right: 49 },
      { label: "Seats included", left: 5, right: 25 },
      { label: "Priority support", left: false, right: true },
      { label: "Response time", left: "48h", right: "2h" },
    ]}
  />
</Center>
```

Use for:

- Plan or tier comparisons, before/after specs, us-vs-them feature tables
- Three to eight rows mixing numbers, yes/no features and short text

Avoid:

- A single trend over time. Use `line-chart`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| delay? | `number` | — | Frames to wait before entering. |
| duration? | `number` | — | Enter duration in frames. Defaults to 0.6s. Some items reuse `duration` for an unrelated local timing. See that item's own prop docs. |
| exit? | `number \| boolean` | — | Exit at the end of the parent `<Sequence>`. `false` keeps it on screen, a number sets the exit length in frames. |
| motion? | `MotionPersonality` | — | Override the theme's motion personality. |
| poster? | `boolean` | — | Renders fully entered, with no exit: for a still frame or thumbnail. Defaults to `false`. |
| holdFrames? | `number` | — | Delays the start of the exit window by this many frames, for a minimum on-screen hold. Defaults to `0`. |
| left | `string` | — | Left column title. |
| right | `string` | — | Right column title. |
| rows | `VersusRow[]` | — |  |
| locale? | `string` | `"en-US"` | BCP 47 locale for numeric rows. |
| format? | `NumberFormatOptions` | — | `Intl.NumberFormat` options for numeric rows. Defaults to the precision of the data. |
| width? | `number` | — | Width in design units. Defaults to the safe-area width. |
| stagger? | `number` | — | Frames between rows. Defaults to 0.12s. |
| accentColor? | `string` | — | Winning title and winning bars / marks. Defaults to the theme accent. |
| color? | `string` | — | The other title and row text. Defaults to the theme foreground. |
| labelColor? | `string` | — | Row labels. Defaults to the theme muted color. |
| loseColor? | `string` | — | Losing bars / marks. Defaults to the theme muted color. |
| style? | `CSSProperties` | — |  |
| className? | `string` | — |  |