Text

Display text

Source

View source code

Docs

Edit this page

Package

@thinker-core/mantine-core

Usage

Extra small text

Small text

Default text

Large text

Extra large text

Semibold

Bold

Italic

Underlined

Strikethrough

Dimmed text

Blue text

Teal 4 text

Uppercase

capitalized text

Aligned to center

Aligned to right

import { Text } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <>
      <Text size="xs">Extra small text</Text>
      <Text size="sm">Small text</Text>
      <Text size="md">Default text</Text>
      <Text size="lg">Large text</Text>
      <Text size="xl">Extra large text</Text>
      <Text fw={500}>Semibold</Text>
      <Text fw={700}>Bold</Text>
      <Text fs="italic">Italic</Text>
      <Text td="underline">Underlined</Text>
      <Text td="line-through">Strikethrough</Text>
      <Text c="dimmed">Dimmed text</Text>
      <Text c="blue">Blue text</Text>
      <Text c="peppermint.8">Teal 4 text</Text>
      <Text tt="uppercase">Uppercase</Text>
      <Text tt="capitalize">capitalized text</Text>
      <Text ta="center">Aligned to center</Text>
      <Text ta="right">Aligned to right</Text>
    </>
  );
}

When variant prop is set to gradient, you can control gradient with gradient prop, it accepts an object with from, to and deg properties. If thegradient prop is not set, Text will use theme.defaultGradient which can be configured on the theme object. gradient prop is ignored when variant is not gradient.

Note that variant="gradient" supports only linear gradients with two colors. If you need a more complex gradient, then use Styles API to modify Text styles.

Gradient Text

Gradient from

Gradient to

Gradient degree

import { Text } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <Text
      size="xl"
      fw={900}
      variant="gradient"
      gradient={{ from: 'ocean', to: 'bluesky', deg: 90 }}
    >
      Gradient Text
    </Text>
  );
}

Truncate

Set truncate prop to add text-overflow: ellipsis styles:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde provident eos fugiat id necessitatibus magni ducimus molestias. Placeat, consequatur. Quisquam, quae magnam perspiciatis excepturi iste sint itaque sunt laborum. Nihil?

Truncate

Start

End

import { Text, Box } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <Box w={300}>
      <Text truncate="end">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde provident eos fugiat id
        necessitatibus magni ducimus molestias. Placeat, consequatur. Quisquam, quae magnam
        perspiciatis excepturi iste sint itaque sunt laborum. Nihil?
      </Text>
    </Box>
  );
}

Line clamp

Specify maximum number of lines with lineClamp prop. This option uses -webkit-line-clamp CSS property (caniuse). Note that padding-bottom cannot be set on text element:

From Bulbapedia: Bulbasaur is a small, quadrupedal Pokémon that has blue-green skin with darker patches. It has red eyes with white pupils, pointed, ear-like structures on top of its head, and a short, blunt snout with a wide mouth. A pair of small, pointed teeth are visible in the upper jaw when its mouth is open. Each of its thick legs ends with three sharp claws. On Bulbasaur's back is a green plant bulb, which is grown from a seed planted there at birth. The bulb also conceals two slender, tentacle-like vines and provides it with energy through photosynthesis as well as from the nutrient-rich seeds contained within.

Size

Line clamp

import { Text } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <Text lineClamp={4}>
      {/* Text content */}
    </Text>
  );
}

Line clamp can also be used with any children (not only strings), for example with TypographyStylesProvider:

Line clamp with TypographyStylesProvider

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt nulla quam aut sed corporis voluptates praesentium inventore, sapiente ex tempore sit consequatur debitis non! Illo cum ipsa reiciendis quidem facere, deserunt eos totam impedit. Vel ab, ipsum veniam aperiam odit molestiae incidunt minus, sint eos iusto earum quaerat vitae perspiciatis.

import { TypographyStylesProvider, Text } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <Text lineClamp={3} component="div">
      <TypographyStylesProvider>
        <h3>Line clamp with TypographyStylesProvider</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt nulla quam aut sed
          corporis voluptates praesentium inventore, sapiente ex tempore sit consequatur debitis
          non! Illo cum ipsa reiciendis quidem facere, deserunt eos totam impedit. Vel ab, ipsum
          veniam aperiam odit molestiae incidunt minus, sint eos iusto earum quaerat vitae
          perspiciatis.
        </p>
      </TypographyStylesProvider>
    </Text>
  );
}

Inherit styles

Text always applies font-size, font-family and line-height styles, but in some cases this is not a desired behavior. To force Text to inherit parent styles set inherit prop. For example, highlight part of Title:

Title in which you want to highlight something

import { Text, Title } from '@thinker-core/mantine-core';

function Demo() {
  return <Title order={3}>Title in which you want to <Text span c="blue" inherit>highlight</Text> something</Title>;
}

Polymorphic component

