Integration 22 block design & features
Integration22 is a searchable catalog built with shadcn/ui Input, Button, Dialog, and Checkbox. A heading sits above a search field and a wrap row of category filters. Matching tools appear in a dense grid of bordered cards with a logo and name. Clicking a tile opens a dialog with that tool's logo, permission checkboxes for read data, write data, and receive webhooks (read checked by default), and cancel or connect actions. An empty message appears when search and tag filters return nothing.
Filters use filled versus outline buttons so the active tag is obvious. Cards are compact and hover-muted. Search is live as you type. The dialog is a single column with a small bordered logo tile above the title. After connecting, the dialog can disconnect. The grid keeps the height of the full catalog so filtering does not collapse the section. Cards stay their original size instead of stretching to fill that space.
This is an interactive directory rather than a static logo cloud. Complexity is moderate and mixed: filter state plus a working connect form, while completeness depends on enough tagged logos.
On small screens the search stacks above the chips and the grid is two columns, then three, four, and five. The dialog stays a single column.