Card

A card that displays information focused on a specific subject.

Pro component

Requires all-access to use the source code

Preview coming soon™️

Unlock All Pro Screens & Components

Elevate your app with powerful, native-feeling components and templates. Build faster with beautiful ready-to-use designs.

Get all-access

Usage

import {
  addOpacityToRgb,
  Card,
  CardBadge,
  CardContent,
  CardDescription,
  CardFooter,
  CardImage,
  CardSubtitle,
  CardTitle,
} from '~/components/nativewindui/Card';

<Card>
  <CardContent>
    <CardTitle>Title</CardTitle>
    <CardSubtitle>Subtitle</CardSubtitle>
  </CardContent>
  <CardFooter>
    <CardDescription>Description</CardDescription>
  </CardFooter>
</Card>

Props

Card

Inherits props from React Native's View component.

Prop	Type	Description
rootClassName	string	Class name for the root element of the Card.

CardBadge

Inherits props from React Native's View component.

CardContent

Inherits props from React Native's View component.

Prop	Type	Default	Description
linearGradientColors	readonly string[]		Colors used in the linear gradient for the Card background.
iosBlurIntensity	number	3	Intensity of the blur effect on iOS devices.
iosBlurClassName	string		Class name applied to the blur view on iOS.

CardImage

Inherits props from the Expo Image component.

Prop	Type	Default	Description
transition	number	200	Transition duration for the image in milliseconds.
style	StyleProp<ViewStyle>		Style applied to the image container.
contentPosition	'top left' \| 'top right' \| 'bottom left' \| 'bottom right'	'top right'	Position of the image content inside the container.
contentFit	'cover' \| 'contain' \| 'fill' \| 'none'	'cover'	How the image content fits within its container.
materialRootClassName	string		ANDROID ONLY: Class name for the root container of the image component.

CardTitle

Inherits props from NativeWindUI's Text component.

CardSubtitle

Inherits props from NativeWindUI's Text component.

CardDescription

Inherits props from NativeWindUI's Text component.

CardFooter

Inherits props from the Blur View component.