---
title: List Layout
description: A composable, responsive layout component for list views with header, filters, content, and footer sections.
icon: logs
author:
  name: malinskibeniamin
  url: https://github.com/malinskibeniamin
mode: wide
---

### Installation

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

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

## When to use

The List Layout component provides a structured layout system for list views, dashboards, and data management interfaces. Use this decision tree to determine when it's appropriate:

```mermaid
graph TD;
    A[❓ Need structured page layout?] --> B{List/table/data view?};
    A --> C[ℹ️ Use general layout components];
    B --> D{Need header/filters/actions?};
    B --> E[⚠️ Simple content only?];
    D --> F[✅ Use ListLayout];
    D --> G{Multiple sections needed?};
    E --> H[ℹ️ Use Container or Grid];
    G --> I[✅ Use all ListLayout components];
    G --> J[✅ Use subset of components];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class F,I,J recommended;
    class E discouraged;
    class A,B,D,G decision;
    class C,H neutral;
```

## Usage

```tsx
import {
  ListLayout,
  ListLayoutHeader,
  ListLayoutNavigation,
  ListLayoutFilters,
  ListLayoutContent,
  ListLayoutFooter,
} from '@/components/ui/list-layout';
```

```tsx
<ListLayout>
  <ListLayoutHeader
    title="Resource Name"
    description="Description of the resource or page"
    actions={<Button>Action</Button>}
  />
  <ListLayoutNavigation>
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
      </TabsList>
    </Tabs>
  </ListLayoutNavigation>
  <ListLayoutFilters actions={<Button>Create</Button>}>
    <Input placeholder="Search..." />
    <Button variant="outline">Filter</Button>
  </ListLayoutFilters>
  <ListLayoutContent>{/* Your data table or content here */}</ListLayoutContent>
  <ListLayoutFooter>{/* Pagination or other footer content */}</ListLayoutFooter>
</ListLayout>
```

## Structure

The List Layout component is built with composability in mind, allowing you to use only the sections you need:

- **ListLayout**: Main container with consistent spacing and responsive behavior
- **ListLayoutHeader**: Page title, description, and action buttons
- **ListLayoutNavigation**: Tab navigation or other navigation elements
- **ListLayoutFilters**: Search, filters, and action buttons
- **ListLayoutContent**: Main content area with scroll handling
- **ListLayoutFooter**: Pagination or other footer content

## Features

- **Fully Responsive**: Adapts to different screen sizes and mobile devices
- **Consistent Layout**: Maintains spacing and alignment regardless of content
- **Composable**: Use only the sections you need
- **Flexible**: Works with any content, not just data tables
- **Accessible**: Built with accessibility in mind

## Examples

### Basic Layout

```tsx
<ListLayout>
  <ListLayoutHeader title="Clusters" description="Manage your Redpanda clusters" />
  <ListLayoutContent>
    <div>Your content here</div>
  </ListLayoutContent>
</ListLayout>
```

### With Filters and Actions

```tsx
<ListLayout>
  <ListLayoutHeader
    title="Resource Group"
    description="Manage your clusters and networks"
    actions={
      <>
        <Button variant="outline">Copy ID</Button>
        <Button>Edit</Button>
      </>
    }
  />
  <ListLayoutFilters actions={<Button>Create Cluster</Button>}>
    <Input placeholder="Filter clusters..." />
    <Button variant="outline">Status</Button>
    <Button variant="outline">Cloud</Button>
  </ListLayoutFilters>
  <ListLayoutContent>
    <DataTable />
  </ListLayoutContent>
</ListLayout>
```

### With Navigation Tabs

```tsx
<ListLayout>
  <ListLayoutHeader title="Resource Management" description="Manage your resources" />
  <ListLayoutNavigation>
    <Tabs defaultValue="clusters">
      <TabsList>
        <TabsTrigger value="clusters">Clusters</TabsTrigger>
        <TabsTrigger value="networks">Networks</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </Tabs>
  </ListLayoutNavigation>
  <ListLayoutContent>
    <TabsContent value="clusters">
      <ClustersTable />
    </TabsContent>
    <TabsContent value="networks">
      <NetworksTable />
    </TabsContent>
  </ListLayoutContent>
</ListLayout>
```

## Props

### ListLayout

| Prop          | Type                         | Default      | Description            |
| ------------- | ---------------------------- | ------------ | ---------------------- |
| `orientation` | `'horizontal' \| 'vertical'` | `'vertical'` | Layout orientation     |
| `className`   | `string`                     |              | Additional CSS classes |

### ListLayoutHeader

| Prop          | Type        | Default | Description            |
| ------------- | ----------- | ------- | ---------------------- |
| `title`       | `string`    |         | Page title             |
| `description` | `string`    |         | Page description       |
| `actions`     | `ReactNode` |         | Action buttons         |
| `className`   | `string`    |         | Additional CSS classes |

### ListLayoutFilters

| Prop        | Type        | Default | Description            |
| ----------- | ----------- | ------- | ---------------------- |
| `actions`   | `ReactNode` |         | Action buttons         |
| `className` | `string`    |         | Additional CSS classes |

### ListLayoutContent

| Prop        | Type     | Default | Description            |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` |         | Additional CSS classes |

### ListLayoutFooter

| Prop        | Type     | Default | Description            |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` |         | Additional CSS classes |

## Design Principles

- **Consistency**: All layouts follow the same structure and spacing
- **Responsiveness**: Works seamlessly across all device sizes
- **Flexibility**: Can accommodate different content types and structures
- **Accessibility**: Built with semantic HTML and ARIA attributes
- **Performance**: Optimized for large datasets and smooth scrolling