Components
Browse all 67 SUI components, listed alphabetically.
Every preview runs the components in this workspace. Choose a component to find its import, composition, examples, and API.
AccordionA vertically stacked set of interactive headings that each reveal a section of content.AlertDisplays a callout for user attention.Alert DialogA modal dialog that interrupts the user with important content and expects a response.Aspect RatioDisplays content within a desired ratio.AttachmentDisplays a file or image attachment with media, metadata, upload state, and actions.AutocompleteAn input with suggestions that also accepts free-form text.AvatarAn image element with a fallback for representing the user.BadgeDisplays a badge or a component that looks like a badge.BreadcrumbDisplays the path to the current resource using a hierarchy of links.BubbleDisplays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.ButtonDisplays a button or a component that looks like a button.Button GroupA container that groups related buttons together with consistent styling.CalendarA calendar component that allows users to select a date or a range of dates.CardDisplays a card with header, content, and footer.CarouselA carousel with motion and swipe built using Embla.ChartBeautiful charts. Built using Recharts. Copy and paste into your apps.CheckboxA control that allows the user to toggle between checked and not checked.Clipboard TextDisplay text with a copy action and accessible feedback.Code ViewerSyntax-highlighted code with folding, line highlights, copying, and streaming feedback.CollapsibleAn interactive component which expands/collapses a panel.ColorPickerChoose colors with a saturation area, hue and opacity sliders, editable values and swatches.ComboboxAutocomplete input with a list of suggestions.CommandCommand menu for search and quick actions.Context MenuDisplays a menu of actions triggered by a right click.DialogA window overlaid on either the primary window or another dialog window, rendering the content underneath inert.Diff ViewerA line-based code comparison with split and unified views.DirectionA provider component that sets the text direction for your application.DrawerA drawer component for React.Dropdown MenuDisplays a menu to the user — such as a set of actions or functions — triggered by a button.EditorA client-loaded code editor with preview, toolbar actions, and fullscreen modes.EmptyUse the Empty component to display an empty state.FieldCombine labels, controls, and help text to compose accessible form fields and grouped inputs.GlassSVG highlights and CSS frosted surfaces, progressively enhanced with WebGPU refraction.Hover CardFor sighted users to preview content available behind a link.HTML ViewerAn isolated iframe preview for HTML content.Image ViewerA dialog image viewer with navigation, zoom, rotation, panning, and fullscreen.Inline Copy TextCopy inline text without interrupting surrounding content.InputA text input component for forms and user data entry with built-in styling and accessibility features.Input GroupAdd addons, buttons, and helper content to inputs.Input OTPAccessible one-time password component with copy-paste functionality.ItemA versatile component for displaying content with media, title, description, and actions.KbdUsed to display textual user input from keyboard.LabelRenders an accessible label associated with controls.LoaderLoading indicators with consistent sizing and reduced-motion support.Locale ToggleA controlled language button or selector without routing or persistence assumptions.LongTextTruncated text with overflow-aware hover, focus, and tap disclosure.Markdown ViewerMarkdown rendering with tables, task lists, alerts, highlighted code, and sanitized HTML.MarkerDisplays an inline status, system note, bordered row, or labeled separator in a conversation.MenubarA visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.MessageDisplays a message in a conversation, with optional avatar, header, footer, and alignment.Message ScrollerA chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.Native SelectA styled native HTML select element with consistent design system integration.Navigation MenuA collection of links for navigating websites.PaginationCompact data pagination with range information, page navigation, and page-size selection.NavigationProgressA router-independent navigation bar with delayed start and completion feedback.PopoverDisplays rich content in a portal, triggered by a button.ProgressDisplays an indicator showing the completion progress of a task, typically displayed as a progress bar.QRCodeA generated black-and-white QR code with loading feedback and optional reveal animation.QuestionnaireA multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.Radio GroupA set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.ResizableAccessible resizable panel groups and layouts with keyboard support.Scroll AreaAugments native scroll functionality for custom, cross-browser styling.SelectDisplays a list of options for the user to pick from—triggered by a button.Sensitive InputA password input with an accessible visibility toggle.SeparatorVisually or semantically separates content.SheetExtends the Dialog component to display content that complements the main content of the screen.SidebarA composable, themeable and customizable sidebar component.SkeletonUse to show a placeholder while content is loading.SliderAn input where the user selects a value from within a given range.SwitchA control that allows the user to toggle between checked and not checked.TabBarControlled application navigation with press-and-slide selection and optional glass material.TableA responsive table component.TabsA set of layered sections of content—known as tab panels—that are displayed one at a time.Tag InputCreate and select multiple tags with keyboard support.TextareaDisplays a form textarea or a component that looks like a textarea.Theme ToggleA controlled light/dark switch with optional view-transition effects.ToastA succinct message that is displayed temporarily.ToggleA two-state button that can be either on or off.Toggle GroupA set of two-state buttons that can be toggled on or off.ToolbarA group of actions with arrow-key focus navigation.TooltipA popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.