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:

npm install @tamagui/card

Anatomy

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

export default () => (
  <Card>
    <Card.Header />
    <Card.Footer />
    <Card.Background />
  </Card>
)

API Reference

Card

Frame of the card, extends ThemeableStack props, 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, adding:

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

Card.Footer

Extends ThemeableStack, adding:

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

Card.Background

Extends YStack, set to fullscreen and zIndex below Header/Footer.

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