Frame

Displays related content in a structured frame.

Note: The Frame component is a fully custom implementation with no external dependencies.

Installation

Copy the following code into your app directory.

uv run buridan add component frame

Usage

from components.ui.frame import frame

Anatomy

Use the following composition to build a Frame component.

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

Examples

Basic Panels

A basic frame with a header and two panels.

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 the stacked prop to True to get the panels stacked.

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 the dense prop to True to get minimal frame padding.

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 the variant prop to ghost to remove the frame outer border.

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

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

frame.panel

Prop	Type	Default	Description
class_name	str	None	Additional Tailwind classes merged onto the panel. Overrides default bg, border, and padding.

frame.header

Prop	Type	Default	Description
class_name	str	None	Additional Tailwind classes merged onto the header element.

frame.title

Prop	Type	Default	Description
class_name	str	None	Additional Tailwind classes merged onto the title element.

frame.description

Prop	Type	Default	Description
class_name	str	None	Additional Tailwind classes merged onto the description element.

frame.footer

Prop	Type	Default	Description
class_name	str	None	Additional Tailwind classes merged onto the footer element.

External Tools

︲

Agent Resources

llms.txt

On This Page