MainLayout
Acme
Page content goes here
Every component and state exported from the visual packages. If something is exported and not on this page, that is a bug — see apps/gallery/README.md.
This field has an error
This field has an error
Regular paragraph text with bold, italic, and inline code.
A blockquote for emphasis.
| Column A | Column B |
|---|---|
| 1 | 2 |
An external link opens in a new tab by default.
Eyebrow text
Supporting description copy goes here.
A short description of this feature.
A short description of this feature.
Only the two required props plus a description.
Active, favorited, and carrying metric slots.
Grid variant, with a principal assigned.
Detail variant, with markdown body and aside actions.
export function greet(name: string) {
return `Hello, ${name}`;
}Panel body content.
Toggle the header to collapse this.
previewPosition="end" (default)
Preview on the right -- the default previewPosition="end".
previewPosition="start"
Preview on the left -- previewPosition="start" mirrors the layout.
previewVariant="overlay"
previewVariant="overlay" -- the preview fills the section as a full-bleed background behind a single text column, with a scrim for contrast.
Something is wrong
Last typed value: (nothing yet)
Default (not sticky, opaque)
transparent -- over a hero-style background
sticky + hideOnScroll -- scroll inside the box below: the header ducks out of view scrolling down, and peeks back the moment you scroll up
Scrollable content line 1.
Scrollable content line 2.
Scrollable content line 3.
Scrollable content line 4.
Scrollable content line 5.
Scrollable content line 6.
Scrollable content line 7.
Scrollable content line 8.
Scrollable content line 9.
Scrollable content line 10.
Scrollable content line 11.
Scrollable content line 12.
The primary header for an authenticated app -- logo, an optional center slot (e.g. search), and an account slot (typically AccountMenu). Sticky by default, unlike Header.
variant="default"
variant="alt"
variant="hero"
variant="cta"
variant="transparent"
spacing="default"
spacing="large"
spacing="none"
Toaster is mounted once, at the root layout -- these buttons fire a real toast via the imperative toast() call; watch the bottom-right corner.
position -- each box below has its own contained Toaster (a CSS transform makes it a containing block for the toast's fixed positioning, so it stays inside the box instead of covering the real page)
position="corner"
position="mid"
position="banner"
ThemeProvider is mounted once at the gallery's root layout. SettingsOverlay is a ready-made modal over it -- mode switching plus a color picker per token, primary/secondary first. The floating button in the corner of the page (see FloatingActionButton above) opens the same overlay -- drag it out of the way, or click it.
Working endpoint
Failing endpoint -- fill in the fields and submit to see the submitError banner
extraFields -- caller-defined fields, included in the submission with zero code changes on either end
Field-level validation errors
Name is required
Enter a valid email address
Message is required
Your message has been received. We'll get back to you soon.
The standard shape for a legal or long-form content page.
20 August 2026
A paragraph describing what gets collected.
A paragraph describing how it gets used.
A two-page demo manifest -- a real one comes from the build-wiki CLI.
docs/README.mdThis is a demo wiki. See the Guides page.
A demo roadmap.
Building the thing, one phase at a time.
Already shipped.
Building the foundation.
The mechanism the rest of the product runs on.
Open to real users.
Ideas that haven't been scoped yet.
A manual override for the system-preference default.
Who it's for, not just what's next.
Every story here traces back to a persona's actual problem, not a feature someone thought was neat.
As Andy, I want to see proof at every turn, so I never have to take a vendor's word for it.
As Andy, I want a history of what changed and when, so I can answer questions later without re-deriving them.
As Eric, I want the fastest path through whatever's mine.
As Eric, I want to put our logo on every exported document, even though it doesn't change what the document proves.