Agent Gallery

Slim gradient panels with one open product screen in the middle – pick a panel and it glides open.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/agent-gallery.json · Import from @/components/ui/agent-gallery

When to use

Showing several agents, workflows or product areas on a landing page, one at a time with a real-looking screen
Feature sections that should feel explorable rather than a static grid

When not to use

Two or three items – a simple tab switch reads faster
Content people need to compare side by side

Usage

import { AgentGallery } from "@/components/ui/agent-gallery";

export function AgentsSection() {
  return <AgentGallery title="Agents that run your playbook" />;
}

Props

Name	Type	Default	Description
`title`	`string`		Heading above the panels
`subtitle`	`string`		Line under the heading
`items`	`GalleryItem[]`		Each { id, name, description, colors: [strong, soft], trigger, steps, skills, guardrail } – drives the panel colors, the label and the screen
`defaultIndex`	`number`	`the middle item`	Panel that starts open
`className`	`string`		Extra class on the root

Keyboard

← / →: With focus in the panels, opens the previous or next one
Tab: Moves through the side panels and the arrow buttons

Accessibility

Marked as a carousel; side panels are buttons labelled “Show …”
The caption under the open panel is announced when it changes

Responsive

Follows its own width: below 760px the open panel fills the width with one slim panel peeking on each side
Every panel shares one gradient artwork drawn in CSS – only two colors per item change, so it scales crisply
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19