wwwwwwwwwwwwwwwwwww

Card

Sizable, themeable cards with a flexible API.

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 />
{/* any other components */}
<Card.Background />
</Card>
)

API Reference

Card

Frame of the card, extends ThemeableStack props, adding:

Props

  • size

    SizeTokens

    Passes size down too all sub-components when set for padding, arrow, borderRadius

  • unstyled

    boolean

    Removes all default Tamagui styles.

  • Card.Header

    Extends ThemeableStack, adding:

    Props

  • unstyled

    boolean

    Removes all default Tamagui styles.

  • Card.Footer

    Extends ThemeableStack, adding:

    Props

  • unstyled

    boolean

    Removes all default Tamagui styles.

  • Card.Background

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

    Props

  • unstyled

    boolean

    Removes all default Tamagui styles.

  • Previous

    Avatar

    Next

    Image