Six months of availability beside a label.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/availability-stripPlayground
Availability
Updated every Monday
Content
Availability
Updated every Monday
- NovBooked
- DecBooked
- JanBooked
- FebOne slot
- MarOpen
- AprOpen
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/availability-strip
Accessibility
- Months are a list.
Motion
- Months rise 6 px one after another, 50 ms apart, once on scroll into view.
- Pointing at a month dims the others to 55%.
- Reduced motion shows them at once.
Responsive behavior
- One row on Web, two rows of three on Mobile.
Performance
- Six cells inside one Reveal. Fades and rises once on scroll into view, then does no more work.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import AvailabilityStrip from @/components/fetaui/availability-strip.
- months is required and takes six entries of month, state and note.
- The default note says Updated every Monday. Change it if yours differs.
- Composes Availability Cell.
Related
Availability CellComponentOne month of availability, used six at a time in the Availability Strip.Pricing · ServicesProBlockThree service plans with the Featured one first.Calendar EventComponentAn event block for week views: colour tag, title, time and attendees.Studio · HeroProBlockStudio mark and availability, an oversized title, image and ruled columns.About · ServicesProBlockThree service cards on a 4% tray.