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.

Vue
Shadcn Integration 11 block

Component Data

  • ID:integration11
  • Access:pro
  • Created:Apr 29, 2025
  • Type:block

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.