List Layout

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

Installation

bash

npx shadcn@latest add @redpanda/list-layout

bash

pnpm dlx shadcn@latest add @redpanda/list-layout

bash

yarn dlx shadcn@latest add @redpanda/list-layout

bash

bunx shadcn@latest add @redpanda/list-layout

bash

nubx shadcn@latest add @redpanda/list-layout

bash

aube dlx shadcn@latest add @redpanda/list-layout

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:

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>

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>