Columns
Create responsive balanced content columns with configurable count, gap, density, and maximum width.
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page LayoutShowcase {
layout = "showcase"
seo {
title = "Layout components"
description = "15 layout components from @wrnexus/ui."
}
view {
15 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.Layout
Create responsive balanced content columns with configurable count, gap, density, and maximum width.
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.
Theme-aware, responsive custom scrollbar component.
Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.
Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.
Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.
Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.
Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.
Theme-aware, responsive kbd component.
Theme-aware, responsive layout splitter component.
Render an accessible internal or external link with target, relation, size, color, and public focus or click events.
Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.
Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.
Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.
Typography creates consistent hierarchy and comfortable reading rhythm.
Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.