Card
A composed container for related content and actions.
- Chromium
- Firefox
- WebKit
- WCAG 2.2 AA
Preview
Card Title
Card Description
Card Content
Card Footer
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@moe-ui/registry/components/ui/card";
import { Text } from "@moe-ui/registry/components/ui/text";
export default function CardPreview() {
return (
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<Text>Card Content</Text>
</CardContent>
<CardFooter>
<Text>Card Footer</Text>
</CardFooter>
</Card>
);
}
One command, your source
Installation
pnpm dlx @moe-ui/cli@beta add cardUsage
The CLI installs editable source into your application. Import the component from your configured UI directory:
import { Card } from "@/components/ui/card";Variants and composition
Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.
Public API
The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.
Keyboard and accessibility
Semantic roles, disabled state, visible focus, and contrast are verified in the component browser matrix.
Browser support
This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.
Nothing hiddenCanonical source and public exports6 exports
CardCardContentCardDescriptionCardFooterCardHeaderCardTitle"use client";
import { Text, TextClassContext } from "./text";
import { cn } from "../../lib/utils";
import { View, type ViewProps } from "react-native";
function Card({ className, ...props }: ViewProps & React.RefAttributes<View>) {
return (
<TextClassContext.Provider value="text-card-foreground">
<View
className={cn(
"bg-card border-border flex flex-col gap-6 rounded-xl border py-6 shadow-sm shadow-black/5",
className,
)}
{...props}
/>
</TextClassContext.Provider>
);
}
function CardHeader({
className,
...props
}: ViewProps & React.RefAttributes<View>) {
return (
<View className={cn("flex flex-col gap-1.5 px-6", className)} {...props} />
);
}
function CardTitle({
className,
...props
}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
return (
<Text
role="heading"
aria-level={3}
className={cn("font-semibold leading-none", className)}
{...props}
/>
);
}
function CardDescription({
className,
...props
}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
return (
<Text
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
);
}
function CardContent({
className,
...props
}: ViewProps & React.RefAttributes<View>) {
return <View className={cn("px-6", className)} {...props} />;
}
function CardFooter({
className,
...props
}: ViewProps & React.RefAttributes<View>) {
return (
<View
className={cn("flex flex-row items-center px-6", className)}
{...props}
/>
);
}
export {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
};