Horizontal Split
A component to split your content horizontally
Overview
Use this component within a slide to split any content horizontally.
Installation
pnpm dlx shadcn@latest add @slide-cn/horizontal-splitnpx shadcn@latest add @slide-cn/horizontal-splityarn dlx shadcn@latest add @slide-cn/horizontal-splitbunx --bun shadcn@latest add @slide-cn/horizontal-splitDemo
Split content horizontally with a customizable ratio
Left Side (40%)
This side takes up 40% of the space
Right Side (60%)
This side takes up the remaining 60%
Usage
<HorizontalSplit ratio=0.4 >
<HorizontalSplit.Left>
<div className="w-full h-full" >This content will only take up 40% of the horizontal space available</div>
</HorizontalSplit.Left>
<HorizontalSplit.Right>
<div className="w-full h-full" >The right half will take up the remaining space.</div>
</HorizontalSplit.Right>
</HorizontalSplit>Reference
Prop
Type