Content containers with media, title, meta and actions in elevated, outline and filled styles.
npx shadcn@latest add @lokalhost/cardsThe source is copied to components/ui/card.tsx — it’s yours to edit.
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
<Card
variant="elevated"
title="Lake Bled, Slovenia"
subtitle="4 nights · from $420"
media={
<Image
source={{ uri: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800" }}
style={{ height: 160 }}
accessibilityIgnoresInvertColors
/>
}
footer={
<>
<Button size="sm" style={{ flex: 1 }}>Book</Button>
<Button size="sm" variant="outline">Save</Button>
</>
}
/>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | — | Card heading. |
subtitle | string | undefined | Muted line under the title. |
media | React.ReactNode | undefined | Rendered edge-to-edge above the content (e.g. an Image). |
footer | React.ReactNode | undefined | Actions row at the bottom. |
variant | "elevated" | "outline" | "filled" | "outline" | Surface treatment. |
onPress | () => void | undefined | Makes the whole card pressable. |
children | React.ReactNode | undefined | Body content between header and footer. |