Component reference
Hero
A composed product introduction with calls to action.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
A composed product introduction
A workspace that feels like yours.
Bring your team's projects together with a visual language you can make your own.
Try the action. No account or request is created.
Studio workspace
An illustrative product composition
Width adapts to the available space
"use client";
import { useState } from "react";
import {
Hero,
HeroContent,
HeroEyebrow,
HeroTitle,
HeroDescription,
HeroActions,
Button,
Card,
CardHeader,
CardTitle,
CardContent,
Stat
} from "@pimolu/react";
export function DemoExample() {
const [joined, setJoined] = useState(false);
return (
<Hero
variant="gradient"
media={<Card>
<CardHeader>
<CardTitle>Studio workspace</CardTitle>
</CardHeader>
<CardContent>
<Stat
label="Your next project"
value="One system"
description="An illustrative product composition"
/>
</CardContent>
</Card>}
>
<HeroContent>
<HeroEyebrow>A composed product introduction</HeroEyebrow>
<HeroTitle
as="h2"
>
A workspace that feels like yours.
</HeroTitle>
<HeroDescription>
Bring your team's projects together with a visual language
you can make your own.
</HeroDescription>
<HeroActions>
<Button
onClick={() => setJoined(!joined)}
>
{
joined
? "You're on the demo list"
: "Join the demo list"
}
</Button>
</HeroActions>
<p
role="status"
>{
joined
? "Your choice is saved locally for this preview."
: "Try the action. No account or request is created."
}</p>
</HeroContent>
</Hero>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Marketing hero
The default composition pairs a left-aligned message with a visual on the right.
Centered and muted
align='center' and variant='muted' create a quieter launch or announcement block.
Grid surface with bottom media
mediaPosition='bottom' stacks the visual under the message; variant='grid' adds a technical backdrop.
Usage
Make primary and secondary actions lead to real destinations in your product.
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.
PimoluHeroProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Content slot, usually the compound hero parts. |
variant | PimoluHeroVariant | undefined | "default" | Visual surface. Defaults to "default". |
align | PimoluHeroAlign | undefined | "start" | Content alignment. Defaults to "start". |
size | PimoluHeroSize | undefined | "lg" | Type and spacing scale. Defaults to "lg". |
media | ReactNode | — | Optional visual placed beside or below the content. |
mediaPosition | PimoluHeroMediaPosition | undefined | "right" | Media placement. Defaults to "right". |
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<HTMLElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLElement> | undefined | — | Standard React/HTML attribute. |
childrenRequiredReactNodeNo default extracted.
Content slot, usually the compound hero parts.
variantPimoluHeroVariant | undefinedDefault: "default"
Visual surface. Defaults to "default".
alignPimoluHeroAlign | undefinedDefault: "start"
Content alignment. Defaults to "start".
sizePimoluHeroSize | undefinedDefault: "lg"
Type and spacing scale. Defaults to "lg".
mediaReactNodeNo default extracted.
Optional visual placed beside or below the content.
mediaPositionPimoluHeroMediaPosition | undefinedDefault: "right"
Media placement. Defaults to "right".
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<HTMLElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluHeroContentProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
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<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
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<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluHeroEyebrowProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
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<HTMLParagraphElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLParagraphElement> | undefined | — | Standard React/HTML attribute. |
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<HTMLParagraphElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLParagraphElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluHeroTitleProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
as | PimoluHeroTitleElement | undefined | "h1" | Heading element. Defaults to "h1". |
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. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
asPimoluHeroTitleElement | undefinedDefault: "h1"
Heading element. Defaults to "h1".
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.
PimoluHeroDescriptionProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
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<HTMLParagraphElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLParagraphElement> | undefined | — | Standard React/HTML attribute. |
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<HTMLParagraphElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLParagraphElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluHeroActionsProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
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<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
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<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluHeroMediaProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
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<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
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<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Keep the heading order correct and retain text contrast over any visual media.