Content blocks

Page title

The 40px bold page title at the top of a page, with an optional 78px emoji icon above it.

Team handbook

Usage

  • Use Page title once at the top of a page, above its blocks.
  • Use PageHeader instead when the page needs a cover, an icon picker or the hover “Add icon” controls.
  • Don’t use Page title for section headings; use Heading instead.

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/PagetitleExample.tsx
import { PageTitle, rt } from '@krackedui/motion';

export function PageTitleExample() {
  return (
    <PageTitle icon="đź“’" text={rt('Team handbook')} />
  );
}

Examples

Without icon

Release notes

API Reference

PageTitle

Based on <div> and supports its props. Adds:

PropTypeDefault
icon
string
text
RichText
renderLeaf
LeafRenderer

Accessibility

  • The title is a styled div; wrap the text in an h1 via renderLeaf (or add role="heading" aria-level={1}) for a document outline.
  • Placeholder “New page” when edited empty. For the full header (cover, hover “Add icon”) use PageHeader.
© 2026 Motion. Internal documentation.