Reactberry

Text

The typography primitive. Extends Box with font, text, truncation, and line clamp props.

Text extends Box, so it accepts every Box prop, and adds styled-system typography plus a few text utilities. Use it for headings, paragraphs, labels, links, and any element that needs font styling.

Release notes

Version 2.1 is here

Faster builds, a new upload block and dark mode for every chart.

Import#

typescript
import { Text } from "@reactberry/system/elements";

Usage#

typescript
import { Box, Text } from "@reactberry/system/elements";

export default function SectionHeader() {
  return (
    <Box display="flex" flexDirection="column" gap="xxs">
      <Text as="h2" fontSize="xl" fontWeight="600" color="primary">
        Billing
      </Text>
      <Text as="p" fontSize={["s", "m"]} color="secondary">
        Manage your plan and payment methods.
      </Text>
    </Box>
  );
}

Examples#

Font sizes#

fontSize maps to theme.fontSizes. Use the short aliases from xxs to xxl.

xxsQuarterly report
xsQuarterly report
sQuarterly report
mQuarterly report
lQuarterly report
xlQuarterly report
xxlQuarterly report

Truncate and clamp#

truncate cuts a single line with an ellipsis. lineClamp limits text to a number of lines.

Invoice-2026-0412-northwind-traders-final.pdf

The quarterly review covers revenue, churn and hiring across all regions, with a detailed breakdown of each product line and the plans for next quarter.

Icons with as#

Pass an icon component to as and use size for its width and height. The icons fill with currentColor, so color applies.

Settings
Privacy

API#

Text#

PropTypeDefaultDescription
as
ElementType
"span"

Element or component to render, for example "h2", "p" or "label".

truncate
boolean
—

Single-line ellipsis. Sets width: 100%, white-space: nowrap, overflow: hidden, text-overflow: ellipsis and display: inline-block.

lineClamp
number
—

Clamps to the given number of lines with an ellipsis, using display: -webkit-box and -webkit-line-clamp.

textTransform
string
—

CSS text-transform.

textDecoration
string
—

CSS text-decoration.

textOverflow
string
—

CSS text-overflow.

whiteSpace
string
—

CSS white-space.

overflowWrap
string
—

CSS overflow-wrap.

disabled
boolean
—

Sets opacity: 0.5 and pointer-events: none.

Text also accepts every Box prop and the styled-system typography group:

  • fontSize — maps to theme.fontSizes
  • fontWeight, lineHeight, letterSpacing, fontFamily, fontStyle, textAlign — raw CSS values (for example fontWeight="600", lineHeight="1.5")

The default themes do not define fonts, fontWeights, lineHeights or letterSpacings scales, so those props pass through unchanged. Named values such as "medium" or "relaxed" are not valid CSS for fontWeight or lineHeight.

Font size reference#

Aliases from theme.fontSizes:

  • xxs 0.625rem, xs 0.75rem, s 0.875rem, m 1rem, l 1.25rem, xl 1.5rem, xxl 2rem, xxxl 3rem, huge 5rem

Long names (xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge) match the short aliases. Numeric indices 0 to 13 are also available.

Accessibility#

  • Text renders a span by default. Pass as for headings, paragraphs and labels so the document structure is correct.
  • Text cut off by truncate or lineClamp is still in the DOM and read in full by screen readers.

Notes#

  • Use fontSize for text size. size sets width and height (inherited from Box), which is useful for icons rendered with as.
  • Use Text rather than Box whenever typography props are needed.