Text is a polymorphic component – its default root element is p, but it can be changed to any other element or component with component prop:

import { Text } from '@thinker-core/mantine-core';

function Demo() {
  return <Text component="a" />;
}

Polymorphic components with TypeScript
Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, TextProps does not extend React.ComponentPropsWithoutRef'<'div'>' although p is the default element.
If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example:
import type { TextProps, ElementProps } from '@thinker-core/mantine-core';

interface MyTextProps extends TextProps,
  ElementProps<'a', keyof TextProps> {}
If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

span prop

Use span prop as a shorthand for component="span":

import { Text } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <>
      <Text span>Same as below</Text>
      <Text component="span">Same as above</Text>
    </>
  );
}

Text Style API

Thinker Mantine provides a comprehensive set of typography utility classes that can be applied using the ts (text style) prop on any component. These classes provide consistent typography across your application with predefined font sizes, line heights, font weights, and text decorations.

Available Categories

The text style utility classes are organized into several categories, each serving different typography purposes:

Display: Large, bold text for headings and titles
Heading: Subtle, semi-bold text for section headings
Title: Medium-sized, semi-bold text for card titles and secondary headings
Body: Normal-weight text for main content
Body Highlight: Semi-bold text for highlighted content
Paragraph: Smaller, normal-weight text for paragraphs
Paragraph Highlight: Semi-bold text for highlighted paragraphs
Label: Small, normal-weight text for labels
Link Underline: Underlined text for links (note: this is not a link component, it's just a text style class that can be used on any text element)

Usage

Apply text style classes using the ts prop on any Mantine component:

import { Text } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <div>
      <Text ts="d1">Main Page Title</Text>
      <Text ts="h2">Section Heading</Text>
      <Text ts="t3">Card Title</Text>
      <Text ts="b4">Main content text</Text>
      <Text ts="bh5">Important highlighted text</Text>
      <Text ts="p6">Small paragraph text</Text>
      <Text ts="lu7">Underlined text</Text>
    </div>
  );
}

Font Size Scale

Each category follows a consistent font size scale from 1-10

Consistent Properties

All text style classes include:

Line Height: 1.5 (consistent across all classes)
Font Weight: Category-specific (400, 600, or 700)
Text Decoration: Category-specific (none or underline)

Examples

Display Classes (Bold, Weight 700)

Display 1 - 56px

Display 2 - 48px

Display 3 - 40px

Display 5 - 32px

Display 7 - 24px

Display 9 - 16px

Heading Classes (Semi-bold, Weight 600)

Heading 2 - 40px

Heading 4 - 32px

Heading 5 - 28px

Heading 6 - 24px

Heading 8 - 16px

Heading 10 - 12px

Title Classes (Semi-bold, Weight 600)

Title 2 - 32px

Title 3 - 28px

Title 5 - 22px

Title 7 - 18px

Title 8 - 16px

Title 9 - 14px

Body Classes (Normal, Weight 400)

Body 1 - 24px

Body 2 - 22px

Body 4 - 18px

Body 5 - 16px

Body 6 - 14px

Body 7 - 12px

Body Highlight Classes (Semi-bold, Weight 600)

Body Highlight 1 - 24px

Body Highlight 2 - 22px

Body Highlight 4 - 18px

Body Highlight 5 - 16px

Body Highlight 6 - 14px

Body Highlight 7 - 12px

Paragraph Classes (Normal, Weight 400)

Paragraph 2 - 20px

Paragraph 3 - 18px

Paragraph 4 - 16px

Paragraph 5 - 14px

Paragraph 6 - 12px

Paragraph 7 - 10px

Paragraph 8 - 8px

Paragraph Highlight Classes (Semi-bold, Weight 600)

Paragraph Highlight 2 - 20px

Paragraph Highlight 3 - 18px

Paragraph Highlight 4 - 16px

Paragraph Highlight 5 - 14px

Paragraph Highlight 6 - 12px

Paragraph Highlight 7 - 10px

Paragraph Highlight 8 - 8px

Label Classes (Normal, Weight 400)

Label 1 - 24px

Label 2 - 22px

Label 4 - 18px

Label 5 - 16px

Label 6 - 14px

Label 7 - 12px

Link Underline Classes (Normal, Weight 400, Underlined)

Link Underline 1 - 24px

Link Underline 2 - 22px

Link Underline 4 - 18px

Link Underline 5 - 16px

Link Underline 6 - 14px

Link Underline 7 - 12px

