REACT-NATIVES

WIRED FOR SPEED

react-natives v2.2.0

Theme

Light

Dark

Get Started

Components

Data Display

Stat

A compound component for displaying statistics with a label, number, help text, and trend arrow.

Example

Preview

Code

Props

Stat Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the stat container.

StatLabel Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes.

StatNumber Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes.

StatHelpText Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes.

StatArrow Props

Prop

Type

Default

Description

type *

'increase' | 'decrease'

—

Direction of the trend arrow.

className

string

—

NativeWind utility classes.

Usage Guidelines

When to use

Use Stat to display key metrics, KPIs, or summary numbers in dashboards.

Best practices

•

Pair StatArrow with StatHelpText to show trend context.

•

Use consistent formatting for StatNumber across dashboard cards.

Accessibility

Stat components are accessible to screen readers. StatArrow includes appropriate labels for trend direction.

Related Components

Card

A compound container component with header, body, and footer sections for grouping related content.

Text

A typographic component for rendering text with built-in size, weight, and decoration variants.

Badge

A compound component for displaying short status labels, counts, or tags with semantic color and variant options.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License