ns-ui
Autosave status as a mechanical ratchet — a 10-tooth gear advances one notch per saved change and tallies the session in its rotation, while a failed save kicks the wheel back half a tooth and holds that broken pose until the next save resolves it.
Use when an editor's save status where the session's accumulated saves should be visible as rotation rather than a text swap, and a failed save should hold a visibly broken pose until the next save resolves it; pick button-retry-backoff instead when the user has to press something to retry, or status-glyph-cadence when the states belong to an agent's work rather than to a document's save cycle.
Install
npx shadcn add https://design.helpmarq.comns-ui / autosave-ratchet
Hover or focus the gear for the full status; a failed save kicks the wheel back half a tooth and holds until the next save lands.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | PawlTickStatus | — | Current autosave status. Transitions drive everything: idle/saved/error -> "saving" plays the anticipation wind-up; "saving" -> "saved" advances one tooth with a spring settle and folds into the session tally; any -> "error" plays the pawl-slip kick-back and holds until the next "saved". |
| size? | number | — | Gear glyph size in px. Default 20. |
| className? | string | — | — |