Wizard Split Layout - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/wizard-split-layout

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { WizardSplitLayout } from "@/components/ui/wizard-split-layout"

<WizardSplitLayout
  defaultDisplayState="start"
  display={({ displayState }) => <Preview state={displayState} />}
>
  {({ isDisplayHidden, setDisplayState }) => (
    <WizardStep
      isDisplayHidden={isDisplayHidden}
      onStepChange={setDisplayState}
    />
  )}
</WizardSplitLayout>

API Reference

Prop	Type	Default	Description
`children`	`React.ReactNode \| (props: WizardSplitLayoutRenderProps<TDisplayState>) => React.ReactNode`	—	Interactive left-side content. Render function receives display visibility and state controls.
`defaultDisplayState`*	`TDisplayState extends string`	—	Initial state string for the display panel.
`displayState`	`TDisplayState`	—	Controlled state string for the display panel.
`onDisplayStateChange`	`(displayState: TDisplayState) => void`	—	Called when the interactive side requests a display-state change.
`display`	`React.ReactNode \| (props: WizardSplitLayoutDisplayProps<TDisplayState>) => React.ReactNode`	—	Non-interactive right-side display content.
`breakpoint`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"lg"`	Breakpoint where the display panel becomes visible.
`displayPosition`	`"start" \| "end"`	`"end"`	Places the display panel before or after the interaction side.
`interactionClassName`	`string`	—	Class applied to the interactive column.
`displayClassName`	`string`	—	Class applied to the display column.

Create workspace

Start with the essentials.

Workspace context appears at the split breakpoint.