App shell

Page Header

The top of a page: optional icon, the title (`h1`, editable in place), a description and right-aligned actions, plus the Add icon / cover / comment controls.

Q4 roadmap

Goals, milestones and owners for the quarter.

Usage

  • Use one PageHeader per page, as the header of PageLayout or PeekBody.
  • Use onTitleChange for documents whose title the user edits in place; pass a plain title for app pages.
  • Keep actions to the one or two most important page actions; put the rest in a Menu.
  • Don’t use it for section headings inside a page; use a heading block or Card.Title.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/PageHeaderExample.tsx
import { PageHeader, Button } from '@krackedui/motion';

export function PageHeaderExample() {
  return (
    <PageHeader
      title="Q4 roadmap"
      description="Goals, milestones and owners for the quarter."
      actions={
        <>
          <Button variant="secondary">Share</Button>
          <Button variant="primary">New task</Button>
        </>
      }
    />
  );
}

Examples

Editable title with controls

Hover to reveal Add icon / Add cover / Add comment.

With icon

Product specs

Living specs for every shipped feature.

Empty title

API Reference

PageHeader

Based on <div> (except title).

PropTypeDefault
title
ReactNode
description
ReactNode
actions
ReactNode
icon
ReactNode
placeholder
string
"New page"
onTitleChange
(title: string) => void
editable
boolean
!!onTitleChange
size
"page""peek""app"
"page" ("app" inside `PageLayout variant="app"`)
controls
"hover""always""none"
"hover" with handlers, else "none"
onAddIcon
() => void
onAddCover
() => void
onAddComment
() => void
extraControls
ReactNode
children
ReactNode

Accessibility

  • The title is the page’s h1. When editable it contains a single-line textbox named "Page title" with aria-placeholder; Enter leaves the field.
  • The icon is decorative unless onAddIcon is given, then it is a button "Change page icon".
  • Hover controls also appear on keyboard focus (focus-within) and are always visible on touch screens.
  • Actions wrap under the title on narrow screens; the title wraps long words.
© 2026 Motion. Internal documentation.