Moraine

Inspired by Nuxt UI and shadcn, Moraine is a comprehensive SolidJS component library with atomic class styling.

[!important] Status: Beta. Breaking changes are allowed between minors before v1.0.0. Use at your own risk.

Documentation

Full guide and examples: https://moraine.subf.dev

Quick Start

1. Install moraine in a Solid project

npm add moraine solid-js

2. Configure UnoCSS or Tailwind CSS. Moraine needs the integration and a scan of its published classes to render styles.

For UnoCSS, use Wind4 with the Moraine preset:

// unocss.config.ts
import { defineConfig, presetWind4 } from '@subf/unocss'
import { presetMoraine } from 'moraine/unocss'

export default defineConfig({
  presets: [presetWind4(), presetMoraine()],
  content: {
    filesystem: [
      './index.html',
      './src/**/*.{js,ts,jsx,tsx}',
      './node_modules/moraine/dist/**/*.{mjs,jsx}',
    ],
    pipeline: {
      include: [/\.(?:mjs|js|ts|jsx|tsx|mdx?|html)(?:\?|$)/],
    },
  },
})

For Tailwind CSS v4, add the plugin and a source path relative to your stylesheet:

@import 'tailwindcss';
@plugin 'moraine/tailwind';
@source '../node_modules/moraine/dist';

Import moraine/icon.css only when you want the optional bundled icon masks. It does not replace the required preset/plugin configuration.

3. Render a component. Built-in styles work without a Provider.

import { Button, Input } from 'moraine'

function App() {
  return (
    <>
      <Input placeholder="Enter text" />
      <Button variant="outline">Save changes</Button>
    </>
  )
}

4. See the component guides for usage and Customization for style overrides. Components use built-in styles by default. Add MoraineProvider for Theme or class-merging overrides; Theming explains inheritance and composition.

Package entry points

Import components and MoraineProvider from moraine. Component subpaths and internal files are not supported entry points.

Use moraine/theme for Theme authoring, moraine/utils for composable behavior primitives, and moraine/unocss or moraine/tailwind for styling integration. moraine/virtualizer provides the optional createListVirtualizer adapter and requires @tanstack/virtual-core.

Development

This repository is a pnpm workspace with the publishable moraine package at the root and the private documentation app in docs/. Run commands from the repository root.

pnpm install
pnpm run dev
pnpm run test
pnpm run qa
pnpm run docs:build

License

MIT

Credits

• Kobalte - Accessible UI primitives
• Nuxt UI - Design inspiration
• Shadcn/ui - Component patterns
• Zaidan - Shadcn-like implementation inspiration