# Source: https://tamagui.dev/ui/card.md

---
title: Card
description: Sizable, themeable cards with a flexible API.
name: card
component: Card
package: card
demoName: Card
---

<HeroContainer>
  <CardDemo />
</HeroContainer>

```tsx hero template=Card

```

<Highlights
  features={[
    `Sizable with a size prop that passes to Card children.`,
    `Themeable helper props like elevate.`,
    `Background component that handles positioning.`,
  ]}
/>

## Installation

Card is already installed in `tamagui`, or you can install it independently:

```bash
npm install @tamagui/card
```

## Anatomy

```tsx
import { Card } from 'tamagui' // or '@tamagui/card'

export default () => (
  <Card>
    <Card.Header />
    <Card.Footer />
    {/* any other components */}
    <Card.Background />
  </Card>
)
```

## API Reference

### Card

Frame of the card, extends [ThemeableStack props](/docs/components/stacks#themeablestack), adding:

<PropsTable
  data={[
    {
      name: 'size',
      type: 'SizeTokens',
      required: false,
      description: `Passes size down to all sub-components when set for padding, arrow, borderRadius.`,
    },
    {
      name: 'unstyled',
      required: false,
      type: `boolean`,
      description: `Removes all default Tamagui styles.`,
    },
  ]}
/>

### Card.Header

Extends [ThemeableStack](/docs/components/stacks#themeablestack), adding:

<PropsTable
  data={[
    {
      name: 'unstyled',
      required: false,
      type: `boolean`,
      description: `Removes all default Tamagui styles.`,
    },
  ]}
/>

### Card.Footer

Extends [ThemeableStack](/docs/components/stacks#themeablestack), adding:

<PropsTable
  data={[
    {
      name: 'unstyled',
      required: false,
      type: `boolean`,
      description: `Removes all default Tamagui styles.`,
    },
  ]}
/>

### Card.Background

Extends [YStack](/docs/components/stacks), set to `fullscreen` and zIndex below Header/Footer.

<PropsTable
  data={[
    {
      name: 'unstyled',
      required: false,
      type: `boolean`,
      description: `Removes all default Tamagui styles.`,
    },
  ]}
/>