Back to Components
Components

Split Layout

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

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