Marmo UIMARMO UI

Components

Text

A polymorphic typography component that renders text with consistent styling from the design system's type scale.

Installation

npm install @marmoui/ui
yarn add @marmoui/ui
pnpm add @marmoui/ui
bun add @marmoui/ui

Usage

import { Text } from '@marmoui/ui';

Examples

Headings

Heading Scale

All heading variants from 3xl to xs

Heading 3XLHeading 2XLHeading XLHeading LGHeading MDHeading SMHeading XS
<div className="flex flex-col gap-2">
<Text variant="heading-3xl">Heading 3XL</Text>
<Text variant="heading-2xl">Heading 2XL</Text>
<Text variant="heading-xl">Heading XL</Text>
<Text variant="heading-lg">Heading LG</Text>
<Text variant="heading-md">Heading MD</Text>
<Text variant="heading-sm">Heading SM</Text>
<Text variant="heading-xs">Heading XS</Text>
</div>

Body Text

Body Scale

Body text sizes for content

Body Large - For introductory text and emphasis.Body Medium - Default body text for most content.Body Small - Secondary information and captions.Body Extra Small - Fine print and metadata.
<div className="flex flex-col gap-2">
<Text variant="body-lg">Body Large - For introductory text and emphasis.</Text>
<Text variant="body-md">Body Medium - Default body text for most content.</Text>
<Text variant="body-sm">Body Small - Secondary information and captions.</Text>
<Text variant="body-xs">Body Extra Small - Fine print and metadata.</Text>
</div>

Caps

Caps Scale

All-caps text for labels and section headers

Caps LargeCaps MediumCaps Small
<div className="flex flex-col gap-2">
<Text variant="caps-lg">Caps Large</Text>
<Text variant="caps-md">Caps Medium</Text>
<Text variant="caps-sm">Caps Small</Text>
</div>

Semantic Elements

Polymorphic Rendering

Render as different HTML elements

This renders as an h1

This renders as a paragraph

This renders as a span
<div className="flex flex-col gap-2">
<Text as="h1" variant="heading-xl">This renders as an h1</Text>
<Text as="p" variant="body-md">This renders as a paragraph</Text>
<Text as="span" variant="body-sm">This renders as a span</Text>
<Text as="label" variant="body-sm" fontWeight="medium">This renders as a label</Text>
</div>

Truncation

Truncated Text

Text that truncates with ellipsis when too long

This is a very long piece of text that will be truncated

<div className="w-48">
<Text as="p" variant="body-md" truncate>
  This is a very long piece of text that will be truncated
</Text>
</div>

Best Practices

✓

Use semantic elements

Use the as prop to render appropriate HTML elements (h1-h6, p, span).

✓

Follow the type hierarchy

Use the heading scale in order. Don't skip levels (h1 to h3) for accessibility.

✗

Don't style text with raw classes

Use the Text component variants instead of applying typography classes directly.

✗

Don't use headings for visual size only

Choose heading levels based on document structure, not visual appearance.

Props

Props

Accessibility

  • Use semantic HTML elements via the as prop for proper document structure.
  • Maintain heading hierarchy (h1 > h2 > h3) for screen reader navigation.
  • Ensure sufficient color contrast for all text color variants.
  • Use visuallyHidden for screen-reader-only text.