Card component with header, content, and footer sections for organizing dashboard content.

Card

The Card component provides a container with rounded corners, shadow, and structured sections for displaying grouped content on dashboard screens.

Basic Usage

import { Card } from "@/components/ui/Card";

export default function DashboardScreen() {
  return (
    <Card>
      <Card.Header title="Revenue" subtitle="Last 30 days" />
      <Card.Content>
        <Text style={{ fontSize: 32, fontWeight: "700" }}>$12,450</Text>
      </Card.Content>
    </Card>
  );
}

Card Sections

Cards are composed of three optional sections:

<Card>
  <Card.Header title="Team Members" subtitle="3 active" />
  <Card.Content>
    <UserList users={users} />
  </Card.Content>
  <Card.Footer>
    <Button title="Invite" size="sm" onPress={handleInvite} />
  </Card.Footer>
</Card>

Section	Purpose
`Card.Header`	Title, subtitle, optional right action
`Card.Content`	Main body content
`Card.Footer`	Actions, links, secondary info

Header with Action

Add a right-side action to the header:

<Card.Header
  title="Notifications"
  subtitle="5 unread"
  right={
    <TouchableOpacity onPress={markAllRead}>
      <Text style={{ color: "#3B82F6" }}>Mark all read</Text>
    </TouchableOpacity>
  }
/>

Card Variants

// Default card with shadow
<Card variant="elevated">
  <Card.Content><Text>Elevated card</Text></Card.Content>
</Card>

// Flat card with border
<Card variant="outlined">
  <Card.Content><Text>Outlined card</Text></Card.Content>
</Card>

// No border or shadow
<Card variant="flat">
  <Card.Content><Text>Flat card</Text></Card.Content>
</Card>

Pressable Card

Make the entire card tappable:

<Card pressable onPress={() => router.push("/details")}>
  <Card.Content>
    <Text>Tap to view details</Text>
  </Card.Content>
</Card>

Pressable cards include a subtle opacity animation on press for tactile feedback.

Dashboard Grid

Use cards in a grid layout for dashboard views:

import { View, StyleSheet } from "react-native";

export default function Dashboard() {
  return (
    <View style={styles.grid}>
      <Card style={styles.half}>
        <Card.Header title="Users" />
        <Card.Content>
          <Text style={styles.metric}>1,234</Text>
        </Card.Content>
      </Card>
      <Card style={styles.half}>
        <Card.Header title="Revenue" />
        <Card.Content>
          <Text style={styles.metric}>$5,678</Text>
        </Card.Content>
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  grid: { flexDirection: "row", gap: 12 },
  half: { flex: 1 },
  metric: { fontSize: 28, fontWeight: "700" },
});

Customization

Override the card container style:

<Card style={{ backgroundColor: "#F0F9FF", borderColor: "#3B82F6" }}>
  <Card.Content>
    <Text>Custom styled card</Text>
  </Card.Content>
</Card>

Component Props

Prop	Type	Default	Description
`variant`	`"elevated" \| "outlined" \| "flat"`	`"elevated"`	Visual variant
`pressable`	`boolean`	`false`	Make card tappable
`onPress`	`() => void`	—	Press handler
`style`	`ViewStyle`	—	Container style override
`children`	`ReactNode`	—	Card sections

Card

On this page