Title
Semantic heading component mapping
order={1..6} to typography variants h1..h6 while offering decorative enhancements like underline, afterline, and prefix adornments.Source
LLM docs
Package
Examples
7
Properties
81
Playground
Basics
Default Title usage shows the h2-style heading produced by the component without additional props.
Loading demo…
import { Block, Title } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Title>Default section heading</Title>
</Block>
);
}Heading Levels
Set the
order prop to align Title with semantic heading levels from h1 through h6.Loading demo…
import { Block, Title } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Title order={1}>Page heading (order=1)</Title>
<Title order={2}>Section heading (order=2)</Title>
<Title order={3}>Subsection heading (order=3)</Title>
<Title order={4}>Fourth-level heading (order=4)</Title>
<Title order={5}>Fifth-level heading (order=5)</Title>
<Title order={6}>Sixth-level heading (order=6)</Title>
</Block>
);
}Variants
Keep heading level three while changing its typography with the variant prop.
Loading demo…
import { Column, Text, Title } from '@plocks/ui';
const variants = ['h2', 'h3', 'h4'] as const;
export function Demo() {
return (
<Column gap="md">
{variants.map(variant => (
<Column key={variant} gap="xs">
<Text size="xs" c="secondary">order=3 · variant={variant}</Text>
<Title order={3} variant={variant}>Section title</Title>
</Column>
))}
</Column>
);
}Prefix Styles
Enable the
prefix prop to add visual markers, switching variants or supplying a custom icon for emphasis.Loading demo…
import { Block, Icon, Title } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Title prefix>Default bar prefix</Title>
<Title prefix prefixVariant="dot">Dot prefix</Title>
<Title prefix prefixSize={6} prefixLength={40} prefixColor="#6366f1">
Custom bar size and color
</Title>
<Title prefix={<Icon name="star" />} prefixGap={8} prefixColor="#f59e0b">
Icon prefix with custom color
</Title>
</Block>
);
}Underlines
Toggle
underline and afterline to add emphasis and separation, including custom color and stroke weights.Loading demo…
import { Block, Title } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Title underline>Underline only</Title>
<Title afterline>Afterline only</Title>
<Title underline afterline>Underline with afterline</Title>
<Title underline underlineColor="#ff4d4f" underlineStroke={4}>
Custom underline color and stroke
</Title>
</Block>
);
}Actions
Pass an
action element to align buttons or toggles alongside the heading.Loading demo…
import { Block, Button, Title } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Title action={<Button title="Edit" size="sm" variant="outline" />}>Profile</Title>
</Block>
);
}Combined Accents
Mix prefix, underline, and afterline props to create a primary heading and aligned subsection titles with consistent accents.
Loading demo…
import { Block, Title } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Title
prefix
underline
afterline
prefixSize={6}
prefixLength={48}
prefixColor="#10b981"
underlineStroke={3}
>
Analytics overview
</Title>
<Title
order={3}
prefix
prefixVariant="dot"
prefixColor="#ef4444"
underline
underlineColor="#ef4444"
>
Active users
</Title>
<Title
order={3}
prefix
prefixVariant="dot"
prefixColor="#6366f1"
underline
underlineColor="#6366f1"
>
Conversion rate
</Title>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources