Components
Stat
Display key metrics with Semji's stat component. Use Tailwind CSS for clean, customizable data displays in web projects.
Basic example
Default
This basic example of stat component.
Illustration
With avatar
The example below demonstrates a Stat displaying with avatar.
With icons and image
The example below demonstrates a Stat displaying with icons and images.
Center item
The example below shows a Stat with a centered item layout.
Vertical
The example below illustrates a vertical Stat layout.
Responsive
Use TailwindCSS classes for <a href="https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range" target="_blank" class="link link-primary">responsive design</a>, such as `sm:`, `md:`, `lg:`, `xl:`, and `2xl:`, along with the responsive class `stats-vertical`, to switch the stat alignment to horizontal at specific breakpoints or vice the versa.
With progress bar
The example below shows a Stat with a progress bar.
With actions button
The following example demonstrates the use of an action button within a stat component.
Border layout
The following example demonstrates a Stat component with a bordered layout using `stats-border`.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
stats | component | A container that holds multiple stat items. |
stat | part | Represents an individual stat item. |
stat-title | part | Displays the title text for a stat item. |
stat-value | part | Shows the numerical or main value of a stat item. |
stat-desc | part | Provides additional description text for a stat item. |
stat-figure | part | Used for displaying an icon, image, or other graphic element. |
stat-actions | part | Contains buttons or input fields related to the stat item. |
stats-border | style | Applies a border to the stat. |
stats-horizontal | direction | Arranges stat items in a horizontal layout (default). |
stats-vertical | direction | Arranges stat items in a vertical layout. |