wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Core

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

Compiler

About
Install
Benchmarks

Theme

Colors
Tokens

Tamagui

Stacks
Headings
Text

Forms

Button
Checkbox
Form
Input & TextArea
Label
Progress
RadioGroup
Select
Slider
Switch
ToggleGroup

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip
Toast

Organize

Accordion
Group
Tabs

Content

Avatar
Card
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Lucide Icons

Guides

Design Systems
Creating Custom Themes
How to Build a Button
Developing
Next.js
Expo
Vite
create-tamagui

Community

Community
Blog
GitHub
Twitter
Discord

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

    Edit this page on GitHub.