# Percent

> Percent vs. percentage points, explicitly discriminated.

Source: https://lopifi.com/components/percent
Part of: Lopifi — US GAAP books on autopilot, reviewed by a CPA (https://lopifi.com)

---

- **Family:** Primitives — The layer everything else composes. Build these first; nothing above them is right until they are.
- **Status:** Implemented
- **Spec:** https://lopifi.com/docs/catalog/01-primitives

## Install

```bash
npx shadcn@latest add @lopifi/theme
npx shadcn@latest add @lopifi/percent
```

## Specification

> Percent and percentage points are different numbers. This component makes conflating them impossible.

```tsx
<Percent value={{ kind: "relative", value: 25.0 }} />   // +25.0%
<Percent value={{ kind: "points", value: 5.0 }} />      // +5.0pp
<Percent value={{ kind: "bps", value: 25 }} />          // +25 bps
```

No default `kind`. The discriminator is required. Division by zero → `n/a`, never `Infinity`.

Precision by kind: relative/points 1dp · bps 0dp · rate 3dp.

## Rules this component obeys

Money is minor units, never floats. `null` is not `0` and neither is redacted. Negatives render in accounting parentheses with the parenthesis column reserved on both sides. Debit and credit are two columns. Per-currency decimal places. Polarity is explicit — up is not always good. Every figure states its period, entity, currency, basis and as-of.
