TextAndroid

Themed type scale from caption to display.

$ npx lumioui add text

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

Texttext.tsx

text/text.tsx open

Live preview — the real component, driven by the props below.

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

export function Example() {
  return (
    <Text />
  );
}

import * as React from "react";
import { forwardRef } from "react";
import { Text as RNText, type TextProps as RNTextProps } from "react-native";
import { cn, createVariant } from "@lumioui/core";

const textVariants = createVariant({
  base: "text-foreground",
  variants: {
    variant: {
      default: "text-base",
      h1: "text-4xl font-bold leading-tight",
      h2: "text-3xl font-bold leading-tight",
      h3: "text-2xl font-semibold leading-tight",
      h4: "text-xl font-semibold leading-tight",
      large: "text-lg font-semibold leading-tight",
      small: "text-sm font-medium",
      muted: "text-sm text-muted-foreground",
      lead: "text-xl text-muted-foreground",
      code: "font-mono text-sm bg-muted rounded px-1.5 py-0.5",
      blockquote: "text-base italic border-l-4 border-border pl-4",
    },
  },
  defaultVariants: { variant: "default" },
});

export interface TextProps extends RNTextProps {
  variant?:
    | "default"
    | "h1"
    | "h2"
    | "h3"
    | "h4"
    | "large"
    | "small"
    | "muted"
    | "lead"
    | "code"
    | "blockquote";
  className?: string;
}

/** Semantic text with shadcn-style variants. Respects Dynamic Type by default. */
export const Text = forwardRef<React.ElementRef<typeof RNText>, TextProps>(
  function Text({ variant = "default", className, ...props }, ref) {
    const isHeading = variant.startsWith("h");
    return (
      <RNText
        ref={ref}
        className={cn(textVariants({ variant }), className)}
        accessibilityRole={isHeading ? "header" : "text"}
        {...props}
      />
    );
  }
);

Text.displayName = "Text";
export { textVariants };

Props2

variant?	\| "default" \| "h1" \| "h2" \| "h3" \| "h4" \| "large" \| "small" \| "muted" \| "lead" \| "code" \| "blockquote"
className?	string

Textscale.tsx

text/variants/scale.tsx open

Themed type scale from caption to display.

import { TextScale } from "@/components/ui/text/variants/scale";

export function Example() {
  return (
    <TextScale />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Text } from "../text";
import { Glass } from "../../glass/glass";

/** TextScale — the full type scale in a feed-style composition. */
export function TextScale() {
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <Text variant="h1">Good evening, Amara</Text>
          <Text variant="large">Your portfolio is up 4.2% this week with strong gains across tech holdings.</Text>
          <Text>Transactions settle instantly and every transfer is protected with Face ID confirmation.</Text>
          <Text variant="small">Updated just now · $4,280.50 available</Text>
          <Text variant="muted">Muted captions, timestamps and helper copy use this tone.</Text>
        </Glass>
      </View>
  );
}