shadcn.io is not affiliated with official shadcn/ui

Shadcn Card for React

A surface for a single subject: header, media, body, and footer.

PreviewCode

Enter your email below to login to your account

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/card.json

npx shadcn@latest add https://kit.dev/r/base/card.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/card.json

yarn shadcn@latest add https://kit.dev/r/base/card.json

This component depends on Button. Install it first if you haven't already.

Install the following dependencies:

bun add tailwind-variants

npm install tailwind-variants

pnpm add tailwind-variants

yarn add tailwind-variants

Copy and paste the following code into your project.

components/ui/card.tsx

import type React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";

export const Card = (
  props: React.ComponentProps<"div"> & {
    size?: "default" | "sm";
  }
) => {
  const { className, size = "default", ...rest } = props;

  return (
    <div
      className={cn("cn-card group/card flex flex-col", className)}
      data-size={size}
      data-slot="card"
      {...rest}
    />

Update the import paths to match your project setup.

Usage

import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Login to your account</CardTitle>
    <CardDescription>
      Enter your email below to login to your account
    </CardDescription>
    <CardAction>
      <Button variant="link">Sign Up</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <form>
      <div className="flex flex-col gap-6">
        <Field className="gap-2">
          <FieldLabel>Email</FieldLabel>
          <Input placeholder="[email protected]" required type="email" />
        </Field>
        <Field className="gap-2">
          <div className="flex items-center">
            <FieldLabel>Password</FieldLabel>
            <a
              className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
              href="#"
            >
              Forgot your password?
            </a>
          </div>
          <Input required type="password" />
        </Field>
      </div>
    </form>
  </CardContent>
  <CardFooter className="flex-col gap-2">
    <Button className="w-full" type="submit">
      Login
    </Button>
    <Button className="w-full" variant="outline">
      Login with Google
    </Button>
  </CardFooter>
</Card>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Small

Use the size="sm" prop for a compact card with tighter spacing.

PreviewCode

Spacing

Override --card-spacing to control section gaps and insets.

PreviewCode

Edge To Edge

Use negative --card-spacing margins for edge-to-edge content above a footer.

PreviewCode

Image

Place an image before the header for a media card.

PreviewCode

Rtl

Right-to-left card. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Card

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"card"

data-size?string

CardMedia

PropType

variant?"default" | "icon" | "image"

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"card-media"

data-variant?string

CardHeader

PropType

description?string

title?string

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"card-header"

CardTitle

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"card-title"

CardDescription

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"card-description"

CardAction

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"card-action"

CardContent

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"card-content"

CardFooter

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"card-footer"