The stat component is a great way to visualize statistics in a clean and concise way.

Example Price
$25
The price of the item.
rc.stat(
    rc.stat_label("Example Price"),
    rc.stat_number("$25"),
    rc.stat_help_text("The price of the item."),
)

Example of a stats in a group with arrow.

$250
%50increased by
£100
%50decreased by
rc.stat_group(
    rc.stat(
        rc.stat_number("$250"),
        rc.stat_help_text(
            "%50", rc.stat_arrow(type_="increase")
        ),
    ),
    rc.stat(
        rc.stat_number("£100"),
        rc.stat_help_text(
            "%50", rc.stat_arrow(type_="decrease")
        ),
    ),
    width="100%",
)

rc.Stat

The Stat component is used to display some statistics. It can take in a label, a number and a help text.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rc.StatLabel

A stat label component.

Props

No component specific props

rc.StatNumber

The stat to display.

Props

No component specific props

rc.StatHelpText

A helper text to display under the stat.

Props

No component specific props

rc.StatArrow

A stat arrow component indicating the direction of change.

PropType | ValuesDefault
type_
str

rc.StatGroup

A stat group component to evenly space out the stats.

Props

No component specific props