Component reference
Typography
Readable article text with a deliberate hierarchy.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Article
A title, a lead, a paragraph and inline code.
A design system is a contract
Components agree on spacing, colour and behaviour before anyone writes a screen.The token pipeline turns the primitives into CSS variables, then the provider exposes them to every component through data-pimolu-theme and data-pimolu-style.
Hierarchy
Size and weight communicate structure; the semantic tag keeps the document outline honest.
Release notes
Version 0.1.0 is ready.The package adds the typography primitives, the form field wrapper and the new overlay components.
Width adapts to the available space
"use client";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
Heading,
Text,
Paragraph,
Code
} from "@pimolu/react";
export function DemoExample() {
return (
<div
className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
>
<Card>
<CardHeader>
<CardTitle>Article</CardTitle>
<CardDescription>A title, a lead, a paragraph and inline code.</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-5 min-w-0">
<Heading level={2}>A design system is a contract</Heading>
<Text size="lg" tone="muted">
Components agree on spacing, colour and behaviour before anyone
writes a screen.
</Text>
<Paragraph>
The token pipeline turns the primitives into
CSS variables, then the provider exposes them
to every component through{" "}
<Code>data-pimolu-theme</Code> and{" "}
<Code>data-pimolu-style</Code>.
</Paragraph>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Hierarchy</CardTitle>
<CardDescription>
Size and weight communicate structure; the semantic tag keeps
the document outline honest.
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-5 min-w-0">
<Heading level={3}>Release notes</Heading>
<Text weight="semibold">Version 0.1.0 is ready.</Text>
<Paragraph size="sm" tone="muted">
The package adds the typography primitives, the form field
wrapper and the new overlay components.
</Paragraph>
</div>
</CardContent>
</Card>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Scale
Enumerated from typographyVariantMap: xs to 3xl.
Weights
normal, medium, semibold and bold.
Tones
Semantic colours that stay readable in light, dark and every preset.
Usage
Choose semantic heading levels independently from visual size.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluTextProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined | "2xl" | Component size. |
weight | "normal" | "medium" | "bold" | "semibold" | undefined | "semibold" | Public Pimolu prop; see the source declaration for details. |
tone | "primary" | "success" | "warning" | "danger" | "default" | "muted" | undefined | "default" | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLSpanElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLSpanElement> | undefined | — | Standard React/HTML attribute. |
size"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefinedDefault: "2xl"
Component size.
weight"normal" | "medium" | "bold" | "semibold" | undefinedDefault: "semibold"
Public Pimolu prop; see the source declaration for details.
tone"primary" | "success" | "warning" | "danger" | "default" | "muted" | undefinedDefault: "default"
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLSpanElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLSpanElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluParagraphProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined | "2xl" | Component size. |
weight | "normal" | "medium" | "bold" | "semibold" | undefined | "semibold" | Public Pimolu prop; see the source declaration for details. |
tone | "primary" | "success" | "warning" | "danger" | "default" | "muted" | undefined | "default" | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLParagraphElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLParagraphElement> | undefined | — | Standard React/HTML attribute. |
size"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefinedDefault: "2xl"
Component size.
weight"normal" | "medium" | "bold" | "semibold" | undefinedDefault: "semibold"
Public Pimolu prop; see the source declaration for details.
tone"primary" | "success" | "warning" | "danger" | "default" | "muted" | undefinedDefault: "default"
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLParagraphElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLParagraphElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluHeadingProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
level | PimoluHeadingLevel | undefined | 2 | Semantic level, also the default visual size. Defaults to 2. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined | "2xl" | Override the visual size that follows the level. |
weight | "normal" | "medium" | "bold" | "semibold" | undefined | "semibold" | Public Pimolu prop; see the source declaration for details. |
tone | "primary" | "success" | "warning" | "danger" | "default" | "muted" | undefined | "default" | Public Pimolu prop; see the source declaration for details. |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLHeadingElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLHeadingElement> | undefined | — | Standard React/HTML attribute. |
levelPimoluHeadingLevel | undefinedDefault: 2
Semantic level, also the default visual size. Defaults to 2.
size"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefinedDefault: "2xl"
Override the visual size that follows the level.
weight"normal" | "medium" | "bold" | "semibold" | undefinedDefault: "semibold"
Public Pimolu prop; see the source declaration for details.
tone"primary" | "success" | "warning" | "danger" | "default" | "muted" | undefinedDefault: "default"
Public Pimolu prop; see the source declaration for details.
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLHeadingElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLHeadingElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Preserve document order, sufficient line height and zoom without clipping.