Components

Heading

The heading API you already use, with portable theme styles.

Preview

Page title

Section title

A smaller heading

Usage

import { Heading } from '@fwenthehunter/friendly-ui';

<Heading>Page title</Heading>
<Heading as="h2">Section title</Heading>
<Heading as="h3" className="text-primary">A smaller heading</Heading>

The as prop chooses h1 through h6 and defaults to h1. Each level has its own base size. It follows your existing reusable heading pattern, using package styles instead of project-specific sp-* classes.

Choose the level for the document hierarchy; use className or style to customize appearance. Theme the sizes with --fui-heading-1 through --fui-heading-6. Font, foreground, and other theme tokens are inherited.

Props

Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.

Prop	Type	Default
`as`	h1 \| h2 \| h3 \| h4 \| h5 \| h6	h1