import { Text } from '@thinker-core/mantine-core';

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      {/* Display Classes */}
      <div>
        <Text my="4xl" ts="d3">Display Classes (Bold, Weight 700)</Text>
        <Text ts="d1">Display 1 - 56px</Text>
        <Text ts="d2">Display 2 - 48px</Text>
        <Text ts="d3">Display 3 - 40px</Text>
        <Text ts="d5">Display 5 - 32px</Text>
        <Text ts="d7">Display 7 - 24px</Text>
        <Text ts="d9">Display 9 - 16px</Text>
      </div>

      {/* Heading Classes */}
      <div>
        <Text my="4xl" ts="d3">Heading Classes (Semi-bold, Weight 600)</Text>
        <Text ts="h2">Heading 2 - 40px</Text>
        <Text ts="h4">Heading 4 - 32px</Text>
        <Text ts="h5">Heading 5 - 28px</Text>
        <Text ts="h6">Heading 6 - 24px</Text>
        <Text ts="h8">Heading 8 - 16px</Text>
        <Text ts="h10">Heading 10 - 12px</Text>
      </div>

      {/* Title Classes */}
      <div>
        <Text my="4xl" ts="d3">Title Classes (Semi-bold, Weight 600)</Text>
        <Text ts="t2">Title 2 - 32px</Text>
        <Text ts="t3">Title 3 - 28px</Text>
        <Text ts="t5">Title 5 - 22px</Text>
        <Text ts="t7">Title 7 - 18px</Text>
        <Text ts="t8">Title 8 - 16px</Text>
        <Text ts="t9">Title 9 - 14px</Text>
      </div>

      {/* Body Classes */}
      <div>
        <Text my="4xl" ts="d3">Body Classes (Normal, Weight 400)</Text>
        <Text ts="b1">Body 1 - 24px</Text>
        <Text ts="b2">Body 2 - 22px</Text>
        <Text ts="b4">Body 4 - 18px</Text>
        <Text ts="b5">Body 5 - 16px</Text>
        <Text ts="b6">Body 6 - 14px</Text>
        <Text ts="b7">Body 7 - 12px</Text>
      </div>

      {/* Body Highlight Classes */}
      <div>
        <Text my="4xl" ts="d3">Body Highlight Classes (Semi-bold, Weight 600)</Text>
        <Text ts="bh1">Body Highlight 1 - 24px</Text>
        <Text ts="bh2">Body Highlight 2 - 22px</Text>
        <Text ts="bh4">Body Highlight 4 - 18px</Text>
        <Text ts="bh5">Body Highlight 5 - 16px</Text>
        <Text ts="bh6">Body Highlight 6 - 14px</Text>
        <Text ts="bh7">Body Highlight 7 - 12px</Text>
      </div>

      {/* Paragraph Classes */}
      <div>
        <Text my="4xl" ts="d3">Paragraph Classes (Normal, Weight 400)</Text>
        <Text ts="p2">Paragraph 2 - 20px</Text>
        <Text ts="p3">Paragraph 3 - 18px</Text>
        <Text ts="p4">Paragraph 4 - 16px</Text>
        <Text ts="p5">Paragraph 5 - 14px</Text>
        <Text ts="p6">Paragraph 6 - 12px</Text>
        <Text ts="p7">Paragraph 7 - 10px</Text>
        <Text ts="p8">Paragraph 8 - 8px</Text>
      </div>

      {/* Paragraph Highlight Classes */}
      <div>
        <Text my="4xl" ts="d3">Paragraph Highlight Classes (Semi-bold, Weight 600)</Text>
        <Text ts="ph2">Paragraph Highlight 2 - 20px</Text>
        <Text ts="ph3">Paragraph Highlight 3 - 18px</Text>
        <Text ts="ph4">Paragraph Highlight 4 - 16px</Text>
        <Text ts="ph5">Paragraph Highlight 5 - 14px</Text>
        <Text ts="ph6">Paragraph Highlight 6 - 12px</Text>
        <Text ts="ph7">Paragraph Highlight 7 - 10px</Text>
        <Text ts="ph8">Paragraph Highlight 8 - 8px</Text>
      </div>

      {/* Label Classes */}
      <div>
        <Text my="4xl" ts="d3">Label Classes (Normal, Weight 400)</Text>
        <Text ts="l1">Label 1 - 24px</Text>
        <Text ts="l2">Label 2 - 22px</Text>
        <Text ts="l4">Label 4 - 18px</Text>
        <Text ts="l5">Label 5 - 16px</Text>
        <Text ts="l6">Label 6 - 14px</Text>
        <Text ts="l7">Label 7 - 12px</Text>
      </div>

      {/* Link Underline Classes */}
      <div>
        <Text my="4xl" ts="d3">Link Underline Classes (Normal, Weight 400, Underlined)</Text>
        <Text ts="lu1">Link Underline 1 - 24px</Text>
        <Text ts="lu2">Link Underline 2 - 22px</Text>
        <Text ts="lu4">Link Underline 4 - 18px</Text>
        <Text ts="lu5">Link Underline 5 - 16px</Text>
        <Text ts="lu6">Link Underline 6 - 14px</Text>
        <Text ts="lu7">Link Underline 7 - 12px</Text>
      </div>
    </div>
  );
}

Table

Title