// Generated by scripts/generate-showcase.mjs. Do not edit directly. page LayoutShowcase { layout = "showcase" seo { title = "Layout components" description = "11 layout components from @wrnexus/ui." } view {
Component category

Layout

11 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

11 componentsMultiple use cases31 live configurations
Content columnSupporting column
Layout

Columns

Create responsive balanced content columns with configurable count, gap, density, and maximum width.

Centered container content
Layout

Container

Constrain and align page content with responsive gutters and compact, wide, or full width options.

Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.

Layout

Custom Scrollbar

Theme-aware, responsive custom scrollbar component.

Layout

Divider

Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.

OneTwoThree
Layout

Grid

Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.

Abstract violet circle on a dark surface
Layout

Image

Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.

Layout

Kbd

Theme-aware, responsive kbd component.

Project files

Drag the divider to resize these panels.

Editor

Your selected file appears here.

Layout

Layout Splitter

Theme-aware, responsive layout splitter component.

Layout

Link

Render an accessible internal or external link with target, relation, size, color, and public focus or click events.

Standard section content
Layout

Section

Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.

Readable page content

Typography creates consistent hierarchy and comfortable reading rhythm.

  • Clear headings
  • Readable paragraphs
  • Consistent lists
Layout

Typography

Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.

} }