Components
Components
Browse every component in the library, with examples and API reference.
- Alert Inline feedback, warnings and errors.
- Avatar Initials or an image representing a person.
- Badge Labels, counts and status.
- Breadcrumb The path to the current page.
- Button Actions, links and native Rails forms.
- Card Surfaces for related content.
- Checkbox Native checkboxes with labels and hints.
- Code block Source snippets with copying, optional highlighting and collapsible long content.
- Collapsible Content that expands in place.
- Copy button Copy text or a live field value with animated confirmation and accessible feedback.
- Description list Labelled details, such as record properties.
- Dialog A focused task, with a sheet layout on phones.
- Emoji picker Search, categories and skin tones.
- Empty state A starting point when there is no content yet.
- Field Labels, controls and validation that stay connected.
- Glass A translucent surface for controls floating over content.
- Icon badge A small container for a symbol.
- Input Native single-line input.
- Keyboard shortcut Page-wide keys that focus or press an element, and the hints that show them.
- Link Inline text links with a visible underline.
- List group Grouped rows of settings, with a heading and footnote.
- Menu Actions in a floating panel.
- Native select Native options with consistent sizing.
- Nav list Navigation that marks the current page: sidebars, page contents, tab rows and a phone dock.
- Pager Previous and next links between pages in a sequence.
- Popover Content anchored to a trigger.
- Radio One choice from a short list.
- Search A full-screen search with grouped results.
- Skeleton A placeholder while content loads.
- Skip link Lets keyboard users jump past repeated navigation.
- Spinner An action in progress.
- Switch An on or off setting that submits like a checkbox.
- Table Native tables with clear headers and subtle row dividers. Keep captions, headers and scroll containers in the view.
- Tabs Panels of related content behind one tab list, with arrow key navigation.
- Textarea Room for more than one line.
- Toast Brief feedback after an action.
- Toggle Pressed controls, filter links and radio choices.
- Toggle group Mutually exclusive choices with keyboard navigation and form values.
- Tooltip A short hint on hover and keyboard focus.