Card

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

Light mode

Dark mode

Light mode

Dark mode

<View className="flex gap-2">
  <Text className="font-semibold text-xl text-primary">Card</Text>
  <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>
</View>

Installation

CLI

npx nativecn-ui add Card

npx nativecn-ui add Card

1. First Step

   Include Card.tsx in your project.

2. Second Step

   Update the import paths to match your project setup.

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"
/>