One theme, two ways to build.

Prism is a soft multicolor preset blending mint, sky, lilac, and peach. Named colors, scoped surface and border paints, and readable display text share the same foundation in standalone HTML and React. This standalone demo uses the same theme and dialog controller as the framework integrations.

A little more color.

Color with purpose

Mint, sky, lilac and peach blend on the surface and border. Focus indicators and inputs stay solid; primary buttons can opt into a multicolor fill.

Native input, no JavaScript required.

Customize the palette

Create a project

Nothing is sent or saved. This form demonstrates shared native behavior.

Standalone

Load the optional stylesheet and ESM modules. Your HTML remains native. There is no framework or build step.

import {prism, mountTheme} from '/integrations/theme.js';
import {createDialog} from '/integrations/dialog.js';
const theme = mountTheme(workspace, prism, 'light');
const dialog = createDialog(document.querySelector('dialog'));
openButton.addEventListener('click', () => dialog.open());
// Before removing this interface:
// dialog.dispose(); theme.dispose();

For server rendering, themeCSS(prism) returns scoped light/dark CSS. Add data-layout-theme="prism" and data-theme="light" to the container before it paints.

React

The local prerelease packages live in packages/core and packages/react. The runnable example is in examples/react. React is a peer dependency; standalone pages never load it. From a repository checkout:

python3 ops/web/integrations.py
cd examples/react
npm install
npm run dev
import {Button, Input, Dialog, Theme} from '@layout-ui/react';
import {prism} from '@layout-ui/core/theme';
import '@layout-ui/core/components.css';

<Theme theme={prism} mode="light">
  <Button onClick={() => setOpen(true)}>Create Project</Button>
  <Dialog title="Create a project" open={open} onOpenChange={setOpen}>
    <Input label="Name" value={name}
      onChange={event => setName(event.target.value)} />
  </Dialog>
</Theme>

Input supports controlled and uncontrolled values, native refs, help, and errors. Dialog supports controlled state or a defaultOpen value and imperative ref. Its native modal behavior starts after mounting. Interactive components are client components; use a deterministic theme mode for server rendering and hydration.

Paints and boundaries

For existing apps, components.css confines its reset and component rules to the theme container using CSS @scope and a layout cascade layer. Import utilities.css for optional shared layout helpers. The standalone styles.css includes the full page foundation. Use one entry, not both.

A version 1 theme defines named colors, mode overrides, corners, fonts, finishes, and separate surface, border, text and button paints. Each paint has two to eight ordered color stops. Decorative paints are opt-in, and can be nested without changing the surrounding application.

Use gradient text for short headings on neutral surfaces. Custom imagery, overlapping glass and gradients still need contrast review. Reduced transparency and forced colors retain solid fallbacks. No animated gradients, CDN fonts or remote runtime dependencies are required. Custom fonts are opt-in: choose an installed family, a self-hosted WOFF2 URL, or explicitly load a family from Google Fonts. Default presets use local fonts.