# Stopwatch

Stopwatch with a large, steady readout and start, stop, lap and reset. Each new lap lands at the top of the list, with the fastest and slowest laps clearly marked.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/stopwatch
```

## Import

```tsx
import { useStopwatch, useStopwatchTime, formatStopwatch, StopwatchReadout, Stopwatch } from "@/components/ui/stopwatch/stopwatch";
```

## Variants

- `brew` — Brew: `npx @lumioui/cli add pro/stopwatch-brew`
- `laps` — Laps: `npx @lumioui/cli add pro/stopwatch-laps`
- `tracker` — Tracker: `npx @lumioui/cli add pro/stopwatch-tracker`

## Props

### StopwatchReadout

| Prop | Type | Notes |
| --- | --- | --- |
| `stopwatch` | `StopwatchControls` | — |
| `sinceLastLap?` | `boolean` | Show time since the last lap instead of the total. |
| `precision?` | `StopwatchPrecision` | — |
| `className?` | `string` | — |
| `style?` | `StyleProp<TextStyle>` | — |

### Stopwatch

| Prop | Type | Notes |
| --- | --- | --- |
| `layout?` | `"full" | "compact"` | "full" — hero readout, round Lap/Start buttons, laps list.  "compact" — inline row with icon buttons. Default "full". |
| `precision?` | `StopwatchPrecision` | Hundredths (default) or whole seconds. |
| `stopwatch?` | `StopwatchControls` | Drive an external `useStopwatch()` instance instead of the built-in one. |
| `label?` | `string` | Compact title — "Brew time". |
| `description?` | `string` | Compact subtitle under the label. |
| `showLaps?` | `boolean` | Show the laps list (full layout). Default true. |
| `readoutSize?` | `number` | Readout font size in the full layout. Default 72. |
| `className?` | `string` | — |

## Icons rendered

- `play` — /icons.html?i=play
- `refresh` — /icons.html?i=refresh

Source: https://lumioui.com/components/stopwatch