gpuicn Reference

Chapter 5

Components

All 60 components in catalog order. Lines and functions are counted in the installed source at this release.

No. Component Description Lines Public fns Modules
01 Accordion A vertically stacked set of interactive headings that reveal content. 147 5 accordion
02 Alert Dialog A modal dialog that expects a response from the user. 67 3 button, dialog, alert_dialog
03 Attachment File and image cards with upload progress, retry, and remove. 412 11 button, attachment
04 Autocomplete A text input that suggests matching values. 12 1 input, field, select, autocomplete
05 Avatar An image element with a fallback for representing a user. 311 8 avatar
06 Badge Labels and unread or mention counts in a compact pill. 141 5 badge
07 Button Displays a button or a component that looks like a button. 361 9 button
08 Carousel Cycles through content with buttons, pagination, keyboard controls, and pointer gestures. 236 8 carousel
09 Checkbox A control that toggles between checked and unchecked. 109 7 checkbox
10 Checkbox Group Groups related checkboxes under shared state. 164 9 checkbox_group
11 Collapsible An interactive panel that expands and collapses. 57 3 collapsible
12 Combobox An input paired with a searchable list of choices. 12 1 input, field, select, combobox
13 Command A searchable command palette and quick switcher. 623 20 input, button, dialog, kbd, command
14 Composer New A chat message box with autocomplete for mentions, channels and emoji. 783 29 input, textarea, composer
15 Context Menu A menu opened by a secondary pointer action. 12 1 button, menu, context_menu
16 Dialog A window overlaid on the primary content. 528 18 button, dialog
17 Drawer A panel that slides from an edge of the window. 446 13 button, dialog, drawer
18 Embed New Link previews, message attachments and quoted posts under a chat message. 1647 46 avatar, button, tooltip, message, embed
19 Emoji Picker New A searchable emoji grid with categories, recents and custom emoji. 998 22 input, emoji_picker
20 Empty Explains an empty state and offers a clear next action. 386 12 empty
21 Field Composes a control with its label, description, and errors. 235 12 input, field
22 Fieldset Groups related form controls with a legend. 45 2 fieldset, input, field
23 Form Coordinates validation and submission for fields. 24 1 form, button, input, field, number_field, select
24 Input A styled text input backed by native GPUI editing. 447 24 input
25 Input Group Combines an input or textarea with inline addons and actions. 497 16 input, button, field, input_group
26 Kbd Shows a keyboard key or shortcut with platform modifier names. 247 8 kbd
27 Lightbox New A full-window image viewer with zoom, pan and previous and next. 536 19 button, dialog, lightbox
28 Markdown Renders Markdown with themed code blocks and inline entity chips. 491 10 markdown
29 Dropdown Menu Displays a menu of actions from a trigger. 866 23 button, menu
30 Menubar A persistent horizontal set of menus. 127 2 button, menu, menubar
31 Message A chat message row with grouping, reactions, and hover actions. 1001 30 button, tooltip, message, avatar
32 Message List A chat transcript that only renders visible rows and follows new messages. 650 16 button, message_list, markdown, tooltip, message
33 Meter Shows a scalar value within a known range. 99 4 meter
34 Navigation Menu A collection of links for navigating a site or app. 10 1 button, menu, menubar, navigation_menu
35 Number Field A numeric input with step controls. 140 5 input, field, number_field
36 Input OTP A segmented input for one-time passcodes. 115 4 otp_field
37 Popover Displays rich content in a portal from a trigger. 556 14 button, popover
38 Hover Card Previews content behind a link or trigger. 15 2 preview_card, button
39 Progress Displays completion progress for a task. 127 5 progress
40 Radio Group A set of checkable options where one value is selected. 179 9 radio_group
41 Resizable Controlled panes with pointer and keyboard resizing. 522 8 resizable
42 Scroll Area Adds styled scrolling to overflowing content. 166 5 scroll_area
43 Select Displays a list of options for the user to pick from. 687 12 input, field, select
44 Separator Visually separates content. 62 3 separator
45 Sidebar Application navigation with responsive layouts, icon rails, nested menus, and mobile sheets. 1502 42 scroll_area, tooltip, button, dialog, input, menu, sidebar
46 Skeleton A placeholder that stands in for content while it loads. 61 1 skeleton
47 Slider Selects a value or range along a track. 207 3 slider
48 Sortable Rows people drag, or move with the keyboard, to reorder them and move them between groups. 980 15 sortable
49 Spinner An animated indicator that shows work in progress. 80 3 spinner
50 Switch Toggles a setting on or off. 151 6 switch
51 Tabs Shows one panel from a set of layered sections. 222 9 tabs
52 Tag A compact chip for a status, role, or removable filter. 163 5 button, tag
53 Textarea A styled multi-line editor backed by native GPUI editing. 10 1 input, textarea
54 Title Bar A draggable custom window title bar with window controls. 271 4 title_bar
55 Toast A brief notification shown above the application. 677 15 button, toast
56 Toggle A two-state button that can be on or off. 166 7 toggle
57 Toggle Group Groups two-state buttons with shared selection. 207 11 toggle_group
58 Toolbar Groups controls for a related set of actions. 278 8 input, toolbar
59 Tooltip Shows short information on hover or keyboard focus. 240 2 tooltip
60 Virtual List Large lists with stable selection, keyboard navigation, and fast fixed-height rows. 966 20 scroll_area, tooltip, virtual_list