Card

Layout

Surface container with CardHeader, CardContent, CardFooter, CardMedia sub-components, spring press animation, accent stripe, built-in skeleton, and 4 variants.

GitHub

Installation

bash

npx native-mate add card

component deps: skeleton

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Card, CardHeader, CardContent, CardFooter } from '~/components/ui/card'
import { Button } from '~/components/ui/button'
import { Text } from '@native-mate/core'

// Structured card with sub-components
<Card>
  <CardHeader title="Invitation" subtitle="You've been invited to Acme Corp" />
  <CardContent>
    <Text>Accept the invitation to start collaborating with your team.</Text>
  </CardContent>
  <CardFooter separated>
    <Button variant="outline" style={{ flex: 1 }}>Decline</Button>
    <Button style={{ flex: 1 }}>Accept</Button>
  </CardFooter>
</Card>

// Pressable card
<Card onPress={() => router.push('/detail')}>
  <CardHeader title="Settings" subtitle="Manage your account" trailing={<ChevronRight />} />
</Card>

// Loading skeleton
<Card loading />

// Cover image
<Card image={{ uri: 'https://...' }} imageHeight={200}>
  <CardHeader title="Mountain Retreat" subtitle="3 nights · $240" />
</Card>

Props

Prop	Type	Default	Description
variant	"elevated" \| "outline" \| "flat" \| "ghost"	"elevated"	Card surface style.
loading	boolean	false	Replaces children with an animated skeleton placeholder.
onPress	() => void	—	Makes the card pressable with a spring scale animation.
activeScale	number	0.97	Scale factor on press.
disabled	boolean	false	Reduces opacity and disables press.
accent	string	—	Color of a left-side accent stripe (e.g. status indicators).

Example

tsx

import { useState } from 'react'
import { Card, CardHeader, CardContent, CardFooter } from '~/components/ui/card'
import { Button } from '~/components/ui/button'
import { View } from 'react-native'
import { Text } from '@native-mate/core'

export function CardExample() {
  const [loading, setLoading] = useState(true)

  return (
    <View style={{ gap: 16, padding: 16 }}>
      {/* Loading state */}
      <Card loading={loading} />

      {/* Structured card */}
      <Card variant="outline">
        <CardHeader
          title="Workspace plan"
          subtitle="Up to 10 team members"
          trailing={<Button size="sm" variant="ghost">Edit</Button>}
        />
        <CardContent>
          <Text muted>Your workspace is on the Pro plan. Renews on March 1, 2026.</Text>
        </CardContent>
        <CardFooter separated>
          <Button variant="ghost" style={{ flex: 1 }}>Cancel plan</Button>
          <Button style={{ flex: 1 }}>Upgrade</Button>
        </CardFooter>
      </Card>

      <Button variant="outline" onPress={() => setLoading(l => !l)}>
        Toggle loading
      </Button>
    </View>
  )
}

Button

Input