# Data Connection block

> Data connection detail sheet with sync health, dataset linking and masked data preview

Data source drawer with auth and token alerts, Sync Now and Pause, schema drift on linked datasets, and a connection test in settings. ReUI Frame, Alert, Badge; shadcn Sheet, Tabs, Table, Chart. ETL, data pipeline, integration.

- Type: Pro block
- Category: [Sheet](https://web.dev.reui.io/blocks/application/sheet.md)
- Page: https://web.dev.reui.io/blocks/application/sheet/sheet-22
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/sheet.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/sheet.md
- MCP: `get_block("sheet-22")`
- Built with: Alert, Alert Dialog, Avatar, Badge, Button, Button Group, Chart, Dialog, Dropdown Menu, Empty, Field, Frame, Icon Tile, Input, Input Group, Item, Label, Select, Sheet, Skeleton, Spinner, Switch, Table, Tabs, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A whole connection across 4 tabs: a 24 hour sync chart, dataset link switches with drift, credential rotation and a connection test

## Agent notes

- The sample connections come from `CONNECTIONS`, and the sheet opens on `DEFAULT_CONNECTION_ID`; load your own `Connection` records
- The `syncNow` action only waits `SYNC_MS` then records a synthetic run, and `rotateCredential` keeps a masked tail in state; call your API in both
- The `checksForConnection` helper scripts the test and passes unless the connection is failing; run real reach, auth and read checks

## When not to use

- A connection that does not exist yet and needs setting up step by step: use [New Connection](https://web.dev.reui.io/blocks/application/sheet/sheet-23.md) (`get_block("sheet-23")`)
- A full page of data connections rather than one record in a side panel: use [Data Connections](https://web.dev.reui.io/blocks/solutions/dev-ops/solution-dev-ops-6.md) (`get_block("solution-dev-ops-6")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/sheet-22
```

## About Sheet blocks

### When to use

- Record detail opened over a list or table: a ticket, metric, cron job, audit event, deploy, SLO or data source
- Create and edit forms in a side panel for a project, cron job, firewall rule, SLO or data connection
- Utility panels for help guides, keyboard shortcuts, an AI assistant, comments, notifications or view settings

### When not to use

- A bare side panel with your own header, body and footer, nothing prebuilt: use [Sheet](https://web.dev.reui.io/components/sheet.md) (`get_component("sheet")`)
- A persistent sidebar or navigation layout that stays around every page: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)
- An assistant conversation that fills the whole page rather than a side panel: use the [AI Chat blocks](https://web.dev.reui.io/blocks/ai-agents/ai-chat.md)

### Agent notes

- Each root renders a demo `SheetTrigger` button and opens on mount via `defaultOpen` or a `useState` seeded true; start it closed in your app
- Each `SheetContent` className floats it inset with `inset-y-4`, `right-4` and `rounded-xl` and sets its own width; resize it there, not in the primitive
- Each page.tsx only centers the trigger in a `min-h-svh` main with an `sr-only` h1; render the root component alone inside your page

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.