Frame

Displays related content in a structured frame.

❯buridan add frame

Component Guide

Use the following to build the Frame component.

from components.ui.frame import frame

frame.root(
    frame.panel(
        frame.header(
            frame.title(),
            frame.description(),
        ),
        frame.footer(),
    ),
)

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/frame.py

Examples

Basic Panels

A basic frame with a header and two panels.

Props used: none required beyond default frame.root composition.

Section header

Description for the section

Separated Panel

Section description

Separated Panel

Section description

import reflex as rx

from components.ui.frame import frame


def frame_basic():
    return frame.root(
        frame.header(
            frame.title("Section header"),
            frame.description("Description for the section"),
        ),
        frame.panel(
            rx.el.h2("Separated Panel", class_name="text-sm font-semibold"),
            rx.el.p("Section description", class_name="text-muted-foreground text-sm"),
        ),
        frame.panel(
            rx.el.h2("Separated Panel", class_name="text-sm font-semibold"),
            rx.el.p("Section description", class_name="text-muted-foreground text-sm"),
        ),
        class_name="w-full max-w-md",
    )

Stacked Panels

Set stacked=True to merge panel borders into one continuous block.

Props used: stacked on frame.root.

Section header

Description for the section

Separated Panel

Section description

Separated Panel

Section description

import reflex as rx

from components.ui.frame import frame


def frame_stacked():
    return frame.root(
        frame.header(
            frame.title("Section header"),
            frame.description("Description for the section"),
        ),
        frame.panel(
            rx.el.h2("Separated Panel", class_name="text-sm font-semibold"),
            rx.el.p("Section description", class_name="text-muted-foreground text-sm"),
        ),
        frame.panel(
            rx.el.h2("Separated Panel", class_name="text-sm font-semibold"),
            rx.el.p("Section description", class_name="text-muted-foreground text-sm"),
        ),
        stacked=True,
        class_name="w-full max-w-md",
    )

Dense Panels

Set dense=True for minimal frame padding, edge-to-edge.

Props used: dense on frame.root.

Section header

Description for the section

Separated Panel

Section description

Separated Panel

Section description

import reflex as rx

from components.ui.frame import frame


def frame_dense():
    return frame.root(
        frame.header(
            frame.title("Section header"),
            frame.description("Description for the section"),
        ),
        frame.panel(
            rx.el.h2("Separated Panel", class_name="text-sm font-semibold"),
            rx.el.p("Section description", class_name="text-muted-foreground text-sm"),
        ),
        frame.panel(
            rx.el.h2("Separated Panel", class_name="text-sm font-semibold"),
            rx.el.p("Section description", class_name="text-muted-foreground text-sm"),
        ),
        stacked=True,
        dense=True,
        class_name="w-full max-w-md",
    )

Outer Border

Set variant="ghost" to remove the frame's outer border.

Props used: variant on frame.root.

No Outer Border

This frame uses variant='ghost' to remove the outer border.

The outer container of this frame has no border, only the background and panels are visible.

import reflex as rx

from components.ui.frame import frame


def frame_no_border():
    return frame.root(
        frame.header(
            frame.title("No Outer Border"),
            frame.description(
                "This frame uses variant='ghost' to remove the outer border."
            ),
        ),
        frame.panel(
            rx.el.p(
                "The outer container of this frame has no border, only the background and panels are visible.",
                class_name="text-muted-foreground text-sm",
            ),
        ),
        stacked=True,
        dense=True,
        variant="ghost",
        class_name="w-full max-w-md",
    )

API Reference

frame.root

frame.root(
    frame.panel(
        frame.header(frame.title("Overview")),
        "Panel content",
    ),
    variant="default",
    spacing="default",
)

Prop	Type	Default	Description
`variant`	`Literal["default", "inverse", "ghost"]`	`"default"`	Controls the visual style of the frame container.
`spacing`	`Literal["xs", "sm", "default", "lg"]`	`"default"`	Controls internal padding of panels, headers, and footers via CSS variables.
`stacked`	`bool`	`False`	Removes gaps and merges panel borders so they appear as one continuous block.
`dense`	`bool`	`False`	Removes all padding/gaps and pulls panels edge-to-edge with negative margins.
`class_name`	`str`	`""`	Additional classes merged onto the root wrapper.

frame.panel

frame.panel("Panel content")

Prop	Type	Default	Description
`class_name`	`str`	`""`	Additional classes merged onto the panel — overrides default bg/border/padding.

frame.header

frame.header(frame.title("Overview"))

Prop	Type	Default	Description
`class_name`	`str`	`""`	Additional classes merged onto the header.

frame.title

frame.title("Overview")

Prop	Type	Default	Description
`class_name`	`str`	`""`	Additional classes merged onto the title.

frame.description

frame.description("A summary of recent activity.")

Prop	Type	Default	Description
`class_name`	`str`	`""`	Additional classes merged onto the description.

frame.footer

frame.footer(button("View all", variant="ghost", size="sm"))

Prop	Type	Default	Description
`class_name`	`str`	`""`	Additional classes merged onto the footer.