# Goal numerals — Detent

> Each goal as a soft bar with its percentage set large on top. Flick through the month and every bar and number moves as one. At 100% a bar holds under your hand, then breaks through amber.

Canonical: https://detentui.com/components/rings
Last updated: 2026-11-10

## About

Each goal as a soft bar with its percentage set large on top. Flick through the month and every bar and number moves as one. At 100% a bar holds under your hand, then breaks through amber.

## Details

- One large, plain percentage per goal on a soft bar. The digits turn on real wheels, driven by the same value as the bar, so the two can’t drift apart.
- A goal is a wall. Push a bar into 100% and the number stops while the end of the bar gives under your hand. Keep going and it breaks: the number runs up to where it really is and amber floods back from the far end. Pull back and it closes.
- Beneath the goals, the period. Hover or drag along it to read a day, or flick it and the card coasts with momentum and comes to rest on a day. The days to come are out of reach, so the end stretches.
- The line under the name says whether a goal is ahead of the period’s pace, on it, or by how much it’s over, and an amber dot marks the day each goal went over.
- Let go and it comes back to today. Arrow keys step a day at a time; End or Escape come back.

## Keyboard shortcuts

| Keys | Action |
| --- | --- |
| ← → | Step a day |
| Home | The first day |
| End | Back to today |

## Install

```bash
npx shadcn add https://detentui.com/r/rings
```

## Related
- [All components](https://detentui.com/components)
- [Pro](https://detentui.com/pro)