# Flow funnel — Detent

> The funnel as one smooth shape. Pull any step wider to try a better conversion, and the headline says how many more customers that’s worth. It catches at the real rate, so you can feel your way back.

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

## About

The funnel as one smooth shape. Pull any step wider to try a better conversion, and the headline says how many more customers that’s worth. It catches at the real rate, so you can feel your way back.

## Details

- Pull a step and every step after it moves. What you’ve added prints in blue grain around the real funnel, and what you’ve lost in red.
- The headline does the sum, “Started a trial at 50% adds 592 paying customers a month”, and keeps a total when you change several.
- Why people left sits under each step, in the space they left.
- A root scale keeps late steps wide enough to hold, so a 2% step is still something you can pull.

## Keyboard shortcuts

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Change the step by a point |
| Esc | Back to the real numbers |

## Install

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

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