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 https://slide-cn.com/r/horizontal-split.jsonnpx shadcn@latest add https://slide-cn.com/r/horizontal-split.jsonyarn dlx shadcn@latest add https://slide-cn.com/r/horizontal-split.jsonbunx --bun shadcn@latest add https://slide-cn.com/r/horizontal-split.jsonDemo
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