Card

A Jetpack Compose Card component for displaying content in a styled container.

Android

Included in Expo Go

Recommended version:

~56.0.26

Expo UI Card matches the official Jetpack Compose Card API and displays content inside a styled surface container with optional elevation and outline. The Card component renders a filled card, while ElevatedCard and OutlinedCard provide raised and bordered variants respectively.

Filled, elevated, and outlined Material 3 cards

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic card

BasicCardExample.tsx

import { Host, Card, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function BasicCardExample() {
  return (
    <Host matchContents>
      <Card>
        <Text modifiers={[paddingAll(16)]}>This is a basic card with default styling.</Text>
      </Card>
    </Host>
  );
}

Card types

Use Card (filled), ElevatedCard, or OutlinedCard for different styles.

CardTypesExample.tsx

import { Host, Card, ElevatedCard, OutlinedCard, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function CardTypesExample() {
  return (
    <Host matchContents>
      <Column verticalArrangement={{ spacedBy: 12 }}>
        <Card>
          <Text modifiers={[paddingAll(16)]}>Filled card</Text>
        </Card>
        <ElevatedCard>
          <Text modifiers={[paddingAll(16)]}>Elevated card</Text>
        </ElevatedCard>
        <OutlinedCard>
          <Text modifiers={[paddingAll(16)]}>Outlined card</Text>
        </OutlinedCard>
      </Column>
    </Host>
  );
}

Custom elevation

Use the elevation prop (in dp) to control shadow depth. Elevation is most meaningful on ElevatedCard, which uses shadow elevation. Filled Card uses tonal elevation by default, so changes may be subtle.

ElevatedCardExample.tsx

import { Host, ElevatedCard, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function ElevatedCardExample() {
  return (
    <Host matchContents>
      <ElevatedCard elevation={8}>
        <Text modifiers={[paddingAll(16)]}>Card with 8dp elevation</Text>
      </ElevatedCard>
    </Host>
  );
}

Custom border

Card and OutlinedCard accept a border prop to customize stroke width and color.

OutlinedCardExample.tsx

import { Host, OutlinedCard, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function OutlinedCardExample() {
  return (
    <Host matchContents>
      <OutlinedCard border={{ width: 2, color: '#6200EE' }}>
        <Text modifiers={[paddingAll(16)]}>Card with custom purple border</Text>
      </OutlinedCard>
    </Host>
  );
}

API

import { Card, ElevatedCard, OutlinedCard } from '@expo/ui/jetpack-compose';

No API data file found, sorry!