Browse Learn

Introduction

Turn your ideas into beautiful interfaces with a shared design language. Layout UI gives you and your AI consistent components, balanced spacing, and room to make the result your own.

Choose your starting point

Start with AI

Describe your idea and give your assistant the component contracts and design guidance to build it well.

Open the AI Guide

Compose visually

Explore blocks and templates, adjust your theme, and assemble a page you can take into your project.

Explore Create

Work in code

Start with native HTML and CSS, or use the tested examples for your application framework.

Explore Integrations

Available today: native components, page blocks, starter templates, a live theme builder, and tested framework integrations for Button, Input, Dialog, and Theme. Choose your own routing, state, and backend.

Start with the foundation

For a standalone page, save the foundation CSS in your project and link it from your HTML. No package manager or compilation step is required. For an existing application, follow the integration guide to choose scoped styles and the behaviors you need.

Get CSS

<link rel="stylesheet" href="/css/app.css">

Compose a first component

Workspace

A place for your next idea.

Start small. Make it yours.

Get Started

<article class="panel stack">
  <span class="badge">Workspace</span>
  <h3>A place for your next idea.</h3>
  <p>Start small. Make it yours.</p>
  <a class="btn" href="/docs">Get Started</a>
</article>

Consistency starts with shared decisions

Use the same spacing, type hierarchy, colors, and interaction patterns across every page. Start with the defaults, then adjust shared tokens instead of styling each component separately.

Structure

.stack arranges content vertically. .cluster wraps a row. .grid adapts columns.

Presentation

.panel, .btn, and .badge share the same colors and visual rhythm.

Make it yours

Use semantic color tokens instead of hardcoded colors. Set data-theme="dark" and data-palette="iris" on the HTML element to select a combination. This website starts new visitors with Aurora and follows their system light/dark preference. Saved choices take priority. The downloadable foundation keeps its own defaults; use the theme API or Create to configure your project.

:root {
  --radius: 12px;
  --space: 1.5rem;
}

.my-section {
  background: var(--surface);
  color: var(--ink);
}

Explore the foundation

Start with typography, compose a layout, or give your assistant the AI Guide.

Use it in your stack

Build standalone multipage sites with ordinary links, or mount and dispose interactions in a single-page app. Working examples cover React, Next.js, Vue, Nuxt, Angular, Svelte, and Astro, with shared Button, Input, Dialog, and Theme contracts.

Explore Integrations