Text

Typography primitive. Sized via a scale, weighted via an enum, polymorphic on the element.

Text is plyxui's typography primitive. Sized via a small enum (xs to 3xl), weighted via four named weights, color resolved against the theme, polymorphic on the element via the as prop on web.

Try it live

import { Text, Stack, Box } from "@plyxui/primitives";

export default function App() {
return (
  <Box padding="lg" style={{ minHeight: "100vh" }}>
    <Stack direction="vertical" gap={2}>
      <Text size="3xl" weight="bold">Display</Text>
      <Text size="xl" weight="semibold">Heading</Text>
      <Text size="md">Body copy lives at the default size.</Text>
      <Text size="sm" style={{ opacity: 0.7 }}>Muted caption</Text>
      <Text size="xs" weight="medium">XS metadata</Text>
    </Stack>
  </Box>
);
}

API

<Text size="md" weight="semibold" color="text">
  Hello.
</Text>

<Text as="h2" size="2xl" weight="bold">Page title</Text>
<Text as="p"  size="md"  color="textMuted">Subtitle copy.</Text>
<Text size="sm" truncate>This will ellipsis if it overflows.</Text>

Props

Size scale

Values are font-size / line-height in pixels. Same on web and native; the native variant uses unitless line-height (RN convention).

Native

The native variant ignores as (always renders RN.Text), but every other prop matches. truncate maps to numberOfLines={1}.