GitHub
Copy-pasteStyledTailwind

Card

Sizable, themeable cards with a flexible API

Card composes headers, footers, backgrounds, and content into a sizable, theme-aware container.

Features

  • Size prop shared with Card children

  • Backgrounds and borders from the surrounding theme

  • Background component with built-in positioning

Installation

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

yarn add @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 YStack, adding:

Props

  • size

    'xs' | 'sm' | 'md' | 'lg' | 'xl'

    Drives the frame's border radius and the Header/Footer padding, and is published to the parts through context.

  • unstyled

    boolean

    Removes all default Tamagui styles.

    • Card.Header

    Extends YStack, adding:

    Props

  • unstyled

    boolean

    Removes all default Tamagui styles.

    • Card.Footer

    Extends YStack, adding:

    Props

  • unstyled

    boolean

    Removes all default Tamagui styles.

    • Card.Background

    Extends YStack, set to position="absolute" and inset={0} with zIndex below Header/Footer.

    Props

  • unstyled

    boolean

    Removes all default Tamagui styles.

    • Previous

    Avatar

    Next

    Image

    Edit this page on GitHub.