Components

Section headers

A title/subheading/actions row with a bottom border, for the top of a page or a card - replaces the hand-rolled title+border-b pattern repeated across several /pages/* screens.

Component Playground

Live instance.

Projects

Everything you're contributing to, in one place

With trailing info instead of buttons

Actions is a plain slot - it doesn't have to hold buttons. A timestamp, a badge, or anything else trailing the title works the same way.

Trailing info

Flora and Fauna Dashboard

Last synced 2 hours ago

API

A compound component - each part is a plain HTML element with a fixed className, so any native prop (id, onClick, etc.) passes through.

Part	Notes
`SectionHeader.Root`	A div - the bordered-bottom wrapper (border-secondary, pb-5).
`SectionHeader.Group`	A div - flex row (md+) that holds Heading/Subheading on one side, Actions on the other.
`SectionHeader.Heading`	An h2 - the title.
`SectionHeader.Subheading`	A p - the description below the title.
`SectionHeader.Actions`	A div - a gap-3 row for trailing buttons or other content.

Usage

import { SectionHeader } from "@/components/application/section-headers/section-headers";
import { Button } from "@/components/base/buttons/button";

<SectionHeader.Root>
  <SectionHeader.Group>
    <div className="flex flex-1 flex-col gap-1">
      <SectionHeader.Heading>Projects</SectionHeader.Heading>
      <SectionHeader.Subheading>Everything you're contributing to, in one place</SectionHeader.Subheading>
    </div>
    <SectionHeader.Actions>
      <Button color="secondary">Upload dataset</Button>
      <Button color="secondary">Add project</Button>
    </SectionHeader.Actions>
  </SectionHeader.Group>
</SectionHeader.Root>

Where it's used

Replaced hand-rolled title+border-b markup in app/pages/_shared/project-list-content.tsx and app/pages/_shared/data-overview.tsx.

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.