Card

Composable card container with header, body, footer, title, and description sub-components — perfect for grouping related content.

Preview

Basic card

import { Card, CardBody } from '@/registry/ui-kit/tailwind-card/react'

function Example() {
  return (
    <Card>
      <CardBody>
        <p>This is a basic card with some content inside.</p>
      </CardBody>
    </Card>
  )
}

Card with header and footer

import { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter } from '@/registry/ui-kit/tailwind-card/react'

function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Project settings</CardTitle>
        <CardDescription>Manage your project configuration and preferences.</CardDescription>
      </CardHeader>
      <CardBody>
        <p>Card body content goes here.</p>
      </CardBody>
      <CardFooter>
        <button className="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white">Save</button>
      </CardFooter>
    </Card>
  )
}

Component API

Prop	Default	Description
`Card`	`—`	Root container with rounded border, shadow, and background.
`CardHeader`	`—`	Top section with a bottom border separator.
`CardTitle`	`—`	Semibold heading inside the card header.
`CardDescription`	`—`	Muted description text below the title.
`CardBody`	`—`	Main content area with padding.
`CardFooter`	`—`	Bottom section with a top border separator.

Source Code

"use client";

import { forwardRef } from "react";

/* ── Card ── */

const Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className = "", children, ...props }, ref) => (
    <div
      ref={ref}
      className={`rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900 ${className}`}
      {...props}
    >
      {children}
    </div>
  )
);
Card.displayName = "Card";

/* ── CardHeader ── */

const CardHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className = "", children, ...props }, ref) => (
    <div
      ref={ref}
      className={`border-b border-zinc-100 px-6 py-4 dark:border-zinc-800 ${className}`}
      {...props}
    >
      {children}
    </div>
  )
);
CardHeader.displayName = "CardHeader";

/* ── CardTitle ── */

const CardTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className = "", children, ...props }, ref) => (
    <h3
      ref={ref}
      className={`text-base font-semibold text-zinc-900 dark:text-zinc-100 ${className}`}
      {...props}
    >
      {children}
    </h3>
  )
);
CardTitle.displayName = "CardTitle";

/* ── CardDescription ── */

const CardDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className = "", children, ...props }, ref) => (
    <p
      ref={ref}
      className={`mt-1 text-sm text-zinc-500 dark:text-zinc-400 ${className}`}
      {...props}
    >
      {children}
    </p>
  )
);
CardDescription.displayName = "CardDescription";

/* ── CardBody ── */

const CardBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className = "", children, ...props }, ref) => (
    <div
      ref={ref}
      className={`px-6 py-4 ${className}`}
      {...props}
    >
      {children}
    </div>
  )
);
CardBody.displayName = "CardBody";

/* ── CardFooter ── */

const CardFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className = "", children, ...props }, ref) => (
    <div
      ref={ref}
      className={`border-t border-zinc-100 px-6 py-4 dark:border-zinc-800 ${className}`}
      {...props}
    >
      {children}
    </div>
  )
);
CardFooter.displayName = "CardFooter";

export { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter };
export default Card;