Browse components
Stats Carousel
A carousel of KPI cards whose numbers count up and sparklines draw in as each one slides to center.
Installation
npx shadcn@latest add @glint-ui/stats-carouselFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/stats-carousel.json
Usage
import { StatsCarousel } from "@/components/ui/stats-carousel";
<StatsCarousel
stats={[
{ label: "Revenue", value: 48290, prefix: "$", delta: 12.4, data: [22, 27, 26, 34, 41, 44] },
{ label: "Churn", value: 1.9, decimals: 1, suffix: "%", delta: -0.6, invert: true, data: [2.8, 2.4, 2.2, 1.9] },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| stats | ReactNode | — | Array of { label, value, prefix?, suffix?, decimals?, delta?, invert?, data, caption? }. |
| autoPlay | boolean | true | Advance automatically; pauses on hover and focus. |
| interval | number | 3200 | Ms between slides. |
| duration | number | 1400 | Ms for the count-up and sparkline draw. |
| cardWidth | number | 280 | Card width in px. |
| gap | number | 20 | Px between cards. |
| positiveColor | string | "#a3e635" | Accent for metrics moving the right way. |
| negativeColor | string | "#fb7185" | Accent for metrics moving the wrong way. |
| className | string | — | Extra classes for the root element. |