REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Data Display

Empty

A compound component for displaying empty state messages with optional icon, title, description, and action.

Example

Preview

Code

Props

Empty Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the empty container.

EmptyIcon Props

Prop

Type

Default

Description

as

React.ElementType

—

The icon component to render.

className

string

—

NativeWind utility classes.

EmptyTitle Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes.

EmptyDescription Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes.

EmptyAction Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes.

Usage Guidelines

When to use

Use Empty when a list, table, or view has no data to display.

Best practices

•

Provide a clear call-to-action to guide users when content is empty.

•

Use an illustrative icon to make empty states feel intentional.

Accessibility

Empty state content is accessible to screen readers. Ensure action buttons have descriptive labels.

Related Components

Text

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

Button

A compound interactive button component with text, icon, and spinner sub-components, supporting multiple actions, variants, and sizes.

Icon

A wrapper component for rendering icon elements from any icon library via the `as` prop.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License