Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Integrations Carousel Block for Solid

Twelve integrations in a two-row connect gallery with a Connect button on each cell and a scrolling Connected list at the end that has a Disconnect button on every row.

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

Let people wire up their tools from one gallery, with this integrations carousel for Solid with Ark UI. Plugmere, a workflow tool that works with other tools, shows twelve integrations in columns of two: a two-letter tile, the service named in text, a category Badge, one line on what it does and a Connect button. Three columns show from the large breakpoint, two from medium and one with the next peeking on a phone. A Connected list at the end holds what you have connected, with a Disconnect button on every row, and it scrolls inside a held box so the panel never changes height. Connecting moves a tool into the list; disconnecting moves it out. The foot holds the counter, a row of dots and Previous and Next Buttons, and the ruled bands come from Guides. Services are named in text with a lettermark tile, never a logo, and the product is made up.

FAQ

How do I use my own integrations?

Edit TOOLS. Each has an id, a two-letter mark, a name, a kind and a line that says what it does. Columns are rebuilt in pairs, so keep an even number and update COLUMNS. Set START to the ids connected when the page loads.

What do Connect and Disconnect do?

Connect adds the tool to the Connected list and turns its button into a "Connected" state that is marked unavailable, so pressing it again says it is already connected. Disconnect on a list row removes it and the gallery cell goes back to Connect. The status line names what changed.

How does it work with a keyboard?

Tab reaches the controls, Previous, the dots and Next. With focus inside the track, the arrow keys move it (mirrored in a right-to-left layout) and Home and End jump to the first and last position. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled, so focus never disappears. Slides out of view are hidden from the tab order and from screen readers.

What moves the track?

Previous and Next move it one column; the dots go to a position. The track is the Carousel with a controlled page, and the block counts the pages itself.

What stays local in the demo?

All of it. Connecting only changes the list in the page, and the status line says nothing was sent to the service. To wire it for real, start your provider's OAuth flow from connect, store the result and read the connected ids from your API instead of START.

How does it look on a phone?

One column shows with the next peeking, and the Connected list stacks under the track in a box of its own height, so adding to it never moves the page.

All 100 carousel blocks