Split View React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Split View is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import SplitView from @/components/ui/split-view.

import { useState } from "react"
import { SplitView } from "@/components/ui/split-view"

const clients = [
  { id: "tech", name: "Tech Solutions Inc.", city: "New York" },
  { id: "summit", name: "Summit Logistics", city: "Boston" },
  { id: "greenleaf", name: "Greenleaf Pharmacy", city: "Portland" },
]

export function Clients() {
  const [selected, setSelected] = useState<string | null>(null)
  const client = clients.find((c) => c.id === selected)

  return (
    <div className="h-dvh">
      <SplitView
        persistKey="crm:clients:split"
        backLabel="Clients"
        onBack={() => setSelected(null)}
        list={
          <ul className="p-2">
            {clients.map((c) => (
              <li key={c.id}>
                <button type="button" onClick={() => setSelected(c.id)} className="w-full rounded-2xl px-3 py-2.5 text-start">
                  {c.name}
                </button>
              </li>
            ))}
          </ul>
        }
        detail={
          client && (
            <article key={client.id} className="p-6">
              <h2 className="text-lg font-semibold">{client.name}</h2>
              <p className="text-sm text-muted-foreground">{client.city}</p>
            </article>
          )
        }
      />
    </div>
  )
}

Props

• list*
  ReactNode

  The master pane: a list of clients, conversations or tickets. It scrolls on its own and keeps its scroll position while the detail is pushed over it.

• detail
  ReactNode

  The detail pane's content. Give the element a key (the item id): a new key fades the content in and scrolls the pane back to the top, with no push.

• showDetaildefault false
  boolean

  Whether the detail is open (on phones: pushed). Unset, it follows Boolean(detail). True without a detail shows the empty state.

• onBack
  () => void

  Phones: called by the back button, a completed swipe and Escape. Clear the selection here (and call router.back() when the detail is a route).

• defaultListWidthdefault 360
  number

  Starting width of the list column in px (also what a double-click or Enter on the divider resets to).

• listWidth
  number

  Controlled width of the list column in px. Pair it with onListWidthChange.

• onListWidthChange
  (width: number) => void

  Fires once when a resize ends (pointer up, a key press, a reset), never per frame.

• minListWidthdefault 260
  number

  The narrowest the list can get, in px.

• maxListWidthdefault 560
  number

  The widest the list can get, in px. A drag also leaves the detail at least minListWidth wide.

• resizabledefault true
  boolean

  Drag the divider to resize; arrow keys, Home / End and Enter on the focused divider; double-click resets. Off, the divider is a plain hairline.

• persistKeydefault ""
  string

  A storage key that remembers the list width across reloads (local storage). Empty keeps it in memory.

• breakpointdefault "md"
  "md" | "lg"

  Below this width of the split view itself the panes stack: md (768px) or lg (1024px, tablets and narrow app-shell columns stack too). It is a CSS container query, so the server render is right and it also stacks inside a phone frame.

• emptyTextdefault "Select an item to see it here"
  ReactNode

  The placeholder text in the detail pane while nothing is selected (wide screens).

• emptyIcon
  ReactNode

  The placeholder icon. Defaults to MousePointerClick in a soft tile.

• emptyDetail
  ReactNode

  Replaces the whole placeholder, e.g. a summary of the list or a call to action.

• swipeBackdefault true
  boolean

  Phones: drag the detail toward the end to go back. It starts anywhere on the pane after an 8px horizontal slop, never inside [data-no-swipe], inputs or horizontal scrollers.

• showBackButtondefault true
  boolean

  Phones: a sticky glass back bar at the top of the detail. Turn it off and put SplitViewBackButton (Button props plus label, default "Back"; calls onBack and hides itself while the panes sit side by side) in your own header. useSplitView() inside the split view returns { mode: "split" | "stack", showDetail, back }.

• backLabeldefault "Back"
  ReactNode

  The back button's text. Use the list's name, like "Clients", as iOS does.

• resizeLabeldefault "Resize list"
  string

  The accessible name of the divider.

• bordereddefault true
  boolean

  The hairline between the panes. Off, the divider is invisible until hovered or dragged.

• classNames
  Partial<Record<"list" | "detail" | "divider" | "back" | "empty", string>>

  Extra classes for the inner parts: the two scrolling panes, the divider, the phone back bar and the placeholder.

• className
  string

  Extra classes for the root. It fills its parent's height (h-full), so give the parent a height.

Parts

FAQ

Used in

More React layout components