Homepage
IntroductionInstallationConfigurationThemesPropsBenchmarksReleases

Core

styledVariantsAnimationsStack & TextThemeuseMediauseTheme

Tamagui

StacksHeadingsParagraph

Forms

ButtonInput + TextareaLabelProgressSelectSliderSwitch

Panels

DialogPopoverTooltip

Content

AvatarCardGroupImageListItem

Visual

LinearGradientSeparatorSquare + Circle

Etc

AnchorHTML ElementsSpinnerUnspacedVisuallyHidden

Extras

DrawerFeather Icons

Guides

Design SystemsDevelopingNext.jsExpocreate-tamagui-app

Community

BlogGitHub
Twitter
Discord
Beta
Github

Card

Sizable, themeable cards with a flexible API.

Sony A7IV

Now available

Sony A7IV

Now available

Features

  • Sizable with a size prop that passes to Card children.

  • Themeable helper props like elevate.

  • Background component that handles positioning.

Anatomy

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



export default () => (

  <Card>

    <Card.Header />

    <Card.Footer />

    {/* any other components */}

    <Card.Background />

  </Card>

)

API

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

    • Card.Header

    Extends ThemeableStack.

    Card.Footer

    Extends ThemeableStack.

    Card.Background

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

    Previous

    Avatar

    Next

    Group

    Edit this page on GitHub.