tetra-ui
uicardsource: ok · hit
Card
Displays a card with a header, content, and footer.
npx shadcn add "https://tetra-ui.com/r/card.json"free
Where it goes
navbarfooter
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Files1 · source cached 10/9/2026, 9:30:22 PM
ui/card.tsx
import { Text, View } from "react-native";
import { cn } from "@/lib/utils";
// Components
export const Card = ({
className,
...props
}: React.ComponentProps<typeof View>) => {
return (
<View
className={cn(
"flex flex-col gap-6 rounded-2xl bg-card py-5 text-card-foreground",
className
)}
data-slot="card"
{...props}
/>
);
};
export const CardHeader = ({
className,
...props
}: React.ComponentProps<typeof View>) => {
return (
<View
className={cn("flex items-start gap-1 px-4", className)}
data-slot="card-header"
{...props}
/>
);
};
export const CardTitle = ({
className,
...props
}: React.ComponentProps<typeof Text>) => {
return (
<Text
className={cn(
"font-semibold text-foreground text-xl leading-none",
className
)}
data-slot="card-title"
{...props}
/>
);
};
export const CardDescription = ({
className,
...props
}: React.ComponentProps<typeof Text>) => {
return (
<Text
className={cn("text-muted-foreground text-sm", className)}
data-slot="card-description"
{...props}
/>
);
};
export const CardContent = ({
className,
...props
}: React.ComponentProps<typeof View>) => {
return (
<View
className={cn("px-4", className)}
data-slot="card-content"
{...props}
/>
);
};
export const CardFooter = ({
className,
...props
}: React.ComponentProps<typeof View>) => {
return (
<View
className={cn("flex items-center px-4", className)}
data-slot="card-footer"
{...props}
/>
);
};