Skip to main content

Card

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

Import​

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

Basic Usage​

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

With Header​

<Card>
  <CardHeader>
    <Heading fontSize="lg">Card Title</Heading>
  </CardHeader>
  <CardBody>
    Card content goes here.
  </CardBody>
</Card>
<Card>
  <CardHeader>
    <Heading fontSize="lg">Confirm Action</Heading>
  </CardHeader>
  <CardBody>
    Are you sure you want to proceed with this action?
  </CardBody>
  <CardFooter>
    <HStack justify="flex-end" gap={2}>
      <Button variant="ghost">Cancel</Button>
      <Button>Confirm</Button>
    </HStack>
  </CardFooter>
</Card>

Shadow Variants​

<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="flex-start">
      <Badge colorScheme="success">In Stock</Badge>
      <Heading fontSize="lg">Product Name</Heading>
      <Text color="foreground-muted">Short product description</Text>
      <Text fontWeight="bold" fontSize="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 fontSize="lg">John Doe</Heading>
        <Text color="foreground-muted">Software Engineer</Text>
      </VStack>
      <HStack gap={8}>
        <VStack gap={0}>
          <Text fontWeight="bold">124</Text>
          <Text fontSize="sm" color="foreground-muted">Posts</Text>
        </VStack>
        <VStack gap={0}>
          <Text fontWeight="bold">5.2k</Text>
          <Text fontSize="sm" color="foreground-muted">Followers</Text>
        </VStack>
      </HStack>
    </VStack>
  </CardBody>
  <CardFooter>
    <Button fullWidth variant="outline">Follow</Button>
  </CardFooter>
</Card>

Settings Card​

<Card>
  <CardHeader>
    <Heading fontSize="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​

PropTypeDefaultDescription
shadow"none" | "sm" | "md" | "lg""sm"Shadow elevation

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";