Components

Components

This is an index of Components exposed by yororen_ui::component.

Each component has a dedicated page with example code.

Components are the lowest-level UI building blocks in Yororen UI:

• They focus on consistent visuals and small, composable APIs.
• Some components may own small pieces of UI state (cursor/selection, open menus, toggles).
• Higher-level behavior (virtualization control, window chrome, app-level overlays) belongs in Widgets.

Keyed state and identity

Many GPUI behaviors are stored against an ElementId.

• If a component exposes key(...), it is an alias of id(...).
• Use key(...) (stable identity) in lists, reordering UIs, and virtualization.

See: Design-Keyed-State.

One-time registration

Some components require one-time registration (keybindings, text input plumbing).

Call yororen_ui::component::init(cx) once during app startup.

See: Guide-Quick-Start.

Picking the right component

• Select vs ComboBox: use Select for small option sets; use ComboBox for large sets that benefit from search.
• Checkbox vs Switch: both are boolean toggles; use Switch for settings-style toggles.
• Button vs ClickableSurface: use Button for semantic actions; use ClickableSurface to make an existing layout clickable.

Foundation / Primitives

• Label
• Text
• Heading
• Icon
• Image
• Avatar
• Badge
• Card
• Tag
• Divider
• Spacer

Interaction

• ClickableSurface
• FocusRing
• Tooltip
• ContextMenuTrigger
• DragHandle

Buttons

• Button
• IconButton
• ToggleButton
• SplitButton
• ButtonGroup
• ShortcutHint

Inputs

• Form
• TextInput
• PasswordInput
• TextArea
• SearchInput
• ComboBox
• Slider
• NumberInput
• KeybindingInput
• FilePathInput
• TextEditState
• Checkbox
• Radio
• RadioGroup
• Switch
• Select

List / Data

• Disclosure
• ListItem
• Tree
• VirtualRow

Overlays

• Popover
• DropdownMenu
• Modal
• Toast

Progress / Status

• Spinner
• ProgressBar
• ProgressCircle
• Skeleton
• EmptyState