Detail Layout 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

Detail Layout 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 DetailLayout from @/components/ui/detail-layout.

import { Activity, FolderOpen, Info, Pencil, Receipt, Trash2 } from "lucide-react"
import { DetailLayout, DetailSection } from "@/components/ui/detail-layout"
import { EntityHeader } from "@/components/ui/entity-header"

export function ClientPage() {
  return (
    <div className="px-4 pb-12 md:px-6">
      <DetailLayout
        header={
          <EntityHeader
            eyebrow="Client · Company"
            title="Tech Solutions Inc."
            avatar={{ name: "Tech Solutions Inc.", radius: "md" }}
            status={{ label: "Active", tone: "success" }}
            facts={[
              { label: "Balance", value: "$12,480" },
              { label: "Tax ID", value: "12-3456789", copyValue: "12-3456789" },
            ]}
          />
        }
        mobileAside="tab"
        labels={{ asideRegion: "Client details" }}
        aside={
          <>
            <DetailSection title="Details" icon={<Info />} onEdit={() => {}}>
              <p className="text-sm">Tax ID 12-3456789 · Chicago · paid in 30 days</p>
            </DetailSection>
            <DetailSection title="Files" icon={<FolderOpen />} count={3} collapsible>
              <p className="text-sm">Contract 2026.pdf</p>
            </DetailSection>
          </>
        }
      >
        <DetailSection
          title="Activity"
          icon={<Activity />}
          count={8}
          actions={[
            { label: "Edit", icon: <Pencil /> },
            { label: "Delete", icon: <Trash2 />, tone: "danger" },
          ]}
        >
          <p className="text-sm">Invoice #2026-0412 issued today, 4:35 PM.</p>
        </DetailSection>
        <DetailSection title="Invoices" icon={<Receipt />} empty labels={{ empty: "No invoices issued" }} />
      </DetailLayout>
    </div>
  )
}

Props

• header
  ReactNode

  The top of the page, usually an EntityHeader. Nothing is reserved when it is left out.

• children
  ReactNode

  The main column, usually DetailSection cards (activity, notes, invoices).

• aside
  ReactNode

  The side panel's content (details, contacts, files). A <DetailAside> passed here is used as the panel itself, so it can carry its own props. None: a single column at maxWidth.

• asidePositiondefault "end"
  "end" | "start"

  Which side the panel takes from the breakpoint. The DOM stays main then aside, so reading and Tab order never change; start only reorders the grid.

• asideWidthdefault 360
  number

  The side panel's width in px once the layout is 960px wide; with breakpoint md it is 300px between 720 and 960px.

• asideStickydefault true
  boolean

  The panel sticks under the top bar (--topbar-offset), the sticky header and --detail-sticky-offset (room for a bar that pins itself, like EntityHeader's 49px condensed bar) while the main column scrolls, and scrolls inside itself when it is taller than the viewport (--detail-viewport-height when the page scrolls inside a box).

• stickyHeaderdefault false
  boolean

  The header sticks at the top on a glass bar (use it when the header has no condensed bar of its own) and writes its height to --detail-header-height, so the panel and the phone tabs stick under it.

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

  Where the two columns start, measured on the layout's own width (a container query, so it works beside an app sidebar or in a panel): lg at 960px of content (a 1024px screen minus gutters; records need the width) or md at 720px, with a 300px panel up to 960px.

• mobileAsidedefault "below"
  "below" | "above" | "tab"

  Below the breakpoint the panel goes after the main column, before it, or into a second tab (a sticky segmented control with labels.main / labels.aside; the hidden pane stays mounted).

• gapdefault "md"
  "sm" | "md" | "lg"

  16 / 24 / 32px between the columns, the header and the main sections; the panel's cards sit a step closer.

• maxWidthdefault "xl"
  "none" | "lg" | "xl" | "2xl"

  The content width, centered: max-w-5xl / 6xl / 7xl, or the full width. The page provides the side gutters.

• sectionVariantdefault "surface"
  "surface" | "outline" | "plain"

  The default look of every DetailSection inside: a raised panel, a hairline outline, or plain on the page with a top hairline. A section's own variant wins.

• loadingdefault false
  boolean

  Every DetailSection inside shows its skeleton (unless it sets loading itself), then fades into its content.

• tab
  "main" | "aside"

  The controlled phone tab (mobileAside="tab").

• defaultTabdefault "main"
  "main" | "aside"

  The phone tab to start on while uncontrolled (mobileAside="tab").

• onTabChange
  (tab: DetailLayoutTab) => void

  Called when the phone tab changes.

• labels
  Partial<DetailLayoutLabels>

  main ("Activity") and aside ("Details") name the phone tabs, asideRegion ("Details") names the <aside> landmark, tabs ("Page sections") names the tab group. English defaults in DEFAULT_DETAIL_LAYOUT_LABELS.

• classNames
  Partial<Record<"header" | "body" | "main" | "aside" | "tabs", string>>

  Extra classes for the header wrapper, the grid, the main column, the side panel and the phone tab bar (e.g. a negative margin so the glass bars reach the page edge).

• className
  string

  Classes for the root, which also takes the rest of the div props. Nested DetailLayouts are not supported.

Parts

FAQ

Used in

More React layout components