Typography

Preview

Interactive

The quick brown fox jumps over the lazy dog.

Properties

As (HTML Tag)

Typography Text

Live Code Snippet

import { Typography } from '@moul-dev/ui';

export default function Example() {
  return (
    <Typography.Span>
      The quick brown fox jumps over the lazy dog.
    </Typography.Span>
  );
}

The Typography component is built with React Aria and styled using StyleX. It provides semantic subcomponents for cleaner, more readable markup.

Semantic Components

Instead of specifying the as prop manually, you can use semantic subcomponents exported directly from Typography:

Heading 1 (Typography.Heading as="h1")

Heading 3 (Typography.Heading as="h3")

Paragraph (Typography.Paragraph) - Standard body text.

Span (Typography.Span) - Inline text element.Label (Typography.Label) - Form label element.

import { Typography } from '@moul-dev/ui';

export default function Example() {
  return (
    <>
      <Typography.Heading as="h1">Heading 1</Typography.Heading>
      <Typography.Heading as="h3">Heading 3</Typography.Heading>
      <Typography.Paragraph>This is a paragraph.</Typography.Paragraph>
      <Typography.Span>This is a span.</Typography.Span>
      <Typography.Label>This is a label.</Typography.Label>
    </>
  );
}

HTML Tags

You can specify the HTML tag to render using the as prop on the base Typography component.

Heading 1 (h1)

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)

Heading 6 (h6)

Paragraph (p) - Standard body text.

Span (span) - Inline text wrapper.Label (label) - Form label style.

<Typography as="h1">Heading 1 (h1)</Typography>
<Typography as="h2">Heading 2 (h2)</Typography>
<Typography as="h3">Heading 3 (h3)</Typography>
<Typography as="h4">Heading 4 (h4)</Typography>
<Typography as="h5">Heading 5 (h5)</Typography>
<Typography as="h6">Heading 6 (h6)</Typography>
<Typography as="p">Paragraph (p)</Typography>
<Typography as="span">Span (span)</Typography>
<Typography as="label">Label (label)</Typography>

Import

import { Typography } from '@moul-dev/ui';

Usage

Here is a basic example of how to use the Typography semantic subcomponents:

import { Typography } from '@moul-dev/ui';

export default function Example() {
  return (
    <Typography.Paragraph>
      Quick brown fox jumps over the lazy dog.
    </Typography.Paragraph>
  );
}

Props

Typography Props

Prop

Type