// card

Card

A glass panel with the usual card anatomy.

Refraction, shipped

Displacement maps, not blur stacks.

The rim bends whatever drifts behind this panel.

// install

npx shadcn add @vsrc/card

Props

Only the vsrc surface is documented here. Everything else passes through to the underlying element.

// Card

prop	type	default	notes
glass	"subtle" \| "regular" \| "heavy" \| LiquidGlassOptions \| false	—	Optics override for the panel. A preset name replaces the tuned values, an object merges over them, `false` disables refraction entirely.

Optics

Forwards `glass` straight to GlassSurface — engine defaults. Large static panels are where full-strength refraction reads best.

Accessibility

Structural divs only — CardTitle is styled text, not a heading; nest your own h-level to fit the page outline.
Interior content sits on the pane, not in nested glass, so contrast stays token-driven.

Source

The exact file the CLI copies into your project — you own it after install.

// registry/vsrc/ui/card.tsx

"use client";

import * as React from "react";
import type { GlassPreset, LiquidGlassOptions } from "vsrc/react";

import { GlassSurface } from "@/registry/vsrc/ui/glass-surface";
import { cn } from "@/lib/utils";

function Card({
  className,
  glass,
  ...props
}: React.ComponentProps<"div"> & { glass?: LiquidGlassOptions | GlassPreset | false }) {
  return (
    <GlassSurface
      data-slot="card"
      glass={glass}
      className={cn("flex flex-col gap-6 py-6 text-card-foreground", className)}
      {...props}
    />
  );
}

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

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="card-title" className={cn("font-display text-2xl leading-tight", className)} {...props} />;
}

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

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

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

export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };