Vertical Split

Overview

Use this component within a slide to split any content vertically.

Installation

pnpm dlx shadcn@latest add https://slide-cn.com/r/vertical-split.json

npx shadcn@latest add https://slide-cn.com/r/vertical-split.json

yarn dlx shadcn@latest add https://slide-cn.com/r/vertical-split.json

bunx --bun shadcn@latest add https://slide-cn.com/r/vertical-split.json

Demo

Split content vertically with a customizable ratio

Top Section (70%)

This section takes up 70% of the vertical space

Bottom Section (30%)

This section takes up the remaining 30%

Usage

<VerticalSplit ratio={0.7}>
	<VerticalSplit.Top>
		This content will take up 70% of the available space on the top
	</VerticalSplit.Top>
	<VerticalSplit.Bottom>
		This will take up only the bottom 30% of the parent container
	</VerticalSplit.Bottom>
</VerticalSplit>

Reference

Prop

Type