Introduction

Moraine provides styled SolidJS components for forms, navigation, overlays, and content. Components use utility classes and semantic CSS variables, with setup for UnoCSS or Tailwind CSS.

Moraine is pre-1.0; breaking changes may occur.

Set up your application#

1. Install Moraine in your SolidJS application.
2. Configure UnoCSS or Tailwind CSS to generate component styles.
3. Choose a component and copy its Basic usage example.

Read a component page#

Each page starts with when to use the component and a copyable example. The Playground lets you try presentation options. Usage explains state, composition, and behavior; the generated API reference lists props and styling targets from the library source.

Components such as Button, Input, and Select use one JSX entry point. Components such as Dialog and Card expose attached parts that you arrange yourself. Read Composition for parts, slots, and DOM ownership, and Polymorphism before changing a rendered element with as.

Adapt the styles#

Use class and object style props for local changes. Use slot classes and styles where the component exposes them, or scope shared recipe overrides with defineTheme() and MoraineProvider. Start with Customization, then see Theming for shared overrides and Design tokens for colors, spacing, and dimensions.

Integrate behavior#

Use Form for schema validation and submission, or Field for standalone labels and messages. The Accessibility guide explains naming and focus responsibilities; the SSR guide covers initial state, IDs, and browser-only content.