Layout UI and Astro

At a glance

A useful pairing for content-heavy sites

Documentation, product pages, and editorial content benefit from readable typography and consistent navigation, forms, and calls to action. Layout UI provides those visual building blocks; Astro handles the site’s content and rendering structure.

Choose the amount of application structure you need

For a small multipage site, standalone Layout UI pages may be enough. Astro adds a build pipeline and content-oriented conventions, with islands for selective interactivity. Neither choice guarantees better performance or search rankings: measure the shipped page and provide useful, accessible content.

Keep enhancements intentional

Use the .astro Button, Input, Dialog, and Theme components. Buttons, inputs and theme tokens render as HTML; dialog behavior reconnects through a light-DOM custom element when ClientRouter replaces a page. The example cleans up its form listeners before swaps. Add framework islands only where your application needs their state model.

From a brief to a considered screen

Start with a product landing page. Tell your AI who it serves, the main action, and what should feel calm, prominent, or compact. Read the AI guide and choose documented components before adding custom styling.

Preserve semantic content and real links. Follow the Astro example for enhancements, and check direct visits, client navigation, and keyboard behavior.

Refine hierarchy and spacing first, then color and motion. Compare the actual screen at phone and desktop widths, in light and dark mode. Shared defaults provide a starting point; the finished experience still needs review.