Core / Layout

Split

Divides a region into two purposeful areas.

Live example

Primary content

The main reading area stays first in the document.

Supporting details

Interactive preview using local sample data. Styling is intentionally left to the consuming project.

Usage

<Split>…</Split>

Adopt to your project

Keep this component semantically neutral. Use its documented props for behavior and className for project-specific spacing, width, typography, and visual treatment.

Accessibility

Keep primary content first in the reading order.

API reference

Public attribute
`ratio`
`gap`
`reverseOnMobile`
`children`

The preview above uses a safe local fixture. Confirm exact TypeScript props when adapting it to your application.

Installation

Full library
pnpm install:project /absolute/path/to/your-project

Planned guided selection
Layout → Split