Skip to main content
The Card component provides a structured container for organizing content with optional header, title, description, content area, and footer sections.

​
Basic Usage

import reflex_ui as ui

ui.card(
    title="Card Title",
    description="A brief description of the card content.",
    content="Main content goes here."
)

​
High-Level API

The simplest way to create a card using props: 
ui.card(
    title="Project Overview",
    description="Track your project metrics and performance",
    content=rx.text("Your content here"),
    footer=ui.button("View Details", variant="outline")
)
​
title
str | Component
The card’s header title
​
description
str | Component
Descriptive text displayed below the title
​
content
str | Component
Main content area of the card
​
footer
str | Component
Footer section, typically for actions

​
Compositional API

For more control, compose the card using subcomponents: 
ui.card.root(
    ui.card.header(
        ui.card.title("Settings"),
        ui.card.description("Manage your account settings")
    ),
    ui.card.content(
        rx.text("Content area with settings options")
    ),
    ui.card.footer(
        ui.button("Cancel", variant="ghost"),
        ui.button("Save", variant="primary")
    )
)

​
Card Components

​
card.root

The main card container with border, shadow, and rounded corners. 
ui.card.root(
    # child components
)

​
card.header

Header section with padding for title and description. 
ui.card.header(
    ui.card.title("Title"),
    ui.card.description("Description")
)

​
card.title

Large, semibold text for the card heading. 
ui.card.title("Card Heading")

​
card.description

Secondary text below the title. 
ui.card.description("Supporting description text")

​
card.content

Main content area with consistent padding. 
ui.card.content(
    rx.text("Main content"),
    rx.text("More content")
)
Footer section with flexbox layout for actions. 
ui.card.footer(
    ui.button("Action 1"),
    ui.button("Action 2")
)

​
Styling Classes

Access predefined class names via ui.card.class_names:
  • ROOT: Card container styles
  • HEADER: Header section styles
  • TITLE: Title text styles
  • DESCRIPTION: Description text styles
  • CONTENT: Content area styles
  • FOOTER: Footer section styles

​
Real Example

From demo at demo/demo.py: 
ui.card(
    title="Welcome",
    description="Get started with Reflex UI components",
    content=rx.el.div(
        ui.button("Learn More", variant="primary"),
        class_name="flex gap-2"
    )
)

​
Implementation Details

From source code at reflex_ui/components/base/card.py:137:
  • Uses component namespace pattern for flexible composition
  • High-level wrapper automatically creates structure from props
  • Each subcomponent has dedicated styling via data-slot attributes
  • Fully customizable with class_name prop

Build docs developers (and LLMs) love

Get started for freeTalk to us