fetaUI
GitHub

Day Strip

Pick a day from a strip of soft capsules. The selected day grows and fills with ink.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/day-strip
Playground
Five days
Three days
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/day-strip

Accessibility

  • A radiogroup, and each day reads its full date.
  • One tab stop, on the selected day.

Motion

  • The selected capsule grows over 240 ms and the pointer slides on a spring.
  • Pressing squeezes a capsule to .96.
  • With reduced motion, the change is instant.

Responsive behavior

  • 64 px capsules on Web, 56 px on Mobile, and 66 by 108 for the active day.

Performance

  • The day list and Intl formatters are memoized.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import DayStrip from @/components/fetaui/day-strip. start is required, and days defaults to 5.
  • Pass today so past days sink onto the tray. It is a prop so the server and client agree.
  • It is a radiogroup with arrow keys. It does not page, so change start from your own controls.
  • Each strip has its own layout id, so several can share a view.
/docs/components/day-strip/markdown
PreviousTime Field
NextTheme Switch

Related

CalendarComponentPick a date, a range, or a date and a time. Six rows always, so the height never jumps.Date PickerComponentA pill field that opens a month in a floating surface.Toggle GroupComponentToggles on one tray, for a single choice or several.Calendar ScheduleComponentA month with its events in the grid, and the picked day's agenda beside it.