Components

Card

A flexible container component with support for headers, content, and footers.

Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.

Loading...

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

1

Install the component

Run the registry command below to add card to your project.

watermelon add card
2

Import the component

Import Card from your local UI registry output.

Import

import { Card } from "@/components/ui/card";

Import

Import

import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card";
import { Text } from "@/components/ui/text";

Usage

The Card component provides a structured layout with consistent padding and borders for grouping related information.

Basic Card

A standard card with header, content, and footer.

Loading...

API Reference

Card, CardHeader, CardContent, and CardFooter all extend the standard View props.

PreviousButton
NextCarousel