Text

Typography component with heading and body text variants.

Heading One

This is a paragraph of text.

import { Text } from "@/components/ui/text";

export function MyScreen() {
  return (
    <>
      <Text variant="h1">Heading One</Text>
      <Text variant="p">This is a paragraph of text.</Text>
    </>
  );
}

Installation

npx @aniui/cli add text

Usage

app/index.tsx

import { Text } from "@/components/ui/text";

export function MyScreen() {
  return (
    <>
      <Text variant="h1">Heading One</Text>
      <Text variant="p">This is a paragraph of text.</Text>
    </>
  );
}

Variants

Heading 1

Heading 2

Heading 3

Heading 4

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

Lead text for introductions

Large emphasized text

Small utility text

Muted secondary information

<Text variant="h1">Heading 1</Text>
<Text variant="h2">Heading 2</Text>
<Text variant="h3">Heading 3</Text>
<Text variant="h4">Heading 4</Text>
<Text variant="p">Paragraph text</Text>
<Text variant="lead">Lead text</Text>
<Text variant="large">Large text</Text>
<Text variant="small">Small text</Text>
<Text variant="muted">Muted text</Text>

Props

PropTypeDefault

variant

"h1" | "h2" | "h3" | "h4" | "p" | "lead" | "large" | "small" | "muted"

"p"

className

string

—

Also accepts all Text props from React Native.

Source

components/ui/text.tsx

import React from "react";
import { Text as RNText } from "react-native";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const textVariants = cva("text-foreground", {
  variants: {
    variant: {
      h1: "text-4xl font-extrabold tracking-tight",
      h2: "text-3xl font-bold tracking-tight",
      h3: "text-2xl font-semibold tracking-tight",
      h4: "text-xl font-semibold tracking-tight",
      p: "text-base leading-7",
      lead: "text-xl text-muted-foreground",
      large: "text-lg font-semibold",
      small: "text-sm font-medium leading-none",
      muted: "text-sm text-muted-foreground",
    },
  },
  defaultVariants: { variant: "p" },
});
export interface TextProps
  extends React.ComponentPropsWithoutRef<typeof RNText>,
    VariantProps<typeof textVariants> {
  className?: string;
}
export function Text({ variant, className, ...props }: TextProps) {
  return (
    <RNText
      className={cn(textVariants({ variant }), className)}
      {...props}
    />
  );
}