Skip to content
A2UI PlaygroundbyCopilotKit

Search

Jump to a page or a component

Components

The playground uses all 69 Gen UI 2.0 standard components. On top of them it adds 52 of its own across 8 categories, built on shadcn/ui, TanStack Charts and MapLibre, and 3 macros that expand into standard components on the server. Each preview is a live A2UI surface, rendered from the JSON an agent would send.

Layout

2
Section
Titled group with eyebrow, title, description, and children.
Accordion
Collapsible items (FAQs, details, per-file notes); each has a title and either text or a child id.

Content

6
ImageGallery
Grid of images with captions.
CodeBlock
Syntax-colored code with language label and copy button. Use for any code, config, command or diff snippet.
Heading
Surface title with optional eyebrow and subtitle. Start most surfaces with one.
Quote
Pull quote with attribution: testimonial, review, reviewer comment.
VideoEmbed
Embedded YouTube/Vimeo video by URL.
Kbd
Keyboard shortcut chips, e.g. keys ['Cmd','K'] with a label. Use for shortcuts and how-to steps.

Data display

13
DataTable
Sortable, filterable table (TanStack Table). columns [{key,label,format?}], rows are objects keyed by column key.
Agenda
Calendar agenda: days with timed events (conference, week plan, schedule). Prefer over Timeline for clock times.
Timeline
Vertical timeline of dated events or steps with status.
ComparisonTable
Feature matrix comparing options side by side. options are the option names as strings; rows [{feature, values}] with one value per option, in the same order, each true/false/text; highlight is the recommended option's index in options (0 is the first).
StatGroup
Compact strip of several KPIs in one card.
KeyValueList
Label/value rows, e.g. specs or order details.
TagList
Wrapping list of tags/chips.
AvatarGroup
Overlapping avatar stack with +N overflow: attendees, team members, reviewers.
Progress
Labelled progress bar, value 0-100: goals, budgets used, completion, coverage.
Stat
One numeric KPI: label, short value (number or <10 chars like '$84k'), optional delta (e.g. '+4.2%'), caption. Not for sentences.
Avatar
Person avatar (initials if no image) with name and subtitle: authors, owners, reviewers.
RadialProgress
Ring with centered value, value 0-100: a single score or percent complete.
Rating
Star rating (0-5) with optional review count: products, places, reviews.

Charts

12
CandlestickChart
OHLC price candles. data [{date,open,high,low,close}].
Heatmap
Matrix of values, e.g. day x hour. data [{x,y,value}] with x,y categories.
SankeyChart
Flows between stages, e.g. budget or funnel paths. links [{source,target,value}].
LineChart
Trend over ordered x. data [{x,y,series?}]; one line per series.
AreaChart
Filled trend for volumes or cumulative totals (traffic, signups); series stack. data [{x,y,series?}].
Treemap
Nested part-to-whole as rectangles. data [{name,value,group?}].
BarChart
Compare categories. data [{x,y,series?}]; series grouped side by side, or stacked:true. horizontal for long labels.
PieChart
Part-to-whole. data [{label,value}]; donut:true for a ring with center total.
ScatterChart
Relationship between two numbers (price vs rating, effort vs impact). data [{x,y,label?,size?,series?}].
RadarChart
Multi-axis profile (scores per criterion for 2-3 options or people). data [{axis,value,series?}], values on a shared scale.
Sparkline
Tiny trend with label and latest value; a compact KPI with history, fits in a Grid instead of Stat. values: numbers.
Gauge
Half-ring gauge for a single value within min..max (score, utilization).

Maps

4
PlaceList
Split view: ranked list of places linked to a map; hovering/clicking a row highlights its marker. selected (row index) starts with that row highlighted.
MapView
Interactive map (MapLibre) with numbered markers; fits all markers. markers [{name,lat,lon,description?}].
RouteMap
Map with a route line through coordinates [[lon,lat],...] plus start/end pins and distance/duration.
LocationCard
Single place (venue, hotel, office): mini map, name, address, category, rating, actions. Use instead of MapView for one place.

Inputs

5
ChipSelect
Multi-select chips bound to a string-list path: extras, interests, dietary needs.
ButtonGroup
Segmented single-choice control; value bound to a path.
Combobox
Searchable dropdown for long option lists (countries, cities, timezones).
DatePicker
Date picker with calendar popover; value ISO date bound to a path.
Switch
On/off toggle with label and description.

Feedback

4
Alert
Inline alert with icon, title and message.
Callout
Highlighted tip or note with optional emoji/icon and a call to action.
EmptyState
Empty or zero-results state with icon, title, hint and optional action: no matches, nothing scheduled, inbox zero.
Skeleton
Loading placeholder lines/blocks.

Domain

6
WeatherCard
Current weather hero with condition icon, temp, high/low, details, an hourly strip and daily forecast. icon: sun|cloud-sun|cloud|fog|drizzle|rain|snow|storm.
RecipeCard
Recipe: title, time/servings/difficulty, ingredient checklist and numbered steps. Use for any recipe or cooking how-to.
StockTicker
Stock quote header: symbol, name, price, change and % change, sparkline, key stats. sample:true labels illustrative data.
ProfileCard
Person card: avatar, name, role, company, location, bio, contacts, tags, stats. Use for team members, speakers, candidates.
ReceiptCard
Order receipt: merchant, order id, date, line items with qty and price, subtotal/tax/total, status.
EventCard
Event: date block, title, time, venue, host, attendees count, tags, RSVP action. Lead an event or conference with it.

Standard components

69

Built into CopilotKit Gen UI 2.0 as standardUI. Docs