Skip to main content

​
Overview

Card is a versatile React Native component that provides a structured format for displaying content. Cards can display title, description, content, and footer. It also adapts automatically to the current color scheme.

​
Preview

  • Preview
  • Code

Light mode

Dark mode

​
Installation

  • CLI
  • Manual
npx nativecn-ui add Card

​
Components

​
Card

The parent container for the card system.
  • children - Components to be rendered inside the Cards container. Mainly CardHeader, CardContent, and CardFooter.
  • className?: string - Tailwind CSS classes to be applied to the View.

​
CardHeader

The container for the card header.
  • children - Components to be rendered inside the Cards container. Mainly CardTitle and CardDescription.
  • className?: string - Tailwind CSS classes to be applied to the View.

​
CardTitle

The main text shown in the header.
  • children - Text to be rendered inside the Text element.
  • className?: string - Tailwind CSS classes to be applied to the Text.

​
CardDescription

The secondary text shown in the header.
  • children - Text to be rendered inside the Text element.
  • className?: string - Tailwind CSS classes to be applied to the Text.

​
CardContent

The body of the card.
  • children - Components to be rendered inside the View element.
  • className?: string - Tailwind CSS classes to be applied to the View.

​
CardFooter

The footer of the card.
  • children - Components to be rendered inside the View element.
  • className?: string - Tailwind CSS classes to be applied to the View.

​
SimpleCard

A pre-built Card component taking text as input.
  • className?: string - Tailwind CSS classes to be applied to the View.
  • title?: string - The title of the card.
  • description?: string - A brief description or subtitle.
  • content?: string - The main content inside the card.
  • footer?: string - Text to display at the bottom of the card.

​
Usage

​
Basic usage

<Card>
  <CardHeader>
    <CardTitle>Accelerate UI</CardTitle>
    <CardDescription>Enter a new development experience</CardDescription>
  </CardHeader>
  <CardContent>
    <Text className="text-base text-primary">
      Sleek, easy to use components to build your next app faster.
    </Text>
  </CardContent>
  <CardFooter>
    <Text className="text-sm text-muted-foreground">
      Inspired by shadcn/ui
    </Text>
  </CardFooter>
</Card>

​
Basic usage with SimpleCard component

<SimpleCard
  title="Accelerate UI"
  description="Enter a new development experience"
  content="Sleek, easy to use components to build your next app faster."
  footer="Inspired by shadcn/ui"
/>
⌘I