Components

Rate cell

The canonical Yuno 'rate' cell used inside Table rows (Insights → Chargebacks rate per provider, Approval rate per issuer, response-code rates, etc.). A short Progress bar visualizes the value on a 0–100 scale + a tabular numeric label to the right shows the exact percentage to two decimals. Purely display — pass a `value` and drop it into a <TableCell>.

Updated Aug 6, 2026 by Leonardo Posada

Anatomy

flex items-center gap-3. Left: the kit Progress atom sized `h-1.5 w-20` (6px tall, 80px wide bar). Right: a text-sm muted tabular-nums span showing `{value.toFixed(2)}%`. tabular-nums keeps widths aligned across rows in a Table so the percentages line up.

87.42%

1
Container
flex items-center gap-3. Sized to fit naturally inside a <TableCell> without extra padding — the TableCell owns row padding.
2
Progress bar
The kit <Progress> atom at `h-1.5 w-20` (6px × 80px). Value is passed straight through; consumers who need a different bar length can override via className on the outer container and re-apply.
3
Percentage label
text-sm text-muted-foreground with tabular-nums. Format is always `{value.toFixed(2)}%` (two decimals) so widths align across rows.

Recipes

Standalone

A single RateCell out of context. Rare on its own — RateCell is designed for table rows — but useful for a compact stat in a small card or a filter chip.

87.42%

<RateCell value={87.42} />

Inside a Table (canonical)

Drop RateCell as the child of a <TableCell> in a Table row. tabular-nums on the label keeps the percentages vertically aligned even when values differ in digit count (0.42% vs 12.03% vs 100.00%).

Provider	Chargebacks rate
Stripe	0.42%
Adyen	0.58%
Braintree	1.14%
dLocal	2.03%
Cybersource	0.31%

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Provider</TableHead>
      <TableHead>Chargebacks rate</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map((r) => (
      <TableRow key={r.provider}>
        <TableCell>{r.provider}</TableCell>
        <TableCell>
          <RateCell value={r.rate} />
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Import

Copy this import line at the top of the file where you compose this atom.

RateCell is a controlled display atom — pass `value` (0–100) and it renders. No state, no callbacks. If you need a different bar size, wrap it or clone the ~10-line source.

import { RateCell } from "@/components/ui/rate-cell";

Props

Everything else from the underlying HTML or Radix primitive is forwarded via ...props.

Prop	Type	Default	Description
value	number (required)	—	Percentage 0–100. Rendered as {value.toFixed(2)}% next to the bar. Widths align across table rows because the label uses tabular-nums.
className	string	—	Extra classes on the outer flex container.

Cross-links to atoms and patterns you may reach for next.

ProgressThe underlying atom. If you need the Progress bar without the % label, use Progress directly.
TableThe canonical host — RateCell fits inside <TableCell> without extra padding.
Country cellThe other canonical Table cell atom in the kit (flag + country name).