Check out BugBytes overview of labb
UI

Search

Search features are coming soon!

Stat

<c-lb.stat /> Markdown

Stat component for Django: display key metrics, KPIs, and dashboard statistics. Built with django-cotton, Tailwind CSS, and daisyUI 5.

Stat is a group of composable sub-components for presenting key metrics. Each c-lb.stat holds a title, value, desc, optional figure, and actions — arrange them in c-lb.stat.group to build a metrics row or dashboard card.

Basic Stat

Total Page Views
89,400
21% more than last month
<c-lb.stat.group class="shadow">
    <c-lb.stat>
        <c-lb.stat.title>Total Page Views</c-lb.stat.title>
        <c-lb.stat.value>89,400</c-lb.stat.value>
        <c-lb.stat.desc>21% more than last month</c-lb.stat.desc>
    </c-lb.stat>
</c-lb.stat.group>

With Icon

Total Likes
25.6K
21% more than last month
<c-lb.stat.group class="shadow">
    <c-lb.stat>
        <c-lb.stat.figure variant="primary" icon="rmx.heart" />
        <c-lb.stat.title>Total Likes</c-lb.stat.title>
        <c-lb.stat.value variant="primary">25.6K</c-lb.stat.value>
        <c-lb.stat.desc>21% more than last month</c-lb.stat.desc>
    </c-lb.stat>
</c-lb.stat.group>

Multiple Stats

Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↑ 400 (22%)
New Registers
1,200
↓ 90 (14%)
<c-lb.stat.group class="shadow">
    <c-lb.stat>
        <c-lb.stat.title>Downloads</c-lb.stat.title>
        <c-lb.stat.value>31K</c-lb.stat.value>
        <c-lb.stat.desc>Jan 1st - Feb 1st</c-lb.stat.desc>
    </c-lb.stat>
    <c-lb.stat>
        <c-lb.stat.title>New Users</c-lb.stat.title>
        <c-lb.stat.value>4,200</c-lb.stat.value>
        <c-lb.stat.desc variant="success">↑ 400 (22%)</c-lb.stat.desc>
    </c-lb.stat>
    <c-lb.stat>
        <c-lb.stat.title>New Registers</c-lb.stat.title>
        <c-lb.stat.value>1,200</c-lb.stat.value>
        <c-lb.stat.desc variant="error">↓ 90 (14%)</c-lb.stat.desc>
    </c-lb.stat>
</c-lb.stat.group>

Vertical Layout

Downloads
31K
New Users
4,200
<c-lb.stat.group class="shadow" direction="vertical">
    <c-lb.stat>
        <c-lb.stat.title>Downloads</c-lb.stat.title>
        <c-lb.stat.value>31K</c-lb.stat.value>
    </c-lb.stat>
    <c-lb.stat>
        <c-lb.stat.title>New Users</c-lb.stat.title>
        <c-lb.stat.value>4,200</c-lb.stat.value>
    </c-lb.stat>
</c-lb.stat.group>

With Actions

Account Balance
$2,500
<c-lb.stat.group class="shadow">
    <c-lb.stat>
        <c-lb.stat.title>Account Balance</c-lb.stat.title>
        <c-lb.stat.value>$2,500</c-lb.stat.value>
        <c-lb.stat.actions>
            <c-lb.button size="xs" variant="success">Add funds</c-lb.button>
        </c-lb.stat.actions>
    </c-lb.stat>
</c-lb.stat.group>

API Reference

c-lb.stat.group

Property Type Default Required Description
class string - No Additional CSS classes to apply
direction
horizontal vertical
horizontal No Layout direction for stats
Slot Name Description
default Container for stat components

c-lb.stat

Property Type Default Required Description
class string - No Additional CSS classes to apply
Slot Name Description
default Stat content using stat.title, stat.value, stat.desc, stat.figure, and stat.actions components

c-lb.stat.title

Property Type Default Required Description
class string - No Additional CSS classes to apply
Slot Name Description
default Title text content

c-lb.stat.value

Property Type Default Required Description
class string - No Additional CSS classes to apply
variant
primary secondary accent neutral info success warning error
- No Color variant for the stat value
Slot Name Description
default Value content (typically a number or metric)

c-lb.stat.desc

Property Type Default Required Description
class string - No Additional CSS classes to apply
variant
primary secondary accent neutral info success warning error
- No Color variant for the stat description
Slot Name Description
default Description text content

c-lb.stat.figure

Property Type Default Required Description
class string - No Additional CSS classes to apply
icon string - No Icon name to display
↳ .fill modifier - No Render in filled (solid) style
icon.class string - No Additional CSS classes for the icon
variant
primary secondary accent neutral info success warning error
- No Color variant for the figure
Slot Name Description
default Custom figure content (icon or image element)

c-lb.stat.actions

Property Type Default Required Description
class string - No Additional CSS classes to apply
Slot Name Description
default Action buttons or interactive elements
Prev List
Next Table