Components
- Activity Heatmap
- Activity Rings
- Bar Chart
- Bar List
- Command Palette
- Composed Chart
- Corner Frame
- Data Table
- Delta Badge
- Distribution Bar
- Donut Chart
- Dot Plot
- Funnel Chart
- Heatmap Chart
- KPI Card
- Metric List
- Metric Value
- Period Tabs
- Radar Chart
- Radial Gauge
- Sankey Chart
- Scatter Chart
- Segmented Meter
- Sparkline
- Tick Bar
- Timeline
- Trend Chart
Blocks
- Activity Rings Card
- Allocation Card
- Balance Chart Card
- Breakdown Card
- Commerce KPI Row
- Contributions Card
- Data Table Card
- Distribution Card
- Dot Plot Card
- Dual Metric Card
- Funnel Chart Card
- Goal Chart Card
- Heatmap Chart Card
- Insight Card
- KPI Row Card
- Metric Tabs Chart Card
- Payment Summary Card
- Period Bar Chart Card
- Progress Card
- Revenue Ring Card
- Ring KPI Card
- Score Gauge Card
- Stage Bars Card
- Status Gauge Card
- Tick KPI Card
PageVisitors
48.2K46.4%
21.5K20.7%
18.9K18.2%
9.1K8.8%
4.3K4.1%
1.9K1.8%
import { BarList } from "@/components/ui/bar-list"
const pages = [A ranked list with a proportional bar behind each row, the pattern analytics tools use for top pages, referrers, and countries. Rows are plain elements, so they can be links, and the bars pick up your shadcn theme color.
Installation#
pnpm dlx shadcn@latest add @dashboardcn/bar-listUsage#
import { BarList } from "@/components/ui/bar-list"
<BarList
data={[
{ name: "/", value: 48210, href: "/analytics?page=/" },
{ name: "/pricing", value: 21480 },
]}
showPercentage
/>Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.