About
A set of structural layout primitives for admin/dashboard pages — a width-constrained page wrapper, a page header with title/description/actions, a filter toolbar above a table, and a tinted status badge for record states.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Page Layout to your project and fits it to your theme.
Code
How Page Layout is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import {
Page,
PageHeader,
Toolbar,
StatusBadge,
} from "@/components/ui/controls-layout";
type Employee = {
id: string;
name: string;
role: string;
department: string;
status: "success" | "warning" | "neutral";
statusLabel: string;
};
const employees: Employee[] = [
{
id: "EMP-001",
name: "Alex Chen",
role: "Software Engineer",
department: "Engineering",
status: "success",
statusLabel: "Active",
},
{
id: "EMP-002",
name: "Priya Nair",
role: "Product Manager",
department: "Product",
status: "success",
statusLabel: "Active",
},
{
id: "EMP-003",
name: "Jordan Lee",
role: "UX Designer",
department: "Design",
status: "warning",
statusLabel: "On leave",
},
{
id: "EMP-004",
name: "Sam Patel",
role: "QA Engineer",
department: "Engineering",
status: "neutral",
statusLabel: "Inactive",
},
{
id: "EMP-005",
name: "Morgan Diaz",
role: "Data Analyst",
department: "Finance",
status: "success",
statusLabel: "Active",
},
];
export default function ControlsLayoutDemo() {
return (
<Page>
<PageHeader
title="Employees"
description="Manage your team members and their roles."
>
<button type="button">Export</button>
<button type="button">Add employee</button>
</PageHeader>
<Toolbar as="form" method="get">
<div>
<label htmlFor="demo-search">Search employees</label>
<input
id="demo-search"
name="search"
type="search"
placeholder="Search employees"
/>
</div>
<div>
<label htmlFor="demo-department">Department</label>
<select id="demo-department" name="department" defaultValue="all">
<option value="all">All departments</option>
<option value="engineering">Engineering</option>
<option value="product">Product</option>
<option value="design">Design</option>
<option value="finance">Finance</option>
</select>
</div>
<button type="submit">Apply filters</button>
</Toolbar>
<table
className="gov-tabular"
style={{ width: "100%", borderCollapse: "collapse" }}
>
<caption className="gov-visually-hidden">Employees</caption>
<thead>
<tr>
<th
style={{
textAlign: "left",
borderBottom: "1px solid var(--gov-border)",
padding: "8px",
color: "var(--gov-text-muted)",
fontSize: "var(--gov-font-size-2)",
}}
>
Employee
</th>
<th
style={{
textAlign: "left",
borderBottom: "1px solid var(--gov-border)",
padding: "8px",
color: "var(--gov-text-muted)",
fontSize: "var(--gov-font-size-2)",
}}
>
Role
</th>
<th
style={{
textAlign: "left",
borderBottom: "1px solid var(--gov-border)",
padding: "8px",
color: "var(--gov-text-muted)",
fontSize: "var(--gov-font-size-2)",
}}
>
Department
</th>
<th
style={{
textAlign: "left",
borderBottom: "1px solid var(--gov-border)",
padding: "8px",
color: "var(--gov-text-muted)",
fontSize: "var(--gov-font-size-2)",
}}
>
Status
</th>
</tr>
</thead>
<tbody>
{employees.map((employee) => (
<tr key={employee.id}>
<td
style={{
padding: "8px",
borderBottom: "1px solid var(--gov-border)",
color: "var(--gov-text)",
}}
>
{employee.name}
</td>
<td
style={{
padding: "8px",
borderBottom: "1px solid var(--gov-border)",
color: "var(--gov-text)",
}}
>
{employee.role}
</td>
<td
style={{
padding: "8px",
borderBottom: "1px solid var(--gov-border)",
color: "var(--gov-text)",
}}
>
{employee.department}
</td>
<td
style={{
padding: "8px",
borderBottom: "1px solid var(--gov-border)",
}}
>
<StatusBadge status={employee.status}>
{employee.statusLabel}
</StatusBadge>
</td>
</tr>
))}
</tbody>
</table>
</Page>
);
}