# Integrations — Detent

> The tools a product connects to, drifting in rows under a capsule of glass that shows each in its own colour. Press one and the glass opens into a panel to connect it; connected tools keep their colour, so the rows fill in as the stack comes together.

Canonical: https://detentui.com/blocks/integrations
Last updated: 2026-11-10

## About

The tools a product connects to, drifting in rows under a capsule of glass that shows each in its own colour. Press one and the glass opens into a panel to connect it; connected tools keep their colour, so the rows fill in as the stack comes together.

## Details

- Three rows of marks drift in ink, each its own way. Whatever passes behind the glass swells, bends at the rim and takes its own colour, with its name under it. The line beneath says what the product does in the tool at its middle.
- Press any tool and the rows ease to a stop with it under the glass, which opens into a frosted panel: what connecting does, what it’s allowed to touch, and Connect. Nothing chases the pointer, so the button stays where it appeared.
- Connected tools keep their colour and a small check wherever they are, and the count at the top rolls up.
- The glass is an SVG filter: the rows drawn again, magnified and in colour, pushed through a displacement map shaped like the capsule’s bevel, its colours parted a little at the rim. Its light follows the pointer.
- Grab the rows to pull them through the glass and let go to watch them coast. Pointing at the stage slows the drift so a name can be read. With reduced motion the rows hold still.

## Keyboard shortcuts

| Keys | Action |
| --- | --- |
| ← → | Move the rows by one tool |
| ↵ | Connect the tool in the glass |
| Esc | Close the panel |

## Install

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

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