BNA

BNA UI
...

Text

PreviousNext

A themed text component with multiple variants for consistent typography across your app.

Installation

pnpm dlx bna-ui add text

Usage

import { Text } from '@/components/ui/text';
<Text variant="body">This is body text</Text>
<Text variant="heading">This is a heading</Text>
<Text variant="caption">This is caption text</Text>

Examples

Default

Typography Scale

Custom Colors

API Reference

Text

A flexible text component that supports multiple variants and theming.

PropTypeDefaultDescription
variant'body' | 'title' | 'subtitle' | 'caption' | 'heading' | 'link''body'The text variant that determines styling.
lightColorstring-Custom color for light theme.
darkColorstring-Custom color for dark theme.
childrenReactNode-The text content to display.
styleTextStyle-Additional styles to apply to the text.
...propsTextProps-All other React Native Text props are supported.

Variants

Heading

Large, bold text for main headings (28px, weight 700).

Title

Medium-large text for section titles (24px, weight 700).

Subtitle

Medium text for subsections (19px, weight 600).

Body

Standard text for content (default size, weight 400).

Caption

Small, muted text for captions and secondary info (default size, weight 400, muted color).

Link

Text styled as a clickable link (default size, weight 500, underlined).

Theming

The Text component automatically adapts to your app's theme:

  • Uses theme colors for text and muted text
  • Supports light and dark mode variants
  • Allows custom color overrides via lightColor and darkColor props
  • Integrates with the useThemeColor hook

Accessibility

The Text component is built with accessibility in mind:

  • Inherits all React Native Text accessibility features
  • Supports dynamic text sizing for users with vision impairments
  • Maintains proper contrast ratios with theme colors
  • Works with screen readers and other assistive technologies
  • Supports semantic roles via standard React Native Text props
TabsToast