Create Layout

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

Installation

Loading component...

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>

Recent changes

patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109

See full history →