Integration 29 - Wrapping chips with filters and connect dialog

Pro

Heading beside category tabs that filter wrapping integration chips without shifting layout. Clicking a chip opens a dialog to choose read or write access.

Shadcn Integration 29 block

Component data

ID
integration29
Access
pro
Created
Aug 19, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Integration 29 block design & features

Integration29 is a wrapping catalog built with shadcn/ui Button, Dialog, Select, and Label. A heading sits beside three category tabs: All, Workspace, and Platform. Selecting a tab filters a wrapping set of bordered chips. Each chip shows a logo, name, and category label. Clicking a chip opens a dialog with that tool's mark, an access level select for read only or read and write, and cancel or connect actions. A request link sits under the wrap.

Chips use the filled Button for the active category and outline for the rest. Pills stay compact and sit in a wrap rather than a grid. The filtered list reserves the height of the full set so the request link does not jump. The dialog is a single column with a small bordered logo tile above the title.

This is a lightweight directory with working filters rather than decorative tags. Complexity is moderate and interaction-driven: each item needs a category that matches a chip, and each chip can open the same connect flow.

On small screens the three tabs wrap under the heading and the pills stay in a single wrapping flow. The dialog stays a single column.