Card

API reference for the Card component

A versatile container component for grouping related content.

Import

import { Card } from "@zayne-labs/ui-react/ui/card";

Component Parts

Card.Root · component

The root container element for the card

Card.Header · component

Contains the card header content

Card.Title · component

The main heading for the card

Card.Description · component

Descriptive text for the card

Card.Content · component

The main content area of the card

Card.Action · component

Interactive action element within the card

Card.Footer · component

Contains the card footer content

Card.Root

The root container element for the card.

Props

as · React.ElementType · default: "article"

The element type to render as

asChild · boolean

When true, merges props with the immediate child element instead of rendering a wrapper element

className · string

CSS class names to apply to the root element

Data Attributes

• data-slot="card-root"
• data-scope="card"
• data-part="root"

Card.Header

Contains the card header content.

Props

as · React.ElementType · default: "header"

The element type to render as

asChild · boolean

When true, merges props with the immediate child element instead of rendering a wrapper element

className · string

CSS class names to apply to the header element

Data Attributes

• data-slot="card-header"
• data-scope="card"
• data-part="header"

Card.Title

The main heading for the card.

Props

as · React.ElementType · default: "h3"

The element type to render as

className · string

CSS class names to apply to the title element. Default styles include leading-none font-semibold

Data Attributes

• data-slot="card-title"
• data-scope="card"
• data-part="title"

Card.Description

Descriptive text for the card.

Props

as · React.ElementType · default: "p"

The element type to render as

className · string

CSS class names to apply to the description element. Default styles include text-sm text-zu-muted-foreground

Data Attributes

• data-slot="card-description"
• data-scope="card"
• data-part="description"

Card.Content

The main content area of the card.

Props

as · React.ElementType · default: "div"

The element type to render as

className · string

CSS class names to apply to the content element

Data Attributes

• data-slot="card-content"
• data-scope="card"
• data-part="content"

Card.Action

Interactive action element within the card.

Props

as · React.ElementType · default: "button"

The element type to render as

className · string

CSS class names to apply to the action element

type · string · default: "button"

The button type attribute

Data Attributes

• data-slot="card-action"
• data-scope="card"
• data-part="action"

Card.Footer

Contains the card footer content.

Props

as · React.ElementType · default: "footer"

The element type to render as

asChild · boolean

When true, merges props with the immediate child element instead of rendering a wrapper element

className · string

CSS class names to apply to the footer element

Data Attributes

• data-slot="card-footer"
• data-scope="card"
• data-part="footer"

Types

PolymorphicProps

All Card components support polymorphic props, allowing you to change the underlying element type while maintaining type safety.

type PolymorphicProps<TElement extends React.ElementType, TProps> = {
  as?: TElement;
  // ... component-specific props
} & Omit<React.ComponentPropsWithoutRef<TElement>, keyof TProps>;