Skip to content
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/core

2. 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.