Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA splitter that lays its panes side by side on wide screens and stacks them top over bottom on narrow ones, keeping the same panels and sizes.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this when a two-pane tool must still work on a tablet or a narrow window: form and preview, query and results.
Do not use it when only one pane should show at a time on small screens (navigate between them instead).
It composes splitter, which the CLI installs for you.
import { SplitterResponsiveOrientation } from "@/components/splitter-responsive-orientation"<SplitterResponsiveOrientation
breakpoint={768}
panels={[
{ id: "form", label: "Form", content: <Form /> },
{ id: "preview", label: "Preview", content: <Preview /> },
]}
/>| Prop | Type | Required | Description |
|---|---|---|---|
panels | SplitterPanelConfig[] | required | - |
breakpoint | number | optional | Minimum viewport width in px for the side by side layout. Default 768. |
The pattern ships with a Testing Library test (splitter-responsive-orientation.test.tsx) that covers wide, narrow and changing viewport with preserved sizes.