Card

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

Android

Recommended version:

~55.0.17

Expo UI Card matches the official Jetpack Compose Card API and displays content inside a styled surface container with optional elevation and outline.

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, 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)]}>Default card</Text>
        </Card>
        <ElevatedCard>
          <Text modifiers={[paddingAll(16)]}>Elevated card</Text>
        </ElevatedCard>
        <OutlinedCard>
          <Text modifiers={[paddingAll(16)]}>Outlined card</Text>
        </OutlinedCard>
      </Column>
    </Host>
  );
}

API

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

No API data file found, sorry!