List Layout

A composable, responsive layout component for list views with header, filters, content, and footer sections.

Loading component...

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:

Installation

Usage

import {
  ListLayout,
  ListLayoutHeader,
  ListLayoutNavigation,
  ListLayoutFilters,
  ListLayoutContent,
  ListLayoutFooter,
} from "@/components/ui/list-layout"

<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

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

With Filters and Actions

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

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