Card

A flexible container component for grouping related content with optional header, footer, and action sections.

A container component that groups related content and actions. It splits the layout into distinct sections like headers, main content, and footers, letting you arrange each part independently.

Installation

npm install @zayne-labs/ui-react

Preview

Sarah Anderson

Tech Lead • Design Ops

"Creating digital experiences that bridge the gap between human emotion and technical precision."

Velocity94%

Stability99.9%

Management Console

Basic Usage

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

<Card.Root>
	<Card.Header>
		<Card.Title>Account Overview</Card.Title>
		<Card.Description>Manage your profile and settings</Card.Description>
	</Card.Header>
	<Card.Content>
		<p>View and update your personal information, security settings, and preferences.</p>
	</Card.Content>
	<Card.Footer>
		<Card.Action>Edit Profile</Card.Action>
	</Card.Footer>
</Card.Root>;

Component Source

import type { PolymorphicProps } from "@zayne-labs/toolkit-react/utils";import { Slot } from "@/components/common/slot";import { cnMerge } from "@/lib/utils/cn";export function CardRoot<TElement extends React.ElementType = "article">(	props: PolymorphicProps<TElement, { asChild?: boolean; className?: string }>) {	const { as: Element = "article", asChild, className, ...restOfProps } = props;	const Component = asChild ? Slot.Root : Element;	return (		<Component			data-slot="card-root"			data-scope="card"			data-part="root"			className={className}			{...restOfProps}		/>	);}export function CardHeader<TElement extends React.ElementType = "header">(	props: PolymorphicProps<TElement, { asChild?: boolean; className?: string }>) {	const { as: Element = "header", asChild, className, ...restOfProps } = props;	const Component = asChild ? Slot.Root : Element;	return (		<Component			data-slot="card-header"			data-scope="card"			data-part="header"			className={className}			{...restOfProps}		/>	);}export function CardTitle<TElement extends React.ElementType = "h3">(	props: PolymorphicProps<TElement, { className?: string }>) {	const { as: Element = "h3", className, ...restOfProps } = props;	return (		<Element			data-slot="card-title"			data-scope="card"			data-part="title"			className={cnMerge("leading-none font-semibold", className)}			{...restOfProps}		/>	);}export function CardDescription<TElement extends React.ElementType = "p">(	props: PolymorphicProps<TElement, { className?: string }>) {	const { as: Element = "p", className, ...restOfProps } = props;	return (		<Element			data-slot="card-description"			data-scope="card"			data-part="description"			className={cnMerge("text-sm text-zu-muted-foreground", className)}			{...restOfProps}		/>	);}export function CardContent<TElement extends React.ElementType = "div">(	props: PolymorphicProps<TElement, { className?: string }>) {	const { as: Element = "div", className, ...restOfProps } = props;	return (		<Element			data-slot="card-content"			data-scope="card"			data-part="content"			className={className}			{...restOfProps}		/>	);}export function CardAction<TElement extends React.ElementType = "button">(	props: PolymorphicProps<TElement, { className?: string }>) {	const { as: Element = "button", className, ...restOfProps } = props;	return (		<Element			data-slot="card-action"			data-scope="card"			data-part="action"			type="button"			className={className}			{...restOfProps}		/>	);}export function CardFooter<TElement extends React.ElementType = "footer">(	props: PolymorphicProps<TElement, { asChild?: boolean; className?: string }>) {	const { as: Element = "footer", asChild, className, ...restOfProps } = props;	const Component = asChild ? Slot.Root : Element;	return (		<Component			data-slot="card-footer"			data-scope="card"			data-part="footer"			className={className}			{...restOfProps}		/>	);}

Component API

All Card components are polymorphic and support the asChild pattern.

Card.Root - Primary container (renders <article> by default)
Card.Header - Container for titles and descriptions (renders <header>)
Card.Title - Title element (renders <h3>)
Card.Description - Description element (renders <p>)
Card.Content - Main content area (renders <div>)
Card.Action - Interactive element (renders <button>)
Card.Footer - Footer section (renders <footer>)

Data Attributes

Component	Attribute	Description
`Card.Root`	`data-scope="card"`	Component family identifier.
All parts	`data-part`	Part identifier (root, header, title, etc.).
All parts	`data-slot`	Combined identifier (e.g., `card-header`).