Typography

Typography is the React Native implementation shipped by the native-typography registry item. The component adapts the registry's web-facing composition to native primitives and touch-based interaction.

The native Typography component provides a single text primitive for the native registry. It combines the project's shared typography variants with React Native's Text component and automatically applies accessibility semantics for headings.

Typography also supports a context-based class name. Components such as the native Button, Card, Badge, and Field primitives use this context to provide consistent nested text styling.

InstallationCopy Anchor Link

CLICopy Anchor Link

npx shadcn add https://ui.tiesen.id.vn/r/native-typography.json

ManualCopy Anchor Link

Copy and paste the following code into your project.

import type { VariantProps } from 'class-variance-authority'import type { AccessibilityRole } from 'react-native'import * as React from 'react'import { Text } from 'react-native'import { cn } from '@/lib/utils'import { typographyVariants } from '@/components/ui/typography'const TypographyContext = React.createContext('')type TypographyProps = VariantProps<typeof typographyVariants>const ROLES = {  h1: 'header',  h2: 'header',  h3: 'header',  h4: 'header',} as const satisfies Partial<  Record<NonNullable<TypographyProps['variant']>, AccessibilityRole>>const LEVELS = {  h1: 1,  h2: 2,  h3: 3,  h4: 4,} as const satisfies Partial<  Record<NonNullable<TypographyProps['variant']>, number>>function Typography({  className,  variant = 'p',  ...props}: React.ComponentProps<typeof Text> &  VariantProps<typeof typographyVariants>) {  const classCtx = React.use(TypographyContext)  return (    <Text      data-slot='typography'      accessibilityRole={ROLES[variant as keyof typeof ROLES] ?? 'text'}      aria-level={LEVELS[variant as keyof typeof LEVELS]}      className={cn(        'text-base font-normal text-foreground',        typographyVariants({ variant }),        classCtx,        className      )}      {...props}    />  )}export { typographyVariants } from '@/components/ui/typography'export { TypographyContext, Typography }

FeaturesCopy Anchor Link

• Shared typography variants from the project's typography registry.
• Heading accessibility roles for h1 through h4.
• Heading levels are exposed through aria-level.
• Supports React Native Text props.
• Supports inherited typography classes through TypographyContext.
• Works with NativeWind/Uniwind className styling.

Registry dependencies: This component uses the shared web typography registry styles.

UsageCopy Anchor Link

import { Typography } from '@/components/native/typography'

export function TypographyExample() {
  return (
    <View className='gap-2'>
      <Typography variant='h1'>
        Account settings
      </Typography>

      <Typography variant='p'>
        Update your profile and notification preferences.
      </Typography>
    </View>
  )
}

VariantsCopy Anchor Link

The available variants are inherited from the project's shared typographyVariants. Common semantic variants include headings and paragraph/body styles.

<Typography variant='h1'>Heading 1</Typography>
<Typography variant='h2'>Heading 2</Typography>
<Typography variant='h3'>Heading 3</Typography>
<Typography variant='h4'>Heading 4</Typography>
<Typography variant='p'>Paragraph</Typography>

The exact variant list is defined by the shared @/registry/ui/typography implementation.

AccessibilityCopy Anchor Link

The component maps heading variants to React Native accessibility metadata:

• h1 → accessibilityRole="header", level 1
• h2 → accessibilityRole="header", level 2
• h3 → accessibilityRole="header", level 3
• h4 → accessibilityRole="header", level 4

Other variants use the text accessibility role.

Typography contextCopy Anchor Link

TypographyContext allows a parent component to provide additional classes to nested typography.

<TypographyContext value='text-primary'>
  <Typography>Inherited text color</Typography>
</TypographyContext>

The component combines the context class with the component's variant and local className.

API ReferenceCopy Anchor Link

TypographyCopy Anchor Link

Heading variants automatically expose heading accessibility metadata.

TypographyContextCopy Anchor Link

const TypographyContext: React.Context<string>

Provides inherited typography classes to nested Typography components.

typographyVariantsCopy Anchor Link

typographyVariants(
  props?: VariantProps<typeof typographyVariants>
)

The shared CVA helper used to resolve typography classes.