Page Header
A consistent page header with title, description and actions.
bunx shadcn@latest add @nx-ui/page-headerTitle & description
The minimal shape: a title with supporting copy, no actions. Stacks on small screens, sits on one row from sm up.
Collection sites
Every site currently registered to Nexus ReGen, across all organisations.
With actions
Actions right-align and bottom-align with the title on wider screens; they wrap above it on narrow ones.
Compost batches
Track moisture, temperature and turn schedules for active windrows.
Loading & disabled actions
Actions can carry their own pending or disabled state while the header itself stays static.
Soil analysis
Nutrient and contaminant readings submitted by field technicians.
With children (tabs row)
Children render beneath the title/description row — here, a Tabs list for switching views.
Riverside Depot
Waste diversion project overseen by Riverside Environmental Trust.
Realistic composition
A title built from more than plain text, alongside a status badge tucked into the description.
Fernbrook Organisation
12 active sites across 3 regionsCompliant
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
title* | React.ReactNode | — | — |
description | React.ReactNode | — | — |
actions | React.ReactNode | — | — |
…extends Omit<React.ComponentProps<"div">, "title">