GitHub

layout.registry

The registry shown behind a demo app, decorative: the entries for what is on screen, the current one lit

Component

<Layout>

Renders

<div>

Profile

UI
View as Markdown

Layout intents

Example

Preview
<Layout intent="layout.registry">
  …
</Layout>

Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

  • If it is

    Use

  • The registry shown behind a demo app, decorative: the entries for what is on screen, the current one lit

    layout.registry this page

  • Code someone needs to read or copy

    layout.listing

Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

For registry authors

Starter intents. These are the intents prongs add puts in your registry, shown in this site’s theme. Yours are your own registry.ts: rename, restyle and add to them, and see them with prongs add gallery.

What this intent is built from and its entry in components/prongs/registry.ts. You only need this to change how it looks or to add an intent like it.

How layout.registry resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

  • arrange.stack

    Children in a column, free to shrink inside a row or grid

    flex min-w-0 flex-col
  • layout.registry

    The registry shown behind a demo app, decorative: the entries for what is on screen, the current one lit

    pointer-events-none absolute inset-0 hidden select-none
overflow-hidden xl:flex
[mask-image:linear-gradient(to_right,black_8%,color-mix(in_srgb,black_35%,transparent)_24%,transparent_60%),linear-gradient(to_bottom,transparent,black_15%,black_85%,transparent)]
[mask-composite:intersect]
Final classes
min-w-0 flex-col pointer-events-none absolute inset-0 hidden
select-none overflow-hidden xl:flex
[mask-image:linear-gradient(to_right,black_8%,color-mix(in_srgb,black_35%,transparent)_24%,transparent_60%),linear-gradient(to_bottom,transparent,black_15%,black_85%,transparent)]
[mask-composite:intersect]
Definition
TS
'layout.registry': {
  kind: 'semantic',
  description: 'The registry shown behind a demo app, decorative: the entries for what is on screen, the current one lit',
  refs: ['arrange.stack'],
  binding: {
    classes: 'pointer-events-none absolute inset-0 hidden select-none overflow-hidden xl:flex [mask-image:linear-gradient(to_right,black_8%,color-mix(in_srgb,black_35%,transparent)_24%,transparent_60%),linear-gradient(to_bottom,transparent,black_15%,black_85%,transparent)] [mask-composite:intersect]',
  },
  notFor: [
    {
      context: 'code someone needs to read or copy',
      instead: 'layout.listing',
    },
  ],
},