H
UI by hampton.io
Back to Components
Layout

Split Layout

Two-pane layout with a resizable divider, supporting horizontal and vertical orientations.

PropsUsage ExampleVariations

Navigation

  • Dashboard
  • Projects
  • Settings

Content Area

Drag the divider to resize. This layout adapts to different content needs.

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/split-layout.tsx

Installation

Using shadcn CLI

npx shadcn add split-layout --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge

Related Layout Components

Calendar

Month view calendar with selectable days and event dots.

Dashboard Header

Page header with title, date range picker placeholder, and action buttons area.

Masonry Grid

Pinterest-style masonry layout using CSS columns for cards of varying heights.

Scroll Area

Custom scrollbar styling with overflow detection and gradient fade indicators.

Split Pane

Resizable side by side panels with a drag handle.