Card

A versatile container for grouping related content with multiple visual variants and optional press interaction.

Import

tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@tac-ui/native';

Playground

Interactively configure the Card props below.

Card Title

A summary of your current project status.

Variant

Interactive

tsx

<Card variant="default">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>A summary of your current project status.</CardDescription>
  </CardHeader>
  <CardContent>Track progress, manage tasks, and collaborate with your team.</CardContent>
</Card>

Default

The default card variant uses a bordered surface with a subtle shadow, composed with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter sub-components.

Project Overview

A summary of your current project status.

tsx

<Card>
  <CardHeader>
    <CardTitle>Project Overview</CardTitle>
    <CardDescription>A summary of your current project status.</CardDescription>
  </CardHeader>
  <CardContent>Track progress, manage tasks, and collaborate with your team.</CardContent>
  <CardFooter>
    <Button variant="outline" size="sm">Details</Button>
  </CardFooter>
</Card>

Variants

Three visual styles are available: default (bordered surface with shadow), accent (colored border), and flat (no border or shadow).

Default

The default card variant.

Accent

The accent card variant.

Flat

The flat card variant.

tsx

<Card variant="default">
  <CardHeader>
    <CardTitle>Default</CardTitle>
    <CardDescription>The default card variant.</CardDescription>
  </CardHeader>
</Card>
<Card variant="accent">
  <CardHeader>
    <CardTitle>Accent</CardTitle>
    <CardDescription>The accent card variant.</CardDescription>
  </CardHeader>
</Card>
<Card variant="flat">
  <CardHeader>
    <CardTitle>Flat</CardTitle>
    <CardDescription>The flat card variant.</CardDescription>
  </CardHeader>
</Card>

Interactive

Setting interactive enables a press scale animation, making the card behave like a tappable element.

Clickable Card

Tap to see the press effect.

tsx

<Card interactive onPress={() => console.log('card pressed')}>
  <CardHeader>
    <CardTitle>Clickable Card</CardTitle>
    <CardDescription>Tap to see the press effect.</CardDescription>
  </CardHeader>
</Card>

API Reference

Prop	Type	Default	Description
variant	"default" \| "accent" \| "flat"	"default"	Visual style of the card.
interactive	boolean	false	Enables press scale animation. Automatically enabled when onPress is provided.
onPress	() => void	-	Press handler. Implicitly enables interactive mode when set.
children	React.ReactNode	-	Card content — typically CardHeader, CardContent, and CardFooter sub-components.
style	ViewStyle	-	Additional React Native style applied to the card container.

Sub-component API Reference

Prop	Type	Default	Description
CardHeader	ViewProps	-	Vertical container with a small gap for CardTitle and CardDescription.
CardTitle	ViewProps & { children }	-	Renders a semibold title. Strings are auto-wrapped in a Text component.
CardDescription	ViewProps & { children }	-	Renders muted descriptive text below the title.
CardContent	ViewProps	-	Unstyled container for the main card body content.
CardFooter	ViewProps	-	Horizontal row container for action buttons and footer elements.