View as Markdown
Installation
LoamUI works in any React 19 setup. There's no provider and no build plugin: just a package and a stylesheet.
1. Install the package
pnpm add @loamui/core2. Import the styles
Import the token stylesheet once at the root of your app. It defines the --loam-* design
tokens and the base layer that every component builds on.
// Next.js App Router: app/layout.tsximport "@loamui/core/styles.css";
3. Use a component
import { Button, Field, Input } from "@loamui/core"; export function SignIn() { return ( <form> <Field.Root> <Field.Label>Email</Field.Label> <Input type="email" autoComplete="email" /> </Field.Root> <Button type="submit">Sign in</Button> </form> );}
Framework notes
Next.js
LoamUI components are React Server Component friendly. Interactive components mark themselves
"use client" as needed, so you can drop them anywhere.
Vite
Import @loamui/core/styles.css in your main.tsx entry. No plugin required; the styles are
plain CSS.
LoamUI ships static CSS with cascade layers. If you use your own
@layer order, the LoamUI layers are named
loamui.tokens, loamui.elements and
loamui.components.