wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Compiler

About
Install
Benchmarks

Core

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

Theme

Colors
Tokens

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

Lucide Icons

Guides

Design Systems
Developing
Next.js
Expo
Vite
create-tamagui

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.