Aside

Place supporting content alongside the main reading area.

@sigil-ui/componentsReact

Preview

import { Aside } from "@sigil-ui/components";

<Aside sticky={false} width="100%" className="p-[var(--s-space-16)]"><h3>Project details</h3><p>Updated today</p><p>Three contributors</p></Aside>

Prop	Type	Default	Description
`width`	`number \| string`	—	Width of the rendered content.
`sticky`	`boolean`	—	Sticky configuration.
`borderSide`	`"left" \| "right" \| "none"`	—	Border Side configuration.

CSS Variable	Purpose
`--s-border`	Border
`--s-surface`	Surface

AppShell

Arrange application navigation, a sidebar, and the main workspace.

Banner

Display a full-width message within the page layout.