Adobe Spectrum — Component Library Demo

What's in the Spectrum corpus

The AI assistant is grounded in three distinct documentation sources — each indexed and searchable.

🎨

Spectrum Design Docs

Design principles, component anatomy, states, usage guidance, color, motion, typography, and accessibility foundations from the official Spectrum 2 design documentation.

SpectrumDesignDocs · 103 records Explore design guidance →

⚙

React Spectrum S2

The latest generation of React Spectrum. Component APIs, prop types, TypeScript types, controlled patterns, code examples, and migration from v3.

ReactSpectrumS2 · 111 records Explore React S2 →

📦

React Spectrum V3

The stable v3 library powering many Adobe products. Full prop reference, hooks, collections API, and overlap with S2 to help you plan migrations.

ReactSpectrumV3 · 144 records Explore v3 → S2 migration →

Featured Components

Explore individual components — each page includes design guidance, code examples, and live demos.

Button ActionButton, ToggleButton, Link

▾

ComboBox Controlled, async, filtering

v3 → S2

Migration Guide v3 → Spectrum 2

🚀

Get Started Installation, setup, first component

Context-aware AI assistant

This demo showcases Algolia's proactive chat experience. The assistant watches what you read, tracks which components interest you, and — when it has enough context — opens a personalized greeting tailored to your browsing pattern and selected persona.

Select a persona in the top-right dropdown to engage the agent with a different focus (Designer, Developer, or Product Manager).
Browse a few pages, click CTAs, or scroll deep — the concierge agent will notice and proactively offer help.
The chat widget always answers from the live Algolia Agent Studio agents, grounded in real Spectrum documentation.

Start browsing components →

Powered by
Algolia Agent Studio