Components

Card

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

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
NextCheckbox