DocsComponents

Card

Related content and actions, gathered on a single surface.

Room for an idea

Start with something small.

A little space for your next project.

Installation

Terminal

pnpm dlx shadcn@latest add https://react-toolbox.io/r/card.json

New here? Set up your project first. Styles, fonts, and required components are included.

Usage

Compose CardTitle, CardMedia, CardText, and CardActions inside Card. These parts include Material keyline spacing; avoid adding a second layer of padding around them.

Use the Code tab above for a complete example. The import follows your configured UI alias. See Theming to customize colors, spacing, and style slots.

State and callbacks

Card and its content components are presentational. Compose buttons or other controls inside CardActions to manage application state.

API reference

Generated from the installed TypeScript source. Defaults are the values declared by each function; a dash means no parameter default is declared. Forwarded props can use the receiving component’s default. Callback types show the exact arguments passed to your handler.

`Card`

Property	Type	Default
`classNames`	`CardTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`CardTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`
`raised`	`boolean`	`—`

Also inherits ComponentPropsWithRef<'div'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

card
cardActions
cardMedia
cardText
cardTitle
content
contentOverlay
large
raised
small
square
subtitle
title
wide

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

`CardActions`

Property	Type	Default
`classNames`	`CardTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`CardTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

card
cardActions
cardMedia
cardText
cardTitle
content
contentOverlay
large
raised
small
square
subtitle
title
wide

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

`CardMedia`

Property	Type	Default
`aspectRatio`	`'wide' \| 'square'`	`—`
`contentOverlay`	`boolean`	`—`
`image`	`ReactNode`	`—`
`classNames`	`CardTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`CardTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

card
cardActions
cardMedia
cardText
cardTitle
content
contentOverlay
large
raised
small
square
subtitle
title
wide

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

`CardText`

Property	Type	Default
`classNames`	`CardTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`CardTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

card
cardActions
cardMedia
cardText
cardTitle
content
contentOverlay
large
raised
small
square
subtitle
title
wide

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

`CardTitle`

Property	Type	Default
`avatar`	`ReactNode`	`—`
`subtitle`	`ReactNode`	`—`
`title`	`ReactNode`	`—`
`classNames`	`CardTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`CardTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`

Also inherits Omit<ComponentPropsWithRef<'div'>, 'title'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

card
cardActions
cardMedia
cardText
cardTitle
content
contentOverlay
large
raised
small
square
subtitle
title
wide

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

Exported TypeScript types

Expand a type to inspect its full declaration, including generic constraints, union branches, callback arguments, ref handles, and inherited props. Import these types from @/components/ui/material/card.

CardProps

tsx

interface CardProps extends ComponentPropsWithRef<'div'> {
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: CardTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: CardTheme;
  raised?: boolean;
}

CardActionsProps

tsx

interface CardActionsProps extends ComponentPropsWithRef<'div'> {
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: CardTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: CardTheme;
}

CardMediaProps

tsx

interface CardMediaProps extends ComponentPropsWithRef<'div'> {
  aspectRatio?: 'wide' | 'square';
  contentOverlay?: boolean;
  image?: ReactNode;
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: CardTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: CardTheme;
}

CardTextProps

tsx

interface CardTextProps extends ComponentPropsWithRef<'div'> {
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: CardTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: CardTheme;
}

CardTitleProps

tsx

interface CardTitleProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
  avatar?: ReactNode;
  subtitle?: ReactNode;
  title?: ReactNode;
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: CardTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: CardTheme;
}

Material guidelines

Group content about one subject. Use a consistent width across a collection while allowing cards to grow with their content.
Make the main destination clear and limit competing secondary actions. A whole-card link needs visible focus and press feedback; avoid nesting buttons inside that link.

Material Design 1: Cards