AI assistant conversation view with tool calls, system messages, markdown, code blocks, multi-bubble grouping, and a resizable artifact preview panel for generated documents
Web overviewAn open-source UI library to help developers quickly build beautiful, accessible products.
Core
AppShellAppShell provides a foundational page layout with header, sidebar, and content regions. Use it to establish consistent structure across your application.
AvatarAvatars represent a person or entity with an image, initials, or icon. They are commonly used in user profiles, comments, and contact lists.
BadgeBadges display small counts or status labels. They can be attached to icons, buttons, or list items to surface key information at a glance.
BannerBanners show important, non-modal messages at the top of a page or section. They communicate status, warnings, or promotional information.
ButtonButtons let people take action. They can be used in forms, dialogs, and toolbars, or as standalone links.
CalendarCalendar provides a date-picking grid for selecting single dates or date ranges. It integrates with form fields for date input.
DialogDialogs are modal overlays that require user attention or action before continuing. They are used for confirmations, forms, and critical decisions.
DropdownMenuDropdownMenu presents a list of actions or options in a floating overlay. It is triggered by a button and supports nested submenus.
EmptyStateEmptyState provides a placeholder when there is no content to display. It guides users with a message, illustration, and optional call-to-action.
HoverCardHoverCard shows a rich preview of content when users hover over a trigger element. It is ideal for previewing profiles, links, or details.
IconIcons are small visual symbols that represent actions, objects, or concepts. They improve scannability and reinforce meaning alongside text.
KbdKbd renders keyboard shortcut hints in a styled inline element. Use it to show users which key combinations perform specific actions.
LinkLinks provide navigation between pages or to external resources. They follow accessible anchor semantics with visual affordance.
ListList displays a vertical set of related items. It supports selection, icons, and metadata for building menus, nav lists, and more.
PopoverPopover displays rich content in a floating panel anchored to a trigger element. It is used for forms, filters, and contextual tools.
TableTable displays structured data in rows and columns with support for sorting, selection, and custom cell rendering.
TokenTokens display compact metadata labels such as tags, categories, or filters. They can be dismissible and support selection state.
TooltipTooltips show concise helper text when users hover over or focus an element. They clarify icons, truncated labels, and controls.
Layout
CardCards group related content and actions in a contained surface. They can include headers, media, body text, and action bars.
DividerDividers separate content into distinct sections with a subtle or strong horizontal line. They can optionally include a label.
GridGrid provides a CSS grid-based layout container with configurable columns, rows, and gap. It simplifies responsive multi-column designs.
StackStack arranges child elements in a row or column with consistent gap spacing. It is the primary tool for one-dimensional layout composition.
Navigation
BreadcrumbsBreadcrumbs show the user's current location within a navigation hierarchy. They provide quick links back to parent pages.
SideNavSideNav renders a vertical navigation panel with links, sections, and collapsible groups. It is used as the primary nav in dashboard layouts.
TabListTabList switches between content views using a horizontal row of tabs. Only one tab is active at a time, and content changes without a page reload.
TopNavTopNav provides an app-level navigation bar across the top of the page. It holds branding, primary links, search, and user actions.
Form
CheckboxInputCheckboxInput renders a single checkbox with a label. It is used for boolean opt-in choices like terms acceptance or feature toggles.
SelectorSelector lets users pick a single item from a dropdown list. It supports search, grouping, and custom option rendering.
SwitchSwitch toggles a setting between on and off states with immediate effect. It is used for preferences, feature flags, and real-time controls.
TextInputTextInput is a single-line text field for short user input like names, emails, and search queries. It supports icons, prefixes, and validation.
TypeaheadTypeahead provides an autocomplete search input that suggests results as the user types. It supports async data sources and custom rendering.