wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Compiler

Intro
Install
Benchmarks

Core

Configuration
Themes
Props
styled
Variants
Animations
Stack & Text
Theme
useMedia
useTheme
FontLanguage
Extras

Tamagui

Stacks
Headings
Paragraph

Forms

Button
Text Inputs
Label
Progress
Select
Slider
Switch

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip

Content

Avatar
Card
Group
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Feather Icons

Guides

Design Systems
Developing
Next.js
Expo
Vite
create-tamagui-app

Community

Blog
GitHub
Twitter
Discord

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.