Card

A grouped-inset card with a hairline shadow.

SwiftUI: GroupBox

Screen Time

Daily average · 2h 46m

Your screen time was down 12% last week, for an average of 2 hours, 46 minutes a day.

Installation

npx shadcn@latest add https://cupertino-ui.baltoon.jp/r/card.json

Requires the theme tokens — see Installation if this is your first component.

Source

import * as React from "react";

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

/**
 * SwiftUI GroupBox / grouped-inset card. Sits on the grouped
 * background with the hairline card shadow.
 */
function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card"
      className={cn(
        "flex flex-col gap-4 rounded-[var(--radius-group)] bg-grouped-secondary p-5 text-label shadow-[var(--shadow-card)]",
        className
      )}
      {...props}
    />
  );
}

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

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

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

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

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

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