Integrate the Card UI component

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.

Install

You can add the primitive via Tiptap CLI

npx @tiptap/cli@latest add card

Usage

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:

: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.