Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Depth Table Integrations About Block for Ark UI

An integration depth table for a data-sync service: seven systems in plain type with direction, sync frequency, sign-in method and a state dot, in a framed, scrolling table.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An integration depth table for React with Ark UI, written for Meshbridge, a fictional data-sync service. Instead of a wall of logos, a framed table lists seven connected systems in plain type, each with what it syncs, its direction (Pull reads from it, Push writes to it, Two-way does both, shown as a drawn arrow and the word), how often it syncs, how it signs in, and a state dot with its word: a solid dot for connected, a hollow one for paused and a warning dot for needs sign-in. The header's tally is counted from the rows, so it always matches. It is a real table with a caption and row headers; on a phone it scrolls sideways in a focusable region while the first column stays in place. It's built from Badge, Status and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For data, integration and automation products that want to show how deep each connection goes. Systems and settings are example data.

FAQ

How do I change the integrations?

Edit INTEGRATIONS at the top of the file: each has a name, syncs (what moves), a direction (Pull, Push or Two-way), a sync frequency, an auth method and a state. The tally in the header is counted from the states by countIn. Systems are named by what they are, so the table never shows a vendor's logo or name unless you type it in.

What do Pull, Push and Two-way mean here?

Pull reads data from the system into the service, Push writes data from the service to it, and Two-way does both and keeps the two in step. The arrows are drawn and hidden from assistive technology, because the word beside each arrow says the same thing.

How are states shown without colour coding?

Each state is a word with a dot beside it: solid for Connected, hollow for Paused, and a warning dot for Needs sign-in. The dot is decoration; the word carries the meaning, so the table reads the same to anyone who cannot tell the dots apart.

How is the table read by a screen reader?

It is a native table with a caption, column headers marked as columns and each integration's name as a row header, so every cell is read with its system and its column. The scrolling region is focusable and named, so a keyboard user can scroll it with the arrow keys.

How does it fit on a phone?

The table keeps all five columns and scrolls sideways inside its frame, with the integration's name pinned to the start so you always know which row you are in. The header's tally moves under the heading. Nothing else scrolls sideways at 320 pixels, and in a right-to-left layout the pinned column moves to the right edge.

What moves, and what happens with reduced motion?

The header and the table fade up once on load, and a row takes a faint tint on hover. With reduced motion the entrance is off.

All 150 about blocks