Integration 11 - Tabbed integration grid with toggles

Pro

A tabbed component showcasing categorized integrations with toggles for connection status and details button, scaling from one to three columns.

Shadcn Integration 11 block

Component data

ID
integration11
Access
pro
Created
Apr 29, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria

Integration 11 block design & features

Integration11 is a full-width section using shadcn/ui Tabs to filter integrations by connection status. Tabs include All Applications, Connected, and Disconnected. Below the tabs, integrations are grouped by category with a category heading and description. Each integration appears as a bordered card with an icon inside a muted square, a title, description, an outline Button for details, and a Switch toggle for connection state.

Cards are arranged in a responsive grid up to three columns. Each card has rounded corners, a light border, subtle shadow, and a hover shadow transition. Icons sit in a muted background container. Text uses standard foreground color for titles and muted-foreground for descriptions. Spacing between category groups is generous.

This follows a functional dashboard pattern with interactive state management. The tabbed filtering and per-card toggles create a moderate level of interactivity. The visual style is clean and utilitarian, prioritizing information density over decoration.

On mobile, the grid reduces to a single column and the cards maintain their full internal layout.