---
title: Introduction
description: Overview of Moraine, a composable, styled component library for SolidJS.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# Introduction

> Overview of Moraine, a composable, styled component library for SolidJS.

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](https://moraine.subf.dev/docs/installation.md) in your SolidJS application.
2. Configure [UnoCSS](https://moraine.subf.dev/docs/unocss.md) or [Tailwind CSS](https://moraine.subf.dev/docs/tailwind.md) to generate component styles.
3. [Choose a component](https://moraine.subf.dev/components.md) 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](https://moraine.subf.dev/docs/composition.md) for parts, slots, and DOM ownership, and
[Polymorphism](https://moraine.subf.dev/docs/polymorphism.md) 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](https://moraine.subf.dev/docs/customization.md), then see [Theming](https://moraine.subf.dev/docs/theming.md) for shared overrides
and [Design tokens](https://moraine.subf.dev/docs/design.md) for colors, spacing, and dimensions.

## Integrate behavior

Use [Form](https://moraine.subf.dev/components/form.md) for schema validation and submission, or
[Field](https://moraine.subf.dev/components/field.md) for standalone labels and messages. The
[Accessibility guide](https://moraine.subf.dev/docs/accessibility.md) explains naming and focus responsibilities; the
[SSR guide](https://moraine.subf.dev/docs/ssr.md) covers initial state, IDs, and browser-only content.