WeekStrip

Markdown

Seven columns with the series stacked inside each and the current day in bold, for a week at a glance.

Use it for
A week of counts, stacked by kind, with a goal.
Not for
More than a couple of weeks. Try Chart.

WeekStrip preview

Loading example…

Installation

npm install @stackunseen/ui
import { WeekStrip } from '@stackunseen/ui';
Styles: @stackunseen/ui/styles.css

Usage and props

Pass counts by series id per day. max sets the column that reads full; use it for a goal so the empty part of each column shows what is left. Every count is in a hidden table.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

label · days: { label, values: Record<seriesId, number> }[] · series: { id, label, swatch? }[] · max? · current? · unit? · legend?
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
label · days: { label, values: Record<seriesId, number> }[] · series: { id, label, swatch? }[] · max? · current? · unit? · legend?
Keeps honest
Pass counts by series id per day. max sets the column that reads full; use it for a goal so the empty part of each column shows what is left. Every count is in a hidden table.
MCP
read_component "WeekStrip" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

Inert content; the hidden table is read in order.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio