Layout V2

beta

Overview

The LayoutV2 component provides a set of flexible layout primitives for building consistent UI layouts. It includes Grid, Flex, Horizontal, and Vertical components with a clean, type-safe API.

Flex Component

The Flex component is a versatile layout container that allows you to arrange items in a row or column with various alignment and spacing options.

Basic Flex (Row Direction)

Flex with Column Direction

Flex with Alignment and Justification

Flex with Gap

Flex with Wrap

Flex with Custom Element

Grid Component

The Grid component provides a powerful way to create grid layouts with precise control over columns, rows, and spacing.

Basic Grid with Equal Columns

Grid with Different Column Sizes

Grid with Defined Rows

Grid with Numeric Columns

Grid with Numeric Rows and Columns

Grid with Alignment and Justification

Horizontal Component

The Horizontal component is a convenient wrapper around Flex that’s pre-configured for row layouts with consistent spacing options.

Horizontal with Alignment

Vertical Component

The Vertical component is a convenient wrapper around Flex that’s pre-configured for column layouts with consistent spacing options.