---
title: "Connect data sources"
description: "A setup step with six order sources in a grid that connect in place, a step indicator, and Skip and Continue once one is connected."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/connect-data-sources
---

# Connect data sources

A setup step with six order sources in a grid that connect in place, a step indicator, and Skip and Continue once one is connected.

Each source is a button with its mark, name and what comes in from it. Pressing one swaps that line for a spinner and Connecting, then a check and Connected with the mark turned ink, in the same two lines so the tile keeps its height; pressing it again disconnects it. A failed connection says so on the card and can be tried again. The footer shows the step as four bars and Step 2 of 4, then Skip for now and Continue. Continue stays disabled, and says why, until one source is connected; it then saves with a spinner. The grid is two columns in the card and one on a phone (three, given a wider max-width), and every card in a row keeps its content at the top. Screen readers hear each source connect.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/connect-data-sources
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, button, card, item, spinner

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More onboarding blocks

All 4, with install commands: https://ui.edbn.me/docs/blocks/onboarding (Markdown: https://ui.edbn.me/docs/blocks/onboarding.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt