components/card.tsx

Generic card wrapper for displaying content with header, footer, and actions.

// Source: https://github.com/supermemoryai/supermemory | License: MIT | Copyright 2025 supermemory
// Provided via justclaw.it.com; keep this notice with the code.
import { cn } from "@lib/utils"
import type * as React from "react"

function Card({ className, ...props }: React.ComponentProps<"div">) {
	return (
		<div
			className={cn(
				"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
				className,
			)}
			data-slot="card"
			{...props}
		/>
	)
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
	return (
		<div
			className={cn(
				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
				className,
			)}
			data-slot="card-header"
			{...pro

... (truncated -- full source via MCP)