Card

Card is a flexible content container with optional header, body, and footer sections.

Open in Storybook

Import

import { Card, CardHeader, CardBody, CardFooter } from "@tosui/react";

Basic usage

Preview

Code

<Card>
  <CardBody>
    This is the card content.
  </CardBody>
</Card>

With header

Preview

Card Title

Card content goes here.

Code

<Card>
  <CardHeader>
    <Heading size="lg">Card Title</Heading>
  </CardHeader>
  <CardBody>
    Card content goes here.
  </CardBody>
</Card>

With footer

Preview

Confirm Action

Are you sure you want to proceed with this action?

Code

<Card>
  <CardHeader>
    <Heading size="lg">Confirm Action</Heading>
  </CardHeader>
  <CardBody>
    Are you sure you want to proceed with this action?
  </CardBody>
  <CardFooter>
    <HStack justify="end" gap={2}>
      <Button variant="ghost">Cancel</Button>
      <Button>Confirm</Button>
    </HStack>
  </CardFooter>
</Card>

Shadow variants

Preview

No shadow

Small shadow

Medium shadow

Large shadow

Code

<HStack gap={4} wrap>
  <Card shadow="none" w="200px">
    <CardBody>No shadow</CardBody>
  </Card>
  <Card shadow="sm" w="200px">
    <CardBody>Small shadow</CardBody>
  </Card>
  <Card shadow="md" w="200px">
    <CardBody>Medium shadow</CardBody>
  </Card>
  <Card shadow="lg" w="200px">
    <CardBody>Large shadow</CardBody>
  </Card>
</HStack>

Common patterns

Product card

<Card w="300px">
  <Image src="/product.jpg" alt="Product" h="200px" />
  <CardBody>
    <VStack gap={2} align="start">
      <Badge colorScheme="success">In Stock</Badge>
      <Heading size="lg">Product Name</Heading>
      <Text color="foreground-muted">Short product description</Text>
      <Text weight="bold" size="lg">$99.99</Text>
    </VStack>
  </CardBody>
  <CardFooter>
    <Button fullWidth>Add to Cart</Button>
  </CardFooter>
</Card>

Profile card

<Card>
  <CardBody>
    <VStack gap={4}>
      <Avatar size="xl" name="John Doe" />
      <VStack gap={1}>
        <Heading size="lg">John Doe</Heading>
        <Text color="foreground-muted">Software Engineer</Text>
      </VStack>
      <HStack gap={8}>
        <VStack gap={0}>
          <Text weight="bold">124</Text>
          <Text size="sm" color="foreground-muted">Posts</Text>
        </VStack>
        <VStack gap={0}>
          <Text weight="bold">5.2k</Text>
          <Text size="sm" color="foreground-muted">Followers</Text>
        </VStack>
      </HStack>
    </VStack>
  </CardBody>
  <CardFooter>
    <Button fullWidth variant="outline">Follow</Button>
  </CardFooter>
</Card>

Settings card

<Card>
  <CardHeader>
    <Heading size="md">Notification Settings</Heading>
  </CardHeader>
  <CardBody>
    <VStack gap={4} align="stretch">
      <HStack justify="space-between">
        <Text>Email notifications</Text>
        <Switch defaultChecked />
      </HStack>
      <HStack justify="space-between">
        <Text>Push notifications</Text>
        <Switch />
      </HStack>
    </VStack>
  </CardBody>
</Card>

Props reference

Card

Prop	Type	Default	Description
shadow	"none" | "sm" | "md" | "lg"	"sm"	Shadow elevation
className	string	-	Additional CSS class
children	ReactNode	-	Card sections or content

CardHeader, CardBody, CardFooter

These components accept className and children props only.

TypeScript

import { Card, CardHeader, CardBody, CardFooter, type CardProps, type CardHeaderProps, type CardBodyProps, type CardFooterProps } from "@tosui/react";