Text

Usage

The quick brown fox jumps over the lazy dog.

import { Text } from "stylus-ui/Text";

export default () => <Text>The quick brown fox jumps over the lazy dog.</Text>;

As another element

Use the as prop to render text as a p, div or span. This prop is purely semantic and does not alter visual appearance.

This text is in a span.

This text is in a paragraph.

This text is in a div.

import { Text } from "stylus-ui/Text";

export default () => (
  <div className="space-y-2">
    <Text as="span">This text is in a span.</Text>
    <Text as="p">This text is in a paragraph.</Text>
    <Text as="div">This text is in a div.</Text>
  </div>
);

Size

Use the size prop to control text size. This prop also provides correct line height and corrective letter spacing.

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

import { Text } from "stylus-ui/Text";

export default () => (
  <div className="flex flex-col gap-2">
    <Text size="xs">The quick brown fox jumps over the lazy dog.</Text>
    <Text size="sm">The quick brown fox jumps over the lazy dog.</Text>
    <Text size="md">The quick brown fox jumps over the lazy dog.</Text>
    <Text size="lg">The quick brown fox jumps over the lazy dog.</Text>
    <Text size="xl">The quick brown fox jumps over the lazy dog.</Text>
  </div>
);

Weight

Use the weight prop to control text thickness.

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

import { Text } from "stylus-ui/Text";

export default () => (
  <div className="flex flex-col gap-2">
    <Text weight="normal">The quick brown fox jumps over the lazy dog.</Text>
    <Text weight="medium">The quick brown fox jumps over the lazy dog.</Text>
    <Text weight="semibold">The quick brown fox jumps over the lazy dog.</Text>
    <Text weight="bold">The quick brown fox jumps over the lazy dog.</Text>
  </div>
);

Color

Set the color prop to display default text across light and dark mode. If you need secondary text, pass the muted boolean prop to lower the text contrast. All colors meet AA color contrast requirements for common backgrounds.

slateThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

brandThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

redThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

orangeThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

yellowThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

limeThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

greenThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

tealThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

cyanThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

skyThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

blueThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

purpleThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

fuchsiaThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

pinkThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

roseThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

whiteThe quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.

Wrap

Change the wrap prop to affect how text flows to multiple lines.

• wrap is the default setting and allows text to flow to multiple lines normally
• nowrap will prevent text from wrapping
• pretty will always keep at least two words on the last line of text, to prevent orphans
• balance will run the text block through an algorithm to find the optimally “condensed” paragraph with the least amount of variation in line lengths

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

import { Text } from "stylus-ui/Text";

export default () => (
  <Text wrap="pretty" className="max-w-[320px]">
    The goal of typography is to relate font size, line height, and line width
    in a proportional way that maximizes beauty and makes reading easier and
    more pleasant.
  </Text>
);

When using center aligned text, it can be helpful to combine it with balance:

By signing up, you agree to Scribe's Privacy Policy and Terms of Service.

import { Text } from "stylus-ui/Text";

export default () => (
  <Text wrap="balance" size="sm" className="max-w-[320px] text-center">
    By signing up, you agree to Scribe's Privacy Policy and Terms of Service.
  </Text>
);

Truncate

Text may be truncated to a specific number of lines by passing a number between 1 and 6 to truncate.

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

import { Text } from "stylus-ui/Text";

export default () => (
  <Text truncate={2} className="max-w-[320px]">
    The goal of typography is to relate font size, line height, and line width
    in a proportional way that maximizes beauty and makes reading easier and
    more pleasant.
  </Text>
);

API Reference

Text

Prop	Type	Default
children	ReactNode
as	"span""p""div"	"span"
className	string
color	"slate""brand""red""orange""yellow""lime""green""teal""cyan""sky""blue""purple""fuchsia""pink""rose""white"	"slate"
muted	boolean	false
size	"xs""sm""md""lg""xl"	"md"
truncate	123456
weight	"normal""medium""semibold""bold"	"normal"
wrap	"wrap""nowrap""pretty""balance"	"wrap"