Card
Container with header, content, and footer sections. Install Card from the VLLNT UI registry with the shadcn CLI.
Container with header, content, and footer sections. Part of the content family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Card to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/card.jsonSource
import * as React from "react";
import { cn } from "../../lib/utils";
const Card = ({
className,
ref: reference,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref?: React.Ref<HTMLDivElement>;
}) => (
<div
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
className,
)}
ref={reference}
{...props}
/>
);
Card.displayName = "Card";
const CardHeader = ({
className,
ref: reference,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref?: React.Ref<HTMLDivElement>;
}) => (
<div
className={cn("flex flex-col space-y-1.5 p-6", className)}
ref={reference}
{...props}
/>
);
CardHeader.displayName = "CardHeader";
const CardTitle = ({
className,
ref: reference,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref?: React.Ref<HTMLDivElement>;
}) => (
<div
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className,
)}
ref={reference}
{...props}
/>
);
CardTitle.displayName = "CardTitle";
const CardDescription = ({
className,
ref: reference,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref?: React.Ref<HTMLDivElement>;
}) => (
<div
className={cn("text-sm text-muted-foreground", className)}
ref={reference}
{...props}
/>
);
CardDescription.displayName = "CardDescription";
const CardContent = ({
className,
ref: reference,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref?: React.Ref<HTMLDivElement>;
}) => <div className={cn("p-6 pt-0", className)} ref={reference} {...props} />;
CardContent.displayName = "CardContent";
const CardFooter = ({
className,
ref: reference,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref?: React.Ref<HTMLDivElement>;
}) => (
<div
className={cn("flex items-center p-6 pt-0", className)}
ref={reference}
{...props}
/>
);
CardFooter.displayName = "CardFooter";
export {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
};
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.