KQ-560 · UNIT/FLIP
Unit Flip
A readout whose unit is the control. Pressing the chip turns it over — rotateX on snap, two faces on one card, one crisp overshoot as it lands — while the digits re-roll to the converted value, each glyph riding out of its own slot in the direction of the flip so the number reads as re-measured rather than replaced. Precision follows the unit, so the miles reading keeps two decimals where the kilometres reading keeps one. The chip is a button carrying aria-pressed, Space and Enter flip it, its accessible name says which unit is showing and which is a press away, and the converted value is announced through a polite status. Under reduced motion the card does not turn and the digits swap in place, because the reading is the information.
Reading in °C · km · lb
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/unit-flip
Props
- value
- number
- default —
- The measurement, expressed in the first unit.
- units
- [UnitFlipUnit, UnitFlipUnit]
- default —
- The pair — { label, convert, digits } — each converting from the base value.
- unit / defaultUnit
- 0 | 1
- default 0
- Controlled or initial unit index.
- onUnitChange
- (index: 0 | 1) => void
- default —
- Fires on flip with the index now showing.
- label
- React.ReactNode
- default —
- What is being measured; sits opposite the readout and truncates rather than wrapping.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | The measurement, expressed in the first unit. |
| units | [UnitFlipUnit, UnitFlipUnit] | — | The pair — { label, convert, digits } — each converting from the base value. |
| unit / defaultUnit | 0 | 1 | 0 | Controlled or initial unit index. |
| onUnitChange | (index: 0 | 1) => void | — | Fires on flip with the index now showing. |
| label | React.ReactNode | — | What is being measured; sits opposite the readout and truncates rather than wrapping. |