---
title: "Integrate the Card UI component"
description: "Integrate a flexible container component that groups related content and actions. Learn more in the docs."
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/card"
---

# Integrate the Card UI component

Integrate a flexible container component that groups related content and actions. Learn more in the docs.

A flexible container component that groups related content and actions in a visually distinct way, commonly used to display information in cards, dialogs, and panels.

> **Interactive demo:** [card](https://template.tiptap.dev/preview/tiptap-ui-primitive/card)

## Install

You can add the primitive via Tiptap CLI

```bash
npx @tiptap/cli@latest add card
```

## Usage

```tsx
import {
  Card,
  CardHeader,
  CardBody,
  CardItemGroup,
  CardGroupLabel,
} from '@/components/tiptap-ui-primitive/card'

export default function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <h3>Settings</h3>
      </CardHeader>
      <CardBody>
        <CardGroupLabel>Appearance</CardGroupLabel>
        <CardItemGroup orientation="vertical">
          <div>Theme preference</div>
          <div>Language</div>
        </CardItemGroup>

        <CardGroupLabel>Account</CardGroupLabel>
        <CardItemGroup orientation="horizontal">
          <div>Profile</div>
          <div>Security</div>
        </CardItemGroup>
      </CardBody>
    </Card>
  )
}
```

## Props

### CardItemGroup

| Name        | Type                         | Default    | Description                                |
| ----------- | ---------------------------- | ---------- | ------------------------------------------ |
| orientation | `'horizontal' \| 'vertical'` | 'vertical' | Layout direction of the items in the group |

## Styling

The Card component uses CSS custom properties for theming:

```scss
:root {
  --tiptap-card-bg-color: var(--white);
  --tiptap-card-border-color: var(--tt-gray-light-a-100);
  --tiptap-card-group-label-color: var(--tt-gray-light-a-800);
}

.dark {
  --tiptap-card-bg-color: var(--tt-gray-dark-50);
  --tiptap-card-border-color: var(--tt-gray-dark-a-100);
  --tiptap-card-group-label-color: var(--tt-gray-dark-a-800);
}
```

You can customize these properties to match your design system.