Skip to main content
Browse docs

Marwes documentation

Paragraph

Native paragraph-text family with one Paragraph component backed by a shared typography preset, theme defaults, and a shared React/Vue contract.

What this family solves

Native paragraph-text family with one Paragraph component backed by a shared typography preset, theme defaults, and a shared React/Vue contract.

Use when

  • The UI needs real body copy, supporting text, or longer reading content that should remain plain paragraph text.
  • The product wants React and Vue paragraph behavior to stay aligned through one core recipe, one shared typography preset, and one shared contract.
  • The layout needs explicit control over surrounding spacing while still reusing Marwes typography defaults.

Avoid when

  • The content should be a real heading, label, caption, list item, or other more specific semantic element.
  • The surface only needs visually styled text and cannot honestly be represented as a paragraph block.
  • The team expects a family-local metadata layer or purpose-wrapper vocabulary that the current Paragraph family does not ship.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Component

Paragraph

Type

ParagraphProps

Vue — @marwes-ui/vue

Component

Paragraph

Type

ParagraphProps

Svelte — @marwes-ui/svelte

Component

Paragraph

Type

ParagraphProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { H1, H2, H3, Paragraph, Text, TextVariant } from "@marwes-ui/react"

export function Example() {
  return (
    <>
      <Text variant={TextVariant.display}>Display</Text>

      <H1>Heading 1</H1>
      <H2>Heading 2</H2>
      <H3>Heading 3</H3>

      <Paragraph size="md">Body paragraph text.</Paragraph>
      <Paragraph size="sm">Small body paragraph.</Paragraph>

      <Text variant={TextVariant.label}>Label default</Text>
      <Text variant={TextVariant.labelSmall}>Label small</Text>
      <Text variant={TextVariant.caption}>Caption</Text>
      <Text variant={TextVariant.overline}>Overline</Text>
    </>
  )
}

Vue

<script setup lang="ts">
import { H1, H2, H3, Paragraph, Text, TextVariant } from "@marwes-ui/vue"
</script>

<template>
  <Text :variant="TextVariant.display">Display</Text>

  <H1>Heading 1</H1>
  <H2>Heading 2</H2>
  <H3>Heading 3</H3>

  <Paragraph size="md">Body paragraph text.</Paragraph>
  <Paragraph size="sm">Small body paragraph.</Paragraph>

  <Text :variant="TextVariant.label">Label default</Text>
  <Text :variant="TextVariant.labelSmall">Label small</Text>
  <Text :variant="TextVariant.caption">Caption</Text>
  <Text :variant="TextVariant.overline">Overline</Text>
</template>

Svelte

<script lang="ts">
  import { H1, H2, H3, Paragraph, Text, TextVariant } from "@marwes-ui/svelte"
</script>

<Text variant={TextVariant.display}>Display</Text>

<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>

<Paragraph size="md">Body paragraph text.</Paragraph>
<Paragraph size="sm">Small body paragraph.</Paragraph>

<Text variant={TextVariant.label}>Label default</Text>
<Text variant={TextVariant.labelSmall}>Label small</Text>
<Text variant={TextVariant.caption}>Caption</Text>
<Text variant={TextVariant.overline}>Overline</Text>

Accessibility requirements

  • Paragraph vs Text usage: Keep body copy in Paragraph and reserve Text for shorter labels and captions.
  • Readability review: Verify color contrast and line length stay readable at every supported size.
  • Manual review boundary: Product-level judgment about whether Paragraph is being used for real body copy instead of replacing headings, labels, or other richer structure.
  • Manual review 2: Readability review for long-form content, especially line length, spacing, and visual hierarchy in real layouts.
  • Manual review 3: Whether teams use size variants for reading emphasis rather than as a shortcut for semantic structure.

Theming

Paragraph uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources