Components

#Basic Components

  • Accordion - Collapsible content panels
  • Alert - Alert messages with different variants
  • Attachment - File and media attachment surfaces
  • Avatar - User avatars with fallback text
  • Badge - Count badges and indicators
  • Bubble - Chat message surface with alignment and reactions
  • Button - Interactive buttons with multiple variants
  • Checkbox - Binary selection control
  • Collapsible - Expandable/collapsible content
  • DropdownButton - Button with dropdown menu
  • Icon - Icon display component
  • Image - Image display with fallbacks
  • Kbd - Keyboard shortcut display
  • Label - Text labels for form elements
  • Marker - Conversation status and separator marker
  • Message - Composable chat message structure
  • MessageScroller - Tail-following virtualized message list
  • Pagination - Page navigation controls
  • Progress - Progress bars
  • Questionnaire - Composable multi-step questions and answers
  • Radio - Single selection from multiple options
  • Rating - Interactive star rating component
  • Skeleton - Loading placeholders
  • Slider - Value selection from a range
  • Spinner - Loading and status spinners
  • Stepper - Step-by-step progress indicator
  • Switch - Toggle on/off control
  • Tag - Labels and categories
  • TextView - Markdown and HTML text rendering
  • Toggle - Toggle button states
  • Tooltip - Helpful hints on hover

#Form Components

  • Input - An input field or a component that looks like an input field.
  • Textarea - Multi-line text with fixed rows or auto-grow.
  • Editor - Source-code editing with highlighting, gutter, and folding.
  • Select - A list of options for the user to pick.
  • Combobox - Searchable single-select or multi-select dropdown.
  • NumberInput - Numeric input with increment/decrement
  • DatePicker - Date selection with calendar
  • TimeField - Segmented time-of-day input
  • OtpInput - One-time password input
  • Speech - Dictation through the system recognizer or your own
  • ColorPicker - Color selection interface
  • Form - Form container and layout

#Layout Components

  • DescriptionList - Key-value pair display
  • GroupBox - Grouped content with borders
  • Root - Window-level provider for themes, dialogs, and notifications
  • Theme - Customize colors, typography, and light/dark appearance
  • Dialog - Dialog and modal windows
  • Notification - Toast notifications
  • Popover - Floating content display
  • Resizable - Resizable panels and containers
  • Scrollable - Scrollable containers
  • Sheet - Slide-in panel from edges
  • Sidebar - Navigation sidebar
  • StatusBar - Bottom status bar with left/center/right regions
  • Toolbar - Top toolbar with left/right regions and sizes

#Advanced Components

  • Diff - Readonly patch display for code review and change previews
  • Calendar - Calendar display and navigation
  • Carousel - Browse through a set of related items
  • Command - Command palette for search and quick actions
  • Chart - Data visualization charts (Line, Bar, Area, Pie, Candlestick)
  • List - List display with items
  • Menu - Menu and context menu and dropdown menu.
  • Settings - Settings UI
  • DataTable - High-performance data tables
  • Dock - Production-ready dock layouts with tabs, splits, and persistent state
  • Tabs - Tabbed interface
  • Tree - Hierarchical tree data display
  • VirtualList - Virtualized list for large datasets

CC BY 4.0 · Documentation prose and original illustrations GPUI Kit has rights to license may be copied or adapted with attribution. License. Credit GPUI Kit, link to this source page and the CC BY 4.0 license, and indicate any changes. Code examples and software source remain under Apache-2.0. Existing Apache permissions remain; third-party material retains its own terms.