Skip to main content

Introduction

The Split component (also known as Flex) creates flexible layouts using flexbox:
This creates a flexible sidebar layout where the first section grows to fill available space.

Breakpoint

Control when the horizontal layout starts:
string | Closure
default:"'md'"
The Tailwind breakpoint (sm, md, lg, xl, 2xl).
On smaller devices, components stack vertically.

Controlling growth

By default, all components in a Flex grow to fill space. Prevent growth:
bool | Closure
default:"true"
Whether the component should grow.
Create a common sidebar pattern:

Alignment

Control how components align:

Direction

Control flex direction:
Or use responsive direction:

Gap

Control spacing between items:

Use cases

Content with metadata sidebar

Compact forms

Dashboard cards