Text
Typography primitives with semantic web roles.
- Chromium
- Firefox
- WebKit
- WCAG 2.2 AA
Preview
Hello World!
"use client";
import { Text } from "@moe-ui/registry/components/ui/text";
export const TextPreview = () => {
return <Text>Hello World!</Text>;
};
One command, your source
Installation
pnpm dlx @moe-ui/cli@beta add textUsage
The CLI installs editable source into your application. Import the component from your configured UI directory:
import { Text } from "@/components/ui/text";Variants and composition
Each additional variant has its own live preview and testable section.
Typography variants
Heading one
Heading two
Heading three
Heading four
A paragraph with comfortable reading rhythm.
A short, memorable quotation.
pnpm dlx @moe-ui/cli add textLead text introduces an important idea.
Large supporting text
Small interface label
Muted supporting copy
"use client";
import { Text } from "@moe-ui/registry/components/ui/text";
import { View } from "react-native";
export function TypographyPreview() {
return (
<View className="w-full max-w-lg gap-3">
<Text variant="h1">Heading one</Text>
<Text variant="h2">Heading two</Text>
<Text variant="h3">Heading three</Text>
<Text variant="h4">Heading four</Text>
<Text variant="p">A paragraph with comfortable reading rhythm.</Text>
<Text variant="blockquote">A short, memorable quotation.</Text>
<Text variant="code">pnpm dlx @moe-ui/cli add text</Text>
<Text variant="lead">Lead text introduces an important idea.</Text>
<Text variant="large">Large supporting text</Text>
<Text variant="small">Small interface label</Text>
<Text variant="muted">Muted supporting copy</Text>
</View>
);
}
Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.
Public API
The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.
Keyboard and accessibility
Semantic roles, disabled state, visible focus, and contrast are verified in the component browser matrix.
Browser support
This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.
Nothing hiddenCanonical source and public exports2 exports
TextTextClassContext"use client";
import { cn } from "../../lib/utils";
import * as Slot from "@rn-primitives/slot";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { Platform, Text as RNText, type Role } from "react-native";
const textVariants = cva(
cn(
"text-foreground text-base",
Platform.select({
web: "select-text",
}),
),
{
variants: {
variant: {
default: "",
h1: cn(
"text-center text-4xl font-extrabold tracking-tight",
Platform.select({ web: "scroll-m-20 text-balance" }),
),
h2: cn(
"border-border border-b pb-2 text-3xl font-semibold tracking-tight",
Platform.select({ web: "scroll-m-20 first:mt-0" }),
),
h3: cn(
"text-2xl font-semibold tracking-tight",
Platform.select({ web: "scroll-m-20" }),
),
h4: cn(
"text-xl font-semibold tracking-tight",
Platform.select({ web: "scroll-m-20" }),
),
p: "mt-3 leading-7 sm:mt-6",
blockquote: "mt-4 border-l-2 pl-3 italic sm:mt-6 sm:pl-6",
code: cn(
"bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
),
lead: "text-muted-foreground text-xl",
large: "text-lg font-semibold",
small: "text-sm font-medium leading-none",
muted: "text-muted-foreground text-sm",
},
},
defaultVariants: {
variant: "default",
},
},
);
type TextVariantProps = VariantProps<typeof textVariants>;
type TextVariant = NonNullable<TextVariantProps["variant"]>;
const ROLE: Partial<Record<TextVariant, Role>> = {
h1: "heading",
h2: "heading",
h3: "heading",
h4: "heading",
blockquote: Platform.select({ web: "blockquote" as Role }),
code: Platform.select({ web: "code" as Role }),
};
const ARIA_LEVEL: Partial<Record<TextVariant, string>> = {
h1: "1",
h2: "2",
h3: "3",
h4: "4",
};
const TextClassContext = React.createContext<string | undefined>(undefined);
function Text({
className,
asChild = false,
variant = "default",
...props
}: React.ComponentProps<typeof RNText> &
TextVariantProps &
React.RefAttributes<RNText> & {
asChild?: boolean;
}) {
const textClass = React.useContext(TextClassContext);
const Component = asChild ? Slot.Text : RNText;
return (
<Component
className={cn(textVariants({ variant }), textClass, className)}
role={variant ? ROLE[variant] : undefined}
aria-level={variant ? ARIA_LEVEL[variant] : undefined}
{...props}
/>
);
}
export { Text, TextClassContext };