Layout Primitives

These are tiny layout helpers for the boring-but-constant stuff: stacks, rows that wrap, rows that do not wrap, grids, sidebars, responsive groups, and wide content. Use them when plain markup starts collecting the same flex and grid styles over and over.

PStack

PStack puts things in a column with one clear gap. It also clears Pico's child margins, so the spacing stays predictable.

Name

vue

<p-stack gap="1rem">
  <p-field label="Name">
    <p-input v-model="stackName" name="name" />
  </p-field>
  <p-field label="Email">
    <p-input v-model="stackEmail" type="email" name="email" />
  </p-field>
  <p-button>Save profile</p-button>
</p-stack>

PCluster

PCluster is for rows that can wrap. It works well for action bars, tags, filters, and compact controls.

vuetypescriptpicocsslayout

vue

<p-cluster gap="0.5rem">
  <p-button>Save</p-button>
  <p-button variant="secondary">Preview</p-button>
  <p-button variant="contrast" outline>Delete</p-button>
</p-cluster>

PInline

PInline keeps a small run together on one line. Handy for breadcrumbs, metadata, and icon-label pairs.

vue

<p-inline gap="0.5rem" as="nav" aria-label="Breadcrumb">
  <a href="#" @click.prevent>Docs</a>
  <span aria-hidden="true">/</span>
  <a href="#" @click.prevent>Layout</a>
  <span aria-hidden="true">/</span>
  <span>PInline</span>
</p-inline>

PGrid

PGrid can behave like Pico's grid, or you can give it a minimum column width and let the cards wrap naturally.

Forms

Overlays

Navigation

vue

<p-grid min="12rem" gap="1rem">
  <div class="tile">Forms</div>
  <div class="tile">Overlays</div>
  <div class="tile">Navigation</div>
</p-grid>

PSidebar

PSidebar gives the first child a sidebar width and lets the second child fill the rest. When things get tight, they stack.

vue

<p-sidebar side-width="11rem" content-min="60%" gap="1.5rem">
  <nav aria-label="Settings sections">...</nav>
  <section>Account settings</section>
</p-sidebar>

PSwitcher

PSwitcher lets a group sit side by side when there is room. Below the threshold, each child gets its own row.

Plan Choose the plan.

Billing Add payment details.

Confirm Review and finish.

vue

<p-switcher threshold="28rem" gap="1rem">
  <section>Plan</section>
  <section>Billing</section>
  <section>Confirm</section>
</p-switcher>

PScroll

PScroll is the little wrapper for wide stuff. Tables, long rows, and other awkward content can scroll without stretching the whole page.

Primitive	Pattern	Wraps	Good for
PStack	Vertical rhythm	No	Forms and page sections
PCluster	Wrapping row	Yes	Actions, filters, tags
PGrid	Responsive columns	Yes	Card collections

vue

<p-scroll>
  <table>
    ...
  </table>
</p-scroll>

API

Layout Props

Name	Type	Default	Description
`PStack gap`	`string`	'var(--pico-spacing)'	Vertical spacing between children.
`PStack as`	`string`	'div'	Rendered element.
`PCluster/PInline gap`	`string`	'var(--pico-spacing)'	Horizontal spacing between children.
`PCluster/PInline align`	`string`	'center'	CSS align-items value.
`PCluster/PInline justify`	`string`	'flex-start'	CSS justify-content value.
`PCluster/PInline as`	`string`	'div'	Rendered element.
`PGrid min`	`string`	'0%'	Minimum column width before wrapping. The default matches Pico's grid behavior.
`PGrid gap`	`string`	'var(--pico-grid-column-gap, var(--pico-spacing))'	Grid gap.
`PSidebar side`	`'left' \| 'right'`	'left'	Which side the sidebar appears on.
`PSidebar sideWidth`	`string`	'15rem'	Preferred sidebar width.
`PSidebar contentMin`	`string`	'50%'	Minimum content width before the layout stacks.
`PSwitcher threshold`	`string`	'30rem'	Container width where children switch from stacked to side-by-side.
`PScroll as`	`string`	'div'	Rendered element for the overflow wrapper.

Slots

Name	Type	Default	Description
`default`	`slot`	-	Layout children.