Create Layout (Modern)

A responsive layout component for create and form interfaces with an optional summary sidebar.

Loading component...

Installation

Usage

import {
  CreateLayout,
  CreateLayoutActions,
  CreateLayoutContent,
  CreateLayoutFooter,
  CreateLayoutHeader,
  CreateLayoutSummary,
} from '@/components/redpanda-ui/create-layout';

<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

<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-muted-foreground">
        Review your configuration before creating
      </div>
    </div>
  </CreateLayoutSummary>
</CreateLayout>

With Footer Actions

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