Visualización de datos

Card

Apto para servidor

A surface that groups related content.

Vista previa en vivo

Renderizado desde el código fuente instalado de VEXA — los mismos archivos que recibes.

Usage this month

Across all workspaces.

24,910

Instalación

Añade el código del componente a tu proyecto. Las dependencias del registry se resuelven automáticamente.

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

Se instala en components/vexa/card.tsx

Dependencias npm

Sin dependencias npm externas.

Dependencias del registry

@vexa/utils

Otros items de VEXA que necesita este componente. Instálalos primero — la CLI los resuelve automáticamente.

Código

Cópialo a su ruta destino, o instálalo con el comando de arriba.

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}
    />
  );
}

JSON del registryr/card.json

r/card.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "A surface that groups related content.",
  "registryDependencies": [
    "@vexa/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/card.tsx",
      "type": "registry:ui",
      "target": "components/vexa/card.tsx",
      "content": "import type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Card — a surface that groups related content.\n *\n * RSC-safe. Composed from parts (`CardHeader`, `CardTitle`,\n * `CardDescription`, `CardContent`, `CardFooter`) so structure stays explicit.\n * Elevation favors border + surface contrast over heavy shadows (§10.7).\n */\nexport function Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col rounded-vexa-lg border border-vexa-border bg-vexa-surface-raised text-vexa-foreground shadow-vexa-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CardHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\"flex flex-col gap-1.5 p-6\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardTitle({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-lg leading-none font-semibold tracking-tight\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CardDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-vexa-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"p-6 pt-0\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center gap-2 p-6 pt-0\", className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "meta": {
    "frameworks": [
      "react",
      "next"
    ],
    "rsc": "server-safe",
    "exports": [
      "Card",
      "CardHeader",
      "CardTitle",
      "CardDescription",
      "CardContent",
      "CardFooter"
    ],
    "cssVars": [
      "--vexa-surface-raised",
      "--vexa-border",
      "--vexa-foreground",
      "--vexa-muted-foreground"
    ],
    "a11y": "CardTitle renders an <h3>; adjust the heading level to fit the page outline.",
    "example": "<Card><CardHeader><CardTitle>Summary</CardTitle></CardHeader><CardContent>...</CardContent></Card>",
    "tests": "planned — see docs/README.md#roadmap"
  }
}

Detalles

Accesibilidad

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