---
title: Components
description: Browse all Moraine components by category and choose the right
  component for your task.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# Components

> Browse all Moraine components by category and choose the right component for your task.

## General

- [Accordion](https://moraine.subf.dev/components/accordion.md): Coordinate one or several expandable sections with shared disclosure rules.
- [Avatar](https://moraine.subf.dev/components/avatar.md): Show a person or resource image with a fallback while the image loads.
- [AvatarGroup](https://moraine.subf.dev/components/avatar-group.md): Show a compact stack of avatars with an overflow count.
- [Badge](https://moraine.subf.dev/components/badge.md): Label status or metadata beside related content.
- [Button](https://moraine.subf.dev/components/button.md): Render actions and links with loading, icons, and semantic roots.
- [ButtonGroup](https://moraine.subf.dev/components/button-group.md): Join related buttons into one visual control set.
- [Card](https://moraine.subf.dev/components/card.md): Group related content and actions on a neutral surface.
- [Collapsible](https://moraine.subf.dev/components/collapsible.md): Disclose one content region from a caller-placed trigger.
- [Empty](https://moraine.subf.dev/components/empty.md): Present an empty or unavailable application state with optional media and actions.
- [Icon](https://moraine.subf.dev/components/icon.md): Render decorative or named icons from utility names or JSX.
- [Kbd](https://moraine.subf.dev/components/kbd.md): Display one keyboard key as shortcut notation.
- [KbdGroup](https://moraine.subf.dev/components/kbd-group.md): Display a multi-key shortcut with shared styling.
- [List](https://moraine.subf.dev/components/list.md): Render caller-defined rows with optional virtual scrolling.
- [Progress](https://moraine.subf.dev/components/progress.md): Show measurable or indeterminate task progress.
- [Resizable](https://moraine.subf.dev/components/resizable.md): Arrange panels with draggable and keyboard-operated size boundaries.
- [ScrollArea](https://moraine.subf.dev/components/scroll-area.md): Scroll native content with optional fades at overflowing edges.
- [Separator](https://moraine.subf.dev/components/separator.md): Divide content regions with an oriented semantic line.
- [Skeleton](https://moraine.subf.dev/components/skeleton.md): Show a placeholder while content is loading.
- [ToggleButton](https://moraine.subf.dev/components/toggle-button.md): Toggle a persistent state with independently configured off and on button variants.

## Form

- [BaseSelect](https://moraine.subf.dev/components/base-select.md): Compose a custom listbox with selection, navigation, and popup ownership.
- [Checkbox](https://moraine.subf.dev/components/checkbox.md): Capture an independent checked, unchecked, or mixed choice.
- [CheckboxGroup](https://moraine.subf.dev/components/checkbox-group.md): Collect multiple choices as one array-valued field.
- [Combobox](https://moraine.subf.dev/components/combobox.md): Choose one collection item through an editable search input.
- [Field](https://moraine.subf.dev/components/field.md): Associate a control with its label, help, error, and inherited state.
- [FileUpload](https://moraine.subf.dev/components/file-upload.md): Select and validate local files through a dropzone or trigger.
- [Form](https://moraine.subf.dev/components/form.md): Bind schema fields, validation, submission, and reset through createForm.
- [Input](https://moraine.subf.dev/components/input.md): Edit single-line text with native input events and Field integration.
- [InputGroup](https://moraine.subf.dev/components/input-group.md): Place addons and actions around a native text control.
- [InputNumber](https://moraine.subf.dev/components/input-number.md): Edit a constrained number with step buttons and keyboard controls.
- [MultiSelect](https://moraine.subf.dev/components/multi-select.md): Choose multiple collection items in a searchable tag field.
- [RadioGroup](https://moraine.subf.dev/components/radio-group.md): Choose one value from a visible set of radio options.
- [Select](https://moraine.subf.dev/components/select.md): Choose one item from a non-editable collection.
- [Slider](https://moraine.subf.dev/components/slider.md): Choose a number or range by moving one or more thumbs.
- [Switch](https://moraine.subf.dev/components/switch.md): Toggle an on/off setting with switch semantics and form values.
- [Textarea](https://moraine.subf.dev/components/textarea.md): Edit multi-line text with optional auto-sizing and Field integration.

## Navigation

- [Breadcrumb](https://moraine.subf.dev/components/breadcrumb.md): Show a resource hierarchy and mark its current page.
- [CommandPalette](https://moraine.subf.dev/components/command-palette.md): Search grouped commands and navigation targets from an inline surface.
- [Navigation Menu](https://moraine.subf.dev/components/navigation-menu.md): Navigate a website through links and animated shared panels.
- [Pagination](https://moraine.subf.dev/components/pagination.md): Navigate a result set by page using state or destinations.
- [SidebarFrame](https://moraine.subf.dev/components/sidebar-frame.md): Build desktop sidebar navigation that moves into a mobile drawer.
- [Stepper](https://moraine.subf.dev/components/stepper.md): Guide users through a sequence of panels and completion states.
- [Tabs](https://moraine.subf.dev/components/tabs.md): Switch between peer panels with managed focus and activation.

## Overlay

- [ContextMenu](https://moraine.subf.dev/components/context-menu.md): Open item-specific actions at a context interaction point.
- [Dialog](https://moraine.subf.dev/components/dialog.md): Present a labeled modal task with structured content and dismissal.
- [DropdownMenu](https://moraine.subf.dev/components/dropdown-menu.md): Open a compact action menu from a visible trigger.
- [Modal](https://moraine.subf.dev/components/modal.md): Compose a modal trigger, backdrop, and content surface.
- [Popover](https://moraine.subf.dev/components/popover.md): Show anchored interactive content from click or hover.
- [Sheet](https://moraine.subf.dev/components/sheet.md): Present a focused drawer from a viewport edge.
- [Toast](https://moraine.subf.dev/components/toast.md): Show temporary status messages through solid-toaster integration.
- [Tooltip](https://moraine.subf.dev/components/tooltip.md): Show supplemental, non-interactive information on hover or focus.