# Moraine

> Accessible, composable SolidJS components with atomic class styling for UnoCSS and Tailwind.

Moraine is an accessible, composable SolidJS component library. Use the linked Markdown pages for installation guidance, component behavior, examples, and API details.

## Guides

- [Introduction](https://ui.subf.dev/index.md): A comprehensive SolidJS component library inspired by Nuxt UI and shadcn.
- [Styling](https://ui.subf.dev/styling.md): Configure Moraine design tokens and component styles with UnoCSS or Tailwind CSS.
- [TypeScript](https://ui.subf.dev/typescript.md): Use Moraine component props, namespace types, values, items, and callback contexts safely.
- [Utils](https://ui.subf.dev/utils.md): Public helper hooks and low-level utilities for building custom Moraine-based primitives.

## Form

- [Form](https://ui.subf.dev/form.md): Styled Formisch form that provides its store to Moraine form fields.
- [FormField](https://ui.subf.dev/form-field.md): Form field wrapper providing label, description, and validation message layout.
- [Input](https://ui.subf.dev/input.md): Text input component with icon slots, loading state, and form field integration.
- [Textarea](https://ui.subf.dev/textarea.md): Multi-line text input with autoresize support and form field integration.
- [InputNumber](https://ui.subf.dev/input-number.md): Numeric input with increment and decrement controls, step, and min/max constraints.
- [Checkbox](https://ui.subf.dev/checkbox.md): Single checkbox control with card and list variants and custom true/false values.
- [CheckboxGroup](https://ui.subf.dev/checkbox-group.md): Multi-select checkbox group with card, list, and table layout variants.
- [RadioGroup](https://ui.subf.dev/radio-group.md): Single-select radio group with card, list, and table layout variants.
- [Switch](https://ui.subf.dev/switch.md): Toggle switch control with icon slots and loading state.
- [Select](https://ui.subf.dev/select.md): Dropdown select component with search and custom item rendering.
- [MultiSelect](https://ui.subf.dev/multi-select.md): Dropdown select component with search, multi-select, and custom item rendering.
- [Slider](https://ui.subf.dev/slider.md): Range slider component with single or multiple thumbs and step markers.
- [FileUpload](https://ui.subf.dev/file-upload.md): Drag-and-drop file upload component with progress tracking and file list management.

## General

- [Button](https://ui.subf.dev/button.md): Button component with polymorphic rendering and automatic loading state.
- [ButtonGroup](https://ui.subf.dev/button-group.md): Cohesive group of related buttons with shared size, variant, and orientation.
- [Icon](https://ui.subf.dev/icon.md): Renders an icon from a UnoCSS icon class, JSX element, or render function.
- [Badge](https://ui.subf.dev/badge.md): Compact label component with icon slots and variant styles.
- [Avatar](https://ui.subf.dev/avatar.md): Circular user or entity avatar with fallback initials and an optional indicator.
- [AvatarGroup](https://ui.subf.dev/avatar-group.md): Group of overlapping avatars with an optional overflow count.
- [Card](https://ui.subf.dev/card.md): Structured content container with optional header, body, footer, and action slots.
- [Accordion](https://ui.subf.dev/accordion.md): Stacked disclosure component with single or multiple expanded sections.
- [Collapsible](https://ui.subf.dev/collapsible.md): Expandable content section with optional height transitions.
- [Separator](https://ui.subf.dev/separator.md): Visual divider with configurable orientation, style, and optional label content.
- [Progress](https://ui.subf.dev/progress.md): Determinate or indeterminate progress indicator with optional step labels.
- [List](https://ui.subf.dev/list.md): Headless collection renderer with polymorphic roots and caller-controlled virtualization.
- [Resizable](https://ui.subf.dev/resizable.md): Resizable panel layout with draggable dividers and keyboard support.
- [Kbd](https://ui.subf.dev/kbd.md): Keyboard keycap component with configurable size, variant, and accessible label.
- [KbdGroup](https://ui.subf.dev/kbd-group.md): Group of keyboard shortcut keys supporting simultaneous chords and ordered sequences.

## Navigation

- [Breadcrumb](https://ui.subf.dev/breadcrumb.md): Breadcrumb navigation trail with separator icons and optional wrapping.
- [Tabs](https://ui.subf.dev/tabs.md): Tabbed navigation component with configurable orientation and variant styles.
- [Stepper](https://ui.subf.dev/stepper.md): Tab-structured step navigation with configurable orientation and separator layout.
- [Pagination](https://ui.subf.dev/pagination.md): Page navigation component with configurable sibling count and edge display.
- [CommandPalette](https://ui.subf.dev/command-palette.md): Searchable command list with groups, keyboard navigation, and customizable rendering.
- [SidebarFrame](https://ui.subf.dev/sidebar-frame.md): Sidebar and main frame with mobile Sheet support and desktop layout wrappers.

## Overlay

- [Popup](https://ui.subf.dev/popup.md): Low-level overlay primitive providing portal, backdrop, and content positioning.
- [Popover](https://ui.subf.dev/popover.md): Click-triggered floating content panel anchored to a trigger element.
- [Tooltip](https://ui.subf.dev/tooltip.md): Hover-triggered informational overlay anchored to a trigger element.
- [Dialog](https://ui.subf.dev/dialog.md): Modal dialog with structured slots, backdrop overlay, and dismissal control.
- [Sheet](https://ui.subf.dev/sheet.md): Slide-in panel overlay from any screen edge with structured content slots.
- [DropdownMenu](https://ui.subf.dev/dropdown-menu.md): Triggered action menu anchored to its child content.
- [ContextMenu](https://ui.subf.dev/context-menu.md): Menu triggered by right-click or long press on its child content.
- [Toast](https://ui.subf.dev/toast.md): Temporary notification messages backed by the solid-toaster package.