Create Layout
A responsive layout component for create and form interfaces with an optional summary sidebar.
Installation
bash
npx shadcn@latest add @redpanda/create-layoutbash
pnpm dlx shadcn@latest add @redpanda/create-layoutbash
yarn dlx shadcn@latest add @redpanda/create-layoutbash
bunx shadcn@latest add @redpanda/create-layoutbash
nubx shadcn@latest add @redpanda/create-layoutbash
aube dlx shadcn@latest add @redpanda/create-layoutUsage
tsx
import { CreateLayout, CreateLayoutActions, CreateLayoutContent, CreateLayoutFooter, CreateLayoutHeader, CreateLayoutSummary,} from '@/components/redpanda-ui/create-layout';tsx
<CreateLayout> <CreateLayoutContent> <CreateLayoutHeader title="Create Resource" description="Configure your new resource" actions={ <CreateLayoutActions> <Button variant="outline">Cancel</Button> <Button>Create</Button> </CreateLayoutActions> } />
<div className="flex-1 overflow-auto p-6">{/* Your form content */}</div>
<CreateLayoutFooter> <div className="flex justify-end gap-2"> <Button variant="outline">Cancel</Button> <Button>Create</Button> </div> </CreateLayoutFooter> </CreateLayoutContent>
<CreateLayoutSummary title="Summary">{/* Summary content */}</CreateLayoutSummary></CreateLayout>Components
CreateLayout
The root layout container that provides the responsive two-column structure.
CreateLayoutHeader
Header section with title, description, and actions.
| Prop | Type | Description |
|---|---|---|
title |
string |
The main title text |
description |
string |
Optional description text |
actions |
React.ReactNode |
Optional action buttons |
CreateLayoutContent
Main content area that contains the form or primary interface.
CreateLayoutSummary
Right sidebar summary panel that’s hidden on screens smaller than 1024px.
| Prop | Type | Description |
|---|---|---|
title |
string |
Summary panel title (defaults to “Summary”) |
CreateLayoutFooter
Optional footer section for additional actions or information.
CreateLayoutActions
Container for grouping action buttons with consistent spacing.
Responsive Behavior
The layout automatically adapts to different screen sizes:
- Mobile/Tablet (< 1024px): Single column layout with summary panel hidden
- Desktop (≥ 1024px): Two-column layout with visible summary panel
Examples
Basic Create Form
tsx
<CreateLayout> <CreateLayoutContent> <CreateLayoutHeader title="Create User" description="Add a new user to your organization" />
<div className="flex-1 overflow-auto p-6"> <div className="mx-auto max-w-2xl space-y-4"> <div> <Label htmlFor="name">Name</Label> <Input id="name" placeholder="Enter name" /> </div> <div> <Label htmlFor="email">Email</Label> <Input id="email" type="email" placeholder="Enter email" /> </div> </div> </div> </CreateLayoutContent>
<CreateLayoutSummary> <div className="space-y-2"> <div className="text-sm font-medium">User Details</div> <div className="text-sm text-subtle">Review your configuration before creating</div> </div> </CreateLayoutSummary></CreateLayout>With Footer Actions
tsx
<CreateLayout> <CreateLayoutContent> <CreateLayoutHeader title="Create Resource" />
<div className="flex-1 overflow-auto p-6">{/* Form content */}</div>
<CreateLayoutFooter> <div className="flex justify-between"> <Button variant="outline">Save Draft</Button> <CreateLayoutActions> <Button variant="outline">Cancel</Button> <Button>Create</Button> </CreateLayoutActions> </div> </CreateLayoutFooter> </CreateLayoutContent>
<CreateLayoutSummary>{/* Summary content */}</CreateLayoutSummary></CreateLayout>