Card - Chakra Ui — ContextQMD

Usage

jsx

import { Card } from "@chakra-ui/react"

jsx

<Card.Root>
  <Card.Header />
  <Card.Body />
  <Card.Footer />
</Card.Root>

Examples

Variants

Use the variant prop to change the visual style of the Card.

Within Form

Use the Card component within a form to group related fields together.

Sizes

Use the size prop to change the size of the Card.

With Image

Use the Card component to display an image.

Horizontal

Use the Card component to display content horizontally.

With Avatar

Use the Card component to display an avatar.

Customization

Adding new variants

Create a custom Card recipe to add new style variants:

tsx

import { defineSlotRecipe } from "@chakra-ui/react"
import { cardAnatomy } from "@chakra-ui/react/anatomy"

const customCardRecipe = defineSlotRecipe({
  className: "chakra-card",
  slots: cardAnatomy.keys(),
  variants: {
    // add new variant="ghost"
    variant: {
      gradient: {
        root: {
          bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
          color: "white",
        },
      },
    },
  },
})

Adding new sizes

Add custom size variants to the Card recipe:

tsx

const customCardRecipe = defineSlotRecipe({
  // ...
  variants: {
    size: {
      // ... existing sizes (sm, md, lg)
      xl: {
        root: { "--card-padding": "spacing.10" },
        title: { textStyle: "2xl" },
      },
    },
  },
})

Changing defaults

Set new default values for size and variant:

tsx

const customCardRecipe = defineSlotRecipe({
  // ...
  defaultVariants: {
    variant: "elevated", // Default to elevated instead of outline
    size: "lg", // Default to lg instead of md
  },
})

Updating the theme

Add the custom recipe to your theme:

tsx

const config = defineConfig({
  theme: {
    slotRecipes: {
      card: customCardRecipe,
    },
  },
})

const system = createSystem(defaultConfig, config)

export function Provider(props: { children: React.ReactNode }) {
  return <ChakraProvider value={system}></ChakraProvider>
}

View the default Card recipe for reference.

Props

Root

Explorer

Explore the Card component parts interactively. Click on parts in the sidebar to highlight them in the preview.

<Explorer name="card-explorer-demo" /> ```