REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Core Primitives

Card

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

Example

Preview

Code

Props

Card Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the card container.

variant

'elevated' | 'outline' | 'ghost' | 'filled'

'elevated'

The visual style variant of the card.

size

'sm' | 'md' | 'lg'

'md'

Controls the padding and spacing within the card.

CardHeader Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the card header.

CardBody Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the card body.

CardFooter Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the card footer.

Usage Guidelines

When to use

Use Card to present grouped content like articles, product details, or dashboard widgets.

Best practices

•

Use CardHeader, CardBody, and CardFooter for structured content layout.

•

Choose elevated variant for primary content cards and outline for secondary.

•

Keep card content focused on a single topic or action.

Accessibility

Card is a container element. Ensure interactive elements within the card have proper accessibility labels.

Related Components

Button

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

Image

A styled image component with built-in size presets and border-radius options, requiring an accessible alt label.

Divider

A visual separator that divides content into distinct sections, supporting horizontal and vertical orientations.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License