Data display

Card

Server-safe

A surface that groups related content.

Live preview

Rendered from the installed VEXA source — the same files you receive.

Usage this month

Across all workspaces.

24,910

Installation

Adds the component source to your project. Registry dependencies are pulled in automatically.

npx shadcn@latest add https://vexa.valfiguer.com/r/card.json

Installs to components/vexa/card.tsx

npm dependencies

No external npm dependencies.

Registry dependencies

@vexa/utils

Other VEXA items this component needs. Install them first — they are resolved automatically by the CLI.

Source

Copy this into its target path, or install it with the command above.

components/vexa/card.tsx

import type * as React from "react";

import { cn } from "@/lib/utils";

/**
 * Card — a surface that groups related content.
 *
 * RSC-safe. Composed from parts (`CardHeader`, `CardTitle`,
 * `CardDescription`, `CardContent`, `CardFooter`) so structure stays explicit.
 * Elevation favors border + surface contrast over heavy shadows (§10.7).
 */
export function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card"
      className={cn(
        "flex flex-col rounded-vexa-lg border border-vexa-border bg-vexa-surface-raised text-vexa-foreground shadow-vexa-sm",
        className,
      )}
      {...props}
    />
  );
}

export function CardHeader({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn("flex flex-col gap-1.5 p-6", className)}
      {...props}
    />
  );
}

export function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
  return (
    <h3
      data-slot="card-title"
      className={cn(
        "text-lg leading-none font-semibold tracking-tight",
        className,
      )}
      {...props}
    />
  );
}

export function CardDescription({
  className,
  ...props
}: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="card-description"
      className={cn("text-sm text-vexa-muted-foreground", className)}
      {...props}
    />
  );
}

export function CardContent({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("p-6 pt-0", className)}
      {...props}
    />
  );
}

export function CardFooter({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("flex items-center gap-2 p-6 pt-0", className)}
      {...props}
    />
  );
}

Details

Example

tsx

<Card><CardHeader><CardTitle>Summary</CardTitle></CardHeader><CardContent>...</CardContent></Card>

Accessibility

CardTitle renders an <h3>; adjust the heading level to fit the page outline.