---
title: Moraine
description: Composable SolidJS components with atomic class styling for UnoCSS
  and Tailwind.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# Moraine

> Composable SolidJS components with atomic class styling for UnoCSS and Tailwind.

Start with Getting Started and Installation. Use the linked Markdown pages for component behavior, examples, and API details.

## Docs


### Overview

- [Introduction](https://moraine.subf.dev/docs/getting-started.md): Overview of Moraine, a composable, styled component library for SolidJS.
- [Installation](https://moraine.subf.dev/docs/installation.md): Install Moraine, configure atomic styling, and verify your SolidJS application setup.
- [UnoCSS](https://moraine.subf.dev/docs/unocss.md): Configure the UnoCSS preset, file scanning pipelines, variant groups, and semantic color variable generation.
- [Tailwind CSS](https://moraine.subf.dev/docs/tailwind.md): Configure the Moraine Tailwind CSS plugin for Tailwind CSS v4, scanner paths, and custom utilities.

### Guides

- [Composition](https://moraine.subf.dev/docs/composition.md): Understand Moraine component architecture, single vs composite components, public parts, style slots, and DOM ownership.
- [Polymorphism](https://moraine.subf.dev/docs/polymorphism.md): Render components as alternative HTML elements or custom SolidJS components with full type safety via the as prop.
- [TypeScript](https://moraine.subf.dev/docs/typescript.md): Type component props, supporting namespaces, collections, and global compiler options in SolidJS.
- [Server-Side Rendering](https://moraine.subf.dev/docs/ssr.md): Guidelines and patterns for SSR and hydration safety in Moraine and SolidStart.
- [Accessibility](https://moraine.subf.dev/docs/accessibility.md): Accessibility principles, keyboard interaction models, and ARIA contracts in Moraine.
- [Virtualization](https://moraine.subf.dev/docs/virtualization.md): Configure virtual scrolling for long lists and searchable collections.

### Styling

- [Design Tokens](https://moraine.subf.dev/docs/design.md): Semantic CSS variables, color contrast roles, border radius multipliers, and z-index scales.
- [Customization](https://moraine.subf.dev/docs/customization.md): Style override layers, slot-based styling, and data-slot DOM contracts.
- [Theming](https://moraine.subf.dev/docs/theming.md): Define application-wide theme presets, provider scoping, dynamic theme switching, and portal styling.
- [Icons](https://moraine.subf.dev/docs/icons.md): Built-in Lucide mask icons, Icon component, component icon props, and interactive icon gallery.
- [Animations](https://moraine.subf.dev/docs/animations.md): Built-in keyframe animations, duration and easing CSS variables, and parametric transform utilities.

### Utilities

- [Class Merging](https://moraine.subf.dev/docs/utils/class-merging.md): Configure custom class conflict rules, createCn, useCn, and MoraineProvider cnConfig integration.
- [createBaseSelectSearchInput](https://moraine.subf.dev/docs/utils/create-base-select-search-input.md): Bind a custom text input to BaseSelect with accessible keyboard and IME behavior.
- [createControllableValue](https://moraine.subf.dev/docs/utils/create-controllable-value.md): Bridge controlled and uncontrolled component state with a single reactive accessor and setter pair.
- [createDisclosureState](https://moraine.subf.dev/docs/utils/create-disclosure-state.md): Track open-state metadata, dynamic content height measurements, and data attributes for collapsible panels.
- [createEventListener](https://moraine.subf.dev/docs/utils/create-event-listener.md): Attach typed DOM event listeners that clean up automatically when the Solid owner scope disposes.
- [createId](https://moraine.subf.dev/docs/utils/create-id.md): Generate unique, SSR-safe identifiers for accessibility relationships and form controls.
- [createMediaQuery](https://moraine.subf.dev/docs/utils/create-media-query.md): Create a reactive boolean accessor tracking the match status of any CSS media query.
- [createSelectableCollectionNavigation](https://moraine.subf.dev/docs/utils/create-selectable-collection-navigation.md): Add accessible keyboard navigation (arrow keys, Home/End, RTL) for tabs, radio groups, and listboxes.
- [createSlider](https://moraine.subf.dev/docs/utils/create-slider.md): Headless pointer dragging, keyboard stepping, step snapping, and thumb styles for single or multi-thumb range sliders.
- [createTransitionPresence](https://moraine.subf.dev/docs/utils/create-transition-presence.md): Keep elements mounted in the DOM until exit transitions or CSS animations finish.

## Components


### Overview

- [Components](https://moraine.subf.dev/components.md): Browse all Moraine components by category and choose the right component for your task.

### General

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

### Form

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

### Navigation

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

### Overlay

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