# Shift — Detent

> One card for where your visitors come from, three ways to read it. Switch between List, Bars and Change and every bar, icon and number moves to its new place instead of redrawing, so you never lose the source you were looking at.

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

## About

One card for where your visitors come from, three ways to read it. Switch between List, Bars and Change and every bar, icon and number moves to its new place instead of redrawing, so you never lose the source you were looking at.

## Details

- Hover, tap or arrow onto a source and the headline answers for it: "468 from Perplexity", with its share and its change.
- Change sorts sources by growth and grows bars either side of a line, green for up and red for down.
- Pass `items` with a `value`, an optional `delta` and an `icon`; anything past `limit` folds into one "more" row.
- Use `view` and `onViewChange` to control it, or `defaultView` to let it keep its own state. `format` decides how numbers read.
- Follows light and dark, works from the keyboard, and with reduced motion views switch at once.

## Keyboard shortcuts

| Keys | Action |
| --- | --- |
| Arrows | Move between sources or views |
| Tab | Into the sources |

## Install

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

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