---
title: Create Layout
description: A responsive layout component for create and form interfaces with an optional summary sidebar.
icon: package-plus
author:
  name: malinskibeniamin
  url: https://github.com/malinskibeniamin
mode: wide
---

### Installation

```package-install
npx shadcn@latest add @redpanda/create-layout
```

<ComponentPreview name="create-layout-demo" wide />

## Usage

```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>
```