Weekly Bars
A seven-day bar chart widget with a goal line, tap-to-inspect bars and an optional ghost of last week behind.
weekly-bars.tsxweekly-bars.css
Checking access…
Overview
Bars rise in on mount; tapping one selects it and the header shows that day’s value against the goal. The goal line is dashed and labelled.
Compare overlays last week as outlined ghost bars so the difference reads without colours.
When to use
- Habit, fitness, screen time and usage summaries.
When not to use
- Long time series: use a line chart.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/weekly-bars.json$
npx shadcn@latest add https://sundaeui.dev/r/weekly-bars.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/weekly-bars.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/weekly-bars.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy weekly-bars.tsx and weekly-bars.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { WeeklyBars } from '@/components/sundae/weekly-bars'
<WeeklyBars />Props
| Prop | Type | Default |
|---|---|---|
values*Seven values, Monday first. | number[] | — |
previousLast week’s values for comparison. | number[] | — |
goalGoal line value. | number | — |
unitUnit label. | string | 'min' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Bars are radio buttons labelled with day and value; the summary is announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-wkb; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ← / →
- Previous / next day
FAQ
- Is Weekly Bars free?
- Weekly Bars is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Weekly Bars?
- Run npx shadcn@latest add https://sundaeui.dev/r/weekly-bars.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Weekly Bars support keyboard and screen readers?
- Bars are radio buttons labelled with day and value; the summary is announced. Reduced motion removes the movement and keeps every state change.
- Does Weekly Bars respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →- Pro
Donut Breakdown
Data · Refined Savings Goal
Data · RefinedWeather Forecast
Data · RefinedStacked Bars
Data · Refined- Pro
Activity Rings
Data · Expressive - Pro
Scrub Sparkline
Data · Refined