AgentUICSS-first component library for building agent interfaces.
IntroductionQuick StartDesign PrinciplesDesign TokensReactivity & EventsFoundations & LifecyclesData ModelsTraits GuideA2UI ProtocolReleasesComponentsBlocksTraitsSettingsPlaygroundGenUI ToolInstallationCDNDownloadImportES ModuleRegister ComponentsUsing ComponentsInstructionsColorsSpacingTypographySizingMotionThemesAccordion Itemaui-accordion-itemAccordionaui-accordionAgent Activityaui-agent-activityAgent Feedaui-agent-feedAgent Inputaui-agent-inputAgent Messageaui-agent-messageAgent Panelaui-agent-panelAgent Promptaui-agent-promptAgent Seedsaui-agent-seedsAgent Textaui-agent-textAgent Threadaui-agent-threadAlertaui-alertApp Shellaui-app-shellAvatar Groupaui-avatar-groupBaraui-barBreadcrumb Itemaui-breadcrumb-itemBreadcrumbaui-breadcrumbButtonaui-buttonCalendaraui-calendarCalendar Pickeraui-calendar-pickerCalendar Range Pickeraui-calendar-range-pickerCanvasaui-canvasCarouselaui-carouselCheckboxaui-checkboxCheckbox Groupaui-checkbox-groupChipaui-chipCode Blockaui-code-blockColor Areaaui-color-areaColor Fieldaui-color-fieldColor Pickeraui-color-pickerColor Slideraui-color-sliderCommand Emptyaui-command-emptyCommand Groupaui-command-groupCommand Inputaui-command-inputCommand Itemaui-command-itemCommand Listaui-command-listCommandaui-commandContaineraui-containerDate Fieldaui-date-fieldDialogaui-dialogDisclosureaui-disclosureDisclosure Groupaui-disclosure-groupDraweraui-drawerEditor Layeraui-editor-layerEditoraui-editorEmpty Stateaui-empty-stateFeedaui-feedFile Uploadaui-file-uploadFormaui-formGraph Vieweraui-graph-viewerGripperaui-gripperHover Cardaui-hover-cardIconaui-iconImageaui-imageInput Otpaui-input-otpInputaui-inputLinkaui-linkMeteraui-meterNav Itemaui-nav-itemNoodlesaui-noodlesNotification Centeraui-notification-centerOptgroupaui-optgroupOptionaui-optionPage Contextaui-page-contextPage Mainaui-page-mainPageaui-pagePaginationaui-paginationPaneaui-panePanesaui-panesProgressaui-progressProgress Circleaui-progress-circleRadio Groupaui-radio-groupRadioaui-radioRangeaui-rangeRootaui-rootSegmentaui-segmentSegmented Controlaui-segmented-controlSelectaui-selectSidebar Contentaui-sidebar-contentSidebar Footeraui-sidebar-footerSidebar Headeraui-sidebar-headerSidebaraui-sidebarSkeletonaui-skeletonSparklineaui-sparklineSpinneraui-spinnerStataui-statStepaui-stepStepperaui-stepperSwitchaui-switchTab Panelaui-tab-panelTabaui-tabTabsaui-tabsTable Bodyaui-table-bodyTable Cellaui-table-cellTable Columnaui-table-columnTable Headaui-table-headTable Headeraui-table-headerTable Rowaui-table-rowTableaui-tableTag Groupaui-tag-groupTextareaaui-textareaTime Fieldaui-time-fieldToastaui-toastTooltipaui-tooltipTree Itemaui-tree-itemTreeaui-treeAvataraui-avatarBadgeaui-badgeButton Groupaui-button-groupCodeaui-codeColor Swatchaui-color-swatchContentaui-contentDivideraui-dividerFieldaui-fieldFieldsetaui-fieldsetFooteraui-footerGridaui-gridHeaderaui-headerHeadingaui-headingInput Groupaui-input-groupInsetaui-insetKbdaui-kbdRouteaui-routeRouteraui-routerStackaui-stackStepaui-stepTextaui-textTileaui-tileWrapaui-wrapAction ToolbarThree toolbar variants — editor formatting, table Agent Artifact CardCode and document artifact cards with preview fadeAgent ChatFull agent chat interface with message feed, compoAgent Chat ResponseAgent chat message with identity row, prose + codeAgent Code ResultCode execution result with source, output status bAgent Context PanelSidebar context panel with file/link items, token Agent Feedback ControlsFeedback toolbar with like/dislike, copy, retry, sAgent Follow Up ChipsFollow-up question suggestions and action chips wiAgent Model SelectorModel selection panel with capability tags, contexAgent Prompt InputChat composer with file attachment chips, expandabAgent Streaming MessageAgent streaming response with identity row, prose Agent Suggestion CardAgent code suggestion with diff preview, impact taAgent Task CardMulti-step agent task card with timeline, log outpAgent Thinking StateAgent thinking indicator with reasoning chain, tooAgent Tool Use CardCollapsible tool invocation cards showing parameteAnnouncement CardAnnouncement card with image area, description, anAuth CardLogin card with social buttons, email/password fieChart ActivityWeekly activity chart with labeled columns and rouChart CardSimple vertical bar chart card with month labels.Chart DonutDonut chart card with center stat, legend, and selChart GroupedGrouped vertical bar chart comparing two data seriChart HorizontalHorizontal bar chart with category labels.Chart InteractiveWide chart card with stat summaries and dense bar Chart LabeledVertical bar chart with value labels above each baCheckout FormPayment form with card details and billing addressCommerce Pricing TableThree-tier pricing comparison with billing toggle,Comms Chat ThreadDirect message chat thread with sent/received bubbComms Notification ListNotification panel with count badge, mark-all-readContent Article CardArticle preview card with thumbnail, tags, title, ContributorsContributors card showing overlapping avatar groupDashboard Kpi GridDashboard page with title, date range, period seleDashboard LayoutApplication shell with sidebar, page header, and cData Activity LogChronological activity feed with date groups, semaData Metric CardRow of KPI metric widgets with sparklines and trenData TableCustomer data table with search, status badges, anData TimelineChronological event timeline with date groups, conDate PickerCalendar date picker inside a bordered card.Empty StateCentered placeholder for empty content areas with Env VariablesEnvironment variables panel with masked secrets anFeature UpgradeFeature upgrade card with checklist, note, and calFeedback Alert BannerDismissible alert banners in info, success, warninFeedback Empty StateCentered empty state with illustration, heading, dFeedback Progress StepperHorizontal multi-step progress wizard with step coForm Settings SectionMulti-section settings page with profile form fielIssue AssignIssue assignment card with user search and selecteKeyboard ShortcutsPanel listing keyboard shortcuts with command nameList Kanban BoardRoadmap kanban board with segmented control view tLogin BrandedTwo-column login with branded sidebar panel and imLogin Email OnlyMinimal centered login with email field and optionLogin FormLogin card with email, password, and forgot-passwoLogin SimpleSimple bordered login card with email, password, aLogin SocialCentered login page with social providers, email/pLogin Two ColumnTwo-column login with form on the left and image pMedia Image GalleryAsset gallery grid with image placeholders, file cMember ListPanel with header and avatar-based member rows.Nav CardCompact clickable card for navigation menus.Nav SidebarApp sidebar with workspace header, nav items, favoNotification ListPanel listing recent notifications with avatars anOnboard StepperVertical onboarding wizard with progress bar, stepOverlay Confirmation ModalConfirmation dialog with danger icon, warning detaOverlay Dropdown MenuDropdown menus with action items, keyboard shortcuPricing CardPricing tier card with features list and call-to-aProcessing StateLoading state with status icon, message, and canceProfile CardUser profile card with avatar, bio, stats, and actSaas OnboardingEnterprise SaaS Onboarding — 17 nodes, 19 connectiSettings FormCard with header, form fields, and action footer.Settings PanelSettings card with toggles, descriptions, and grouSidebar NavCompact app sidebar with icon navigation and user Signup FormSignup card with name, email, password, and terms Stat CardsRow of compact KPI stat widgets.Status CardCentered confirmation or alert card with icon and Suggested LabsLab order card with categorized tests and routing Survey CardSurvey question card with checkbox options and subTabbed PanelSegmented control card with tab-switched content pTeam EmptyEmpty state for team member lists with invite actiUsage BillingBilling usage panel with progress circle rings andUser Profile CardUser profile card with avatar, name, role, stats gUser Team ListTeam member panel with search, role badges, inviteAuto DismissAutomatically hides the host after a configurable Backtick WrapAuto-wraps selected text in backticks on backtick ClipboardHandles paste events, parsing clipboard data into CollapsibleToggles host height between collapsed and expandedConfettiBursts confetti particles from the host on click.CopyCopies text to clipboard on press with visual feedCss Inspect3D exploded view of the DOM tree for visual debuggDismissCloses the host on Escape key or outside click.DragComposable pointer-driven drag-and-drop with drop,Drop ZoneMakes the host a drag-and-drop target for files anEditInline edit mode with commit and cancel support.Flip3D card flip animation toggled on click.GatewayDOM portal that moves host children to a target coHoverTracks hover state with optional enter/leave delayIntersectIntersectionObserver wrapper exposing viewport visLink PasteDetects URLs in pasted text and emits link-paste eLinked ScrollBidirectional scroll sync between two elements by List NavigateArrow key navigation and type-ahead search in a liMagnetHost subtly follows and tilts toward the cursor onMentionDetects @mentions in text input and emits search eModalModal overlay using the Popover API with focus traNoodleDraws an SVG curved line connecting the host to a OverlayPopover and modal overlay traits built on the PopoPan ZoomMakes any element a pannable and zoomable canvas sParallaxScroll-based parallax shifting via CSS custom propPersistSaves and restores arbitrary state to localStoragePopoverNon-modal overlay using the Popover API with CSS aPresentShow/hide the host with CSS transition state attriPress HoldEmits a hold event after a long press on the host.Range SelectShift/Cmd-click range and multi-selection on host ResizeFigma-style handle-based resize with per-axis hug/RippleAdds a Material-style expanding ripple effect on pRoving FocusArrow key navigation within the host's focusable cSearchFull-text search filter that shows/hides host chilSelectionSingle or multi-select state management for host cShortcutKeyboard shortcut binding that emits events on keySlash CommandDetects /commands in text input and emits command Snap ResizeSnaps pane resize operations to grid increments.SortDrag-to-reorder with automatic DOM reordering on dStoreData-driven DOM stamping for list-like components.SwipeDetects swipe gestures and emits direction, distanText TriggerGeneric text pattern trigger that emits on regex mToastTransient notification that auto-dismisses and staToggle SchemeCycles color-scheme on a target element between syToggle StateGeneric boolean toggle that flips on press and expToggle ThemeCycles through available color themes on press andTooltipShows a tooltip on hover or focus using the PopoveTossPhysics-based throw that flings the host and sprinTrap FocusTraps keyboard focus within the host element.ValidateForm validation rules with data attribute state exVirtual ScrollVirtual scrolling that only positions visible itemNo results found.