Install with Vite

Vite is a build tool, not a framework: an application built with it alone has no routing and no server rendering. React recommends starting new applications with a framework; use this guide when a client-only application is what you want. Follow Vite’s current requirements for your Node.js runtime.

1. Create the application with LoamUI

shell

pnpm dlx loamui@latest create --framework vite

shell

npx loamui@latest create --framework vite

shell

yarn dlx loamui@latest create --framework vite

shell

bunx loamui@latest create --framework vite

This runs create vite with the React and TypeScript template, installs @loamui/core, replaces the template’s src/index.css — an unlayered reset — with the layer order, writes the welcome component and points src/App.tsx at it, and then runs init: the stylesheet link in index.html, Stylelint, Oxlint and Oxfmt with the composition checker and a check script, a LoamUI section in AGENTS.md, and the agent skills. Give the directory after create, or answer the prompt.

Already have an application? Run init in it instead:

shell

pnpm dlx loamui@latest init

shell

npx loamui@latest init

shell

yarn dlx loamui@latest init

shell

bunx loamui@latest init

init only adds — nothing you have is replaced — and running it again changes nothing; --dry-run shows the plan. It puts the layer order at the top of src/index.css, keeping your rules, adds the stylesheet link to index.html, and adds the checks, scripts and skills. Follow the existing-project workflow before changing its styling foundation.

2. Check your first interface

create wrote src/components/Welcome.tsx with welcome.css beside it and rendered it from src/App.tsx; in an existing application, copy the foundation example there and omit "use client", which has no meaning here.

shell

pnpm run dev

shell

npm run dev

shell

yarn run dev

shell

bun run dev

Check the interface, then stop the server and verify the production build:

shell

pnpm run buildpnpm run preview

shell

npm run buildnpm run preview

shell

yarn run buildyarn run preview

shell

bun run buildbun run preview

Once the foundation works, build with the skill.

What create and init did, by hand

The same setup by hand

Create a React and TypeScript project:

shell

pnpm create vite@latest my-app --template react-tscd my-app

shell

npm create vite@latest my-app -- --template react-tscd my-app

shell

yarn create vite my-app --template react-tscd my-app

shell

bun create vite my-app --template react-tscd my-app

Install the package:

shell

pnpm add @loamui/core

shell

npm install @loamui/core

shell

yarn add @loamui/core

shell

bun add @loamui/core

Link the stylesheet

Add the core stylesheet to the <head> of index.html, before the application’s script:

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@loamui/core@0.2.0/dist/styles.css" />

The browser loads tokens, element styles and component styles without sending core CSS through Vite, which avoids a parsing limitation in Lightning CSS. Do not add a JavaScript import or CSS @import of @loamui/core/styles.css. No provider is needed.

The URL is pinned to the installed version of @loamui/core; keep the two in step when you update. See stylesheet delivery for self-hosting.

Declare the layer order

Start src/index.css with the layer order, before any imports or rules that create LoamUI layers; src/main.tsx already imports it:

CSS

@layer loamui.tokens, loamui.elements, loamui.components;

For a fresh application, replace the template’s styles with that declaration: they are an unlayered reset, and an unlayered rule overrides LoamUI’s element styles. Preserve existing application styles when integrating into a working project. Import recipe styles alongside their components.

The checks, scripts and skills are described in Build with the skill.