DayStrip
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A row or column of upcoming days, such as a weather forecast, with each day's name, a value, an optional second line and an optional icon. With unit="hour" it lays out the hours of a day the same way, each named by its time on the clock.
Import
import { DayStrip } from "~lib/data-display/day-strip";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
days | { date: Date | string | number; primary: string; secondary?: string; icon?: ReactNode }[] | Yes | N/A | The days to show, in order |
direction | "row" | "column" | No | "row" | Days side by side, or one under another |
dayFormat | "short" | "long" | No | "short" | Mon or Monday |
unit | "day" | "hour" | No | "day" | Name each entry by its weekday, or by its hour on the clock |
timeFormat | "24h" | "12h" | No | "24h" | With unit="hour", 14:00 or 2 PM |
timeZone | string | No | Frame time zone | Time zone the days are named in, such as "Europe/London" |
locale | string | No | Frame language | Language of the day names, such as "fr-FR" |
size | "sm" | "md" | "lg" | No | "md" | Text size |
divider | boolean | No | false | Draw a thin line between days |
Each day's date can be:
- a date written as
"2026-10-05", which always shows as that day, wherever the frame is - a
Date, a timestamp string or milliseconds since 1970, which shows as the day it falls on intimeZone
Long text is cut short with "…" rather than wrapping, so the strip keeps its size.
Hours
unit="hour" names each entry by its hour, 14:00 or with timeFormat="12h" 2 PM, and an entry off the hour with its minutes too (14:30). Give it the same entries, one per hour:
- a time written with no zone, such as
"2026-10-05T14:00"(the way forecast services give the hours of the place you asked about), always shows as that hour, wherever the frame is - a
Date, a timestamp with an offset or milliseconds since 1970 shows as the hour it falls on intimeZone
dayFormat and locale only change day names.
Examples
Row
Days side by side in equal columns.
Thin Band
A small row for a wide, short widget.
Column
One day per row, for a tall widget.
Long Day Names
Without Icons
With Dividers
Example Widget
import { DayStrip } from "~lib/data-display/day-strip";
import { Icon } from "~lib/icon";
const Forecast = ({ days }) => (
<DayStrip
days={days.map((day) => ({
date: day.date, // e.g. "2026-10-05"
primary: `${day.high}° / ${day.low}°`,
secondary: `Rain ${day.rainChance}%`,
icon: <Icon name={day.condition} size={40} />,
}))}
/>
);