Vertical Split
A component to split your content vertically
Overview
Use this component within a slide to split any content vertically.
Installation
pnpm dlx shadcn@latest add @slide-cn/vertical-splitnpx shadcn@latest add @slide-cn/vertical-splityarn dlx shadcn@latest add @slide-cn/vertical-splitbunx --bun shadcn@latest add @slide-cn/vertical-splitDemo
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