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 = "11 layout components from @wrnexus/ui."
}
view {
11 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 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.
Drag the divider to resize these panels.
Your selected file appears here.
Theme-aware, responsive layout splitter component.
Render an accessible internal or external link with target, relation, size, color, and public focus or click events.
Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.
Typography creates consistent hierarchy and comfortable reading rhythm.
Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.