Split Layout
Two-panel layouts that divide the viewport — equal halves, weighted splits, and sticky media panels.
50 / 50 Split
Two equal columns — standard comparison layout, login/hero panels, or side-by-side feature showcases.
Everything you need
in one place
Build, ship, and iterate faster with a unified workspace designed for modern teams.
10k+
Teams
99.9%
Uptime
4.9 ★
Rating
Both panels: flex-1 on a flex parent — each column takes exactly half the width.
60 / 40 Split
Weighted columns — primary content gets more space. Common for product detail pages and feature explanations.
New Arrival
Minimalist Desk Lamp
Clean lines, warm light. Adjustable neck with touch-dimmer and USB-C charging port.
Explicit fractions: w-3/5 + w-2/5. Use w-2/3 + w-1/3 for a harder 66/33 split.
Reverse Split
Content on the right, visual on the left — or flip the visual to the right. Uses flex-row-reverse so DOM order stays logical for screen readers.
Real-time collaboration
without the friction
Your team edits together, live. No refreshing, no merge conflicts, no waiting — just flow.
DOM order preserved for accessibility. Use flex-row-reverse on the wrapper — not order-last — to keep a single toggle point.
Sticky Media Panel
The left visual panel sticks in place while the right content column scrolls. Classic SaaS feature walkthrough pattern.
This panel stays fixed
Connect your data
Link any source in seconds — databases, spreadsheets, REST APIs. Schema detection is automatic.
Define your model
Drag relationships between tables. The query builder handles joins without writing a line of SQL.
Build your interface
Drop components onto a canvas. Bind data fields with a click. No frontend framework required.
Ship to your team
Publish with one click. Role-based access control comes built-in — granular down to the row level.
Left: position: sticky; top: 0; height: [shell height] — Right: overflow-y-auto. Both inside an overflow-hidden flex parent.
Vertical Split (Top / Bottom)
Stack two panels vertically — useful for code editors with a preview pane, or a header image + detail area.
<div class="split-top">
<h1>Hello, world</h1>
</div>
Hello, world
Bottom panel renders the output. It takes the remaining height via flex-1.
Swap flex-col for vertical stacking. Fixed top: explicit height: 45%. Bottom: flex-1 fills remainder.
Resizable Split
Drag the divider to redistribute space between panels. Double-click the divider to reset to 50/50.
Alpine tracks leftPct via pointer events. Left panel: :style="`width: ${leftPct}%`". Right panel: flex-1 fills remainder. Double-click divider to reset.