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.

Documention

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

Quick Start

1. Install moraine in a Solid project

bun add moraine solid-js

2. Setup Styles

UnoCSS as example here (@subf/unocss is a custom subset collection made by me).

Also, Tailwind CSS is supported with the experimental Moraine plugin.

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

export default defineConfig({
  presets: [presetWind4(), presetMoraine()],
})

3. Now you can import components directly from moraine.

import { Button, Input } from 'moraine'

function App() {
  return (
    <div class="flex flex-col gap-3">
      <Input placeholder="Enter text" />
      <Button variant="outline">Save changes</Button>
    </div>
  )
}

Development

# Install dependencies
bun install

# Start development build
bun run dev

# Run tests
bun run test

# Start docs development server
bun run docs

# Run format, lint and type check
bun run qa

License

MIT

Credits

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