Card

Import#

Chakra UI exports 4 components to help you create a Card.

import { Card, CardHeader, CardBody, CardFooter } from '@chakra-ui/react'

• Card: The parent wrapper that provides context for its children.
• CardHeader: The wrapper that contains a card's header.
• CardBody: The wrapper that houses the card's main content.
• CardFooter: The footer that houses the card actions.

Usage#

Basic Card#

Put in some content in the CardBody to get a basic card.

Card with Divider#

There are instances when you have multiple content to display in the CardBody and you may want to add dividers between them.

Card with Image#

Place the content within the CardBody to get a nice padding around.

Horizontal Card#

The card component has display: flex by default. This means you make the content in a horizontal direction by passing direction="row".

Advanced Composition#

You can compose Card with other components like Avatar, Icon Button and more for a more advanced layout.

Multiple cards#

Render multiple cards to display content by using the SimpleGrid or your preferred layout method.

Centering content in a card#

Card comes with an inherent display="flex" on it, so if you'd like to center the content of your card, you can do this easily by passing align="center" to the Card.

Variants#

Chakra UI provides 4 card variants - elevated, outline, filled, and unstyled. Use the variant prop to change the style of your card. If the variant prop is not passed, the default variant, elevated is used.

Sizes#

Chakra UI provides 3 Card sizes. Use the size prop to change the size and set the value to sm, md, or lg.

Props#

The Card component gets its style from the default Chakra UI theme. However, in some scenarios, you might need to customize its theming to match your design requirements.

To customize the theme for Card, you would need to modify the base or default styles and modifier styles that alter its size or visual style. You would then need to apply specific styles to each part, size or variant of the Card.

Anatomy#

The Card component is a multipart component and consists of the following parts:

• A: container
• B: header
• C: body
• D: footer

Theming properties#

The properties that affect the theming of the Card component are:

• variant: The visual variant of the card. It defaults to elevated.
• size: The size of the card. It defaults to md.

Theming utilities#

Theming utilities are functions that are required to create the style configs and style objects during theming.

• createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle and defineMultiStyleConfig).
• definePartsStyle: a function used to create multipart style objects.
• defineMultiStyleConfig: a function used to define the style configuration for a multipart component.

Customizing the default theme#

Let's say we want to customize the default card theme by changing the styles of the container, header, body and footer. Here's what that will look like:

import { cardAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(cardAnatomy.keys)

const baseStyle = definePartsStyle({
  // define the part you're going to style
  container: {
    backgroundColor: '#e7e7e7',
  },
  header: {
    paddingBottom: '2px',
  },
  body: {
    paddingTop: '2px',
  },
  footer: {
    paddingTop: '2px',
  },
})

const sizes = {
  md: definePartsStyle({
    container: {
      borderRadius: '0px',
    },
  }),
}

export const cardTheme = defineMultiStyleConfig({ baseStyle, sizes })

After customizing the card theme, we then import it into our theme file and add it in the components property:

import { extendTheme } from '@chakra-ui/react'
import { cardTheme } from './components/Card'

const theme = extendTheme({
  components: {
    Card: cardTheme,
  },
})

export default theme

This is a crucial step to make sure that any changes we make to the card theme are applied.

Adding a custom size#

Card comes in sm, md and lg sizes but let's assume we want to include an extra large card size. Here's how we can do that:

import { cardAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(cardAnatomy.keys)

// define custom styles for xl size
const sizes = {
  xl: definePartsStyle({
    container: {
      borderRadius: "36px",
      padding: "40px"
    }
  })
};

// export sizes in the component theme
export const cardTheme = defineMultiStyleConfig({ sizes });

// now we can use the new `xl` size
<Card size="xl" ... />

Adding a custom variant#

You can add a custom variant to Card by specifying the name of your variant and giving specific styles to the necessary parts.

import { cardAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(cardAnatomy.keys)

// define custom styles for funky variant
  const variants = {
  funky: definePartsStyle({
    container: {
      borderColor: "red",
      borderWidth: "3px"
    }
  })
};

// export variants in the component theme
export const cardTheme = defineMultiStyleConfig({ variants });

// now we can use the new funky variant
<Card variant="funky" ... />

Changing the default properties#

To set the default size and variant of every card in our app, we define the defaultProps and set the default size and variant.

import { cardAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(cardAnatomy.keys)

// define which sizes and variants are applied by default
const defaultProps = {
  // in this example, we will set the default size and variant
  size: 'xl',
  variant: 'funky',
}

// export the default properties in the component theme
export const cardTheme = defineMultiStyleConfig({ defaultProps })

Every time you add anything new to the theme, you need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Showcase#

import {
  ChakraProvider,
  Box,
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Heading,
  Center,
} from '@chakra-ui/react';
import theme from './theme';
import { ColorModeSwitcher } from './ColorModeSwitcher';

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box position="relative" h="100vh" p={12}>
        <Center>
        <Card >
        <CardHeader>
          <Heading>Hike with me</Heading>
        </CardHeader>
        <CardBody>
          Hiking is a long, vigorous walk, usually on trails or footpaths in the
          countryside. Walking for pleasure developed in Europe during the
          eighteenth century.
        </CardBody>
        <CardFooter>
          <Button colorScheme="blue">Sign up</Button>
        </CardFooter>
      </Card>
        </Center>
        <ColorModeSwitcher aria-label="toggle theme" position="absolute" bottom={4} left={4} />
      </Box>
    </ChakraProvider>
  );
}