Component

Card

Cards are used to group related information and actions, providing a consistent container with proper styling and spacing.

View component changelog

preview

Project Update

A quick snapshot from the latest activity.

The latest changes are ready for review. Remaining work is limited to final QA and a short content pass before release.

React
import Card from "@radui/ui/Card"
import Button from "@radui/ui/Button"

const CardExample = () => (
    <Card variant="outline" size="small">
        <Card.Header>
            <Card.Title>Project Update</Card.Title>
            <Card.Description>A quick snapshot from the latest activity.</Card.Description>
        </Card.Header>
        <Card.Content>
            <p>The latest changes are ready for review.</p>
        </Card.Content>
        <Card.Footer>
            <Button>Action</Button>
        </Card.Footer>
    </Card>
)

Features

Provides a consistent container with proper spacing and borders
Supports custom styling through className and customRootClass
Supports compound subcomponents for structured layouts
Supports visual variant and size tokens
Works well with other components to create structured layouts

API Documentation

Root

The outer card container. Storybook uses this as the main entry point, with compound subcomponents inside.

Prop	Type	Default
children	ReactNode	--
className	string	''
customRootClass	string	--
variant	string	''
size	string	''
asChild	boolean	false

Wraps the title, description, and optional actions at the top of the card.

Prop	Type	Default
children	ReactNode	--
className	string	''
asChild	boolean	false

Title

A semantic heading used for the card title.

Prop	Type	Default
children	ReactNode	--
className	string	''
asChild	boolean	false

Description

Supporting text displayed under the card title.

Prop	Type	Default
children	ReactNode	--
className	string	''
asChild	boolean	false

Content

The main body area for card content.

Prop	Type	Default
children	ReactNode	--
className	string	''
asChild	boolean	false

The footer area for actions and secondary content.

Prop	Type	Default
children	ReactNode	--
className	string	''
asChild	boolean	false

Action

An action slot for compact controls placed in the card header region.

Prop	Type	Default
children	ReactNode	--
className	string	''
asChild	boolean	false