Card

Stable

Surface container with semantic slots for header, body, and footer.

Installation

npm install @xaui/native

Import

import { Card, CardHeader, CardBody, CardFooter, CardTitle, CardDescription } from '@xaui/native/card'

Basic Usage

Minimal example showing the component with its default configuration.

import { Card } from '@xaui/native/card'

export function Example() {
  return (
    <Card>
      {/* children */}
    </Card>
  )
}

Full Card Layout

Using CardHeader, CardTitle, CardDescription, CardBody, and CardFooter.

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardBody,
  CardFooter,
} from '@xaui/native/card'
import { Button } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'

export function FullCardExample() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Notification</CardTitle>
        <CardDescription>You have 3 unread messages</CardDescription>
      </CardHeader>
      <CardBody>
        <Typography>Open your inbox to see the latest updates from your team.</Typography>
      </CardBody>
      <CardFooter>
        <Button variant="flat" size="sm">Dismiss</Button>
        <Button size="sm">View inbox</Button>
      </CardFooter>
    </Card>
  )
}

Header with Title & Description Only

CardTitle and CardDescription inside CardHeader for structured headings.

import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@xaui/native/card'
import { Typography } from '@xaui/native/typography'

export function HeaderExample() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Project Alpha</CardTitle>
        <CardDescription>Last updated 2 hours ago</CardDescription>
      </CardHeader>
      <CardBody>
        <Typography>Progress: 74% complete</Typography>
      </CardBody>
    </Card>
  )
}

Pressable Card

Make the entire card tappable.

import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@xaui/native/card'
import { Typography } from '@xaui/native/typography'

export function PressableCardExample() {
  return (
    <Card isPressable onPress={() => {}}>
      <CardHeader>
        <CardTitle>Open details</CardTitle>
        <CardDescription>Tap anywhere on the card</CardDescription>
      </CardHeader>
      <CardBody>
        <Typography>More information about this item.</Typography>
      </CardBody>
    </Card>
  )
}

Elevated Card

Add a shadow with the elevation prop.

import { Card, CardHeader, CardTitle, CardBody } from '@xaui/native/card'
import { Typography } from '@xaui/native/typography'

export function ElevatedCardExample() {
  return (
    <Card elevation={3}>
      <CardHeader>
        <CardTitle>Elevated</CardTitle>
      </CardHeader>
      <CardBody>
        <Typography>This card casts a shadow.</Typography>
      </CardBody>
    </Card>
  )
}