GitHub
Copy-pasteStyled

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

// copy-paste: these skins import from files you own. copy each registry item

// below into your app, then adjust the relative import paths to fit.

//   components/tamagui/Card.tsx (registry item "card")

// npm dependencies: @tamagui/card @tamagui/core

import { Card } from "../components/tamagui/Card"; // 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.

    • Source

    v2-look Card: theme background over the unstyled @tamagui/ui Card behavior (structural layout + the size mechanism for size-derived radius and Header/Footer padding). Statics: Card.Header, Card.Footer, Card.Background. This is the exact source the registry ships — copy it into your app and the examples above import from your copy.

    components/tamagui/Card.tsx
    // Styled Card = the unstyled @tamagui/ui Card behavior (structural layout) +
// the default v2-look skin (theme background) and the size table: size-derived
// radius on the frame, size-derived padding on Header/Footer. Single skin
// definition; the shadcn registry item is generated from this file.
import {
  CardBackground,
  CardFooter as CardFooterBehavior,
  CardFrame as UiCardFrame,
  CardHeader as CardHeaderBehavior,
} from '@tamagui/card'
import {
  type ComponentSize,
  createStyledContext,
  type GetProps,
  styled,
  withStaticProperties,
} from '@tamagui/core'

export type CardSize = ComponentSize | boolean

const CardContext = createStyledContext<{ size?: CardSize }>({ size: 'md' })

const cardRadius = {
  xs: { borderRadius: 'sm' },
  sm: { borderRadius: 'md' },
  md: { borderRadius: 'md' },
  lg: { borderRadius: 'md' },
  xl: { borderRadius: 'lg' },
} as const

const cardPadding = {
  xs: { padding: '2' },
  sm: { padding: '3' },
  md: { padding: '4' },
  lg: { padding: '6' },
  xl: { padding: '8' },
} as const

export const CardFrame = styled(UiCardFrame, {
  displayName: 'Card',
  context: CardContext,
  backgroundColor: 'background',
  variants: {
    size: {
      ...cardRadius,
      true: cardRadius.md,
    },
  } as const,
  defaultVariants: {
    size: 'md',
  },
})

export const CardHeader = styled(CardHeaderBehavior, {
  displayName: 'CardHeader',
  context: CardContext,
  variants: {
    size: {
      ...cardPadding,
      true: cardPadding.md,
    },
  } as const,
  defaultVariants: {
    size: 'md',
  },
})

export const CardFooter = styled(CardFooterBehavior, {
  displayName: 'CardFooter',
  context: CardContext,
  variants: {
    size: {
      ...cardPadding,
      true: cardPadding.md,
    },
  } as const,
  defaultVariants: {
    size: 'md',
  },
})

export const Card = withStaticProperties(CardFrame, {
  Header: CardHeader,
  Footer: CardFooter,
  Background: CardBackground,
})

export type CardProps = GetProps<typeof CardFrame>

    Dependencies

    yarn add @tamagui/card @tamagui/core

    Expects theme tokens: background.

    Need raw behavior without any skin? tamagui/unstyled re-exports the @tamagui/ui primitives (advanced).

    Previous

    Avatar

    Next

    Image

    Edit this page on GitHub.