One month of availability, used six at a time in the Availability Strip.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/availability-cellPlayground
States
FebBooked
FebOne slot
FebOpen
State
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/availability-cell
Accessibility
- State is written out, never colour alone.
Motion
- Hover lifts the cell 1 px and rolls the month up in place.
- With
onSelectit presses to 0.97 and pops in 320 ms when picked. - Reduced motion keeps the colours and drops the movement.
Responsive behavior
- 120 wide on Web and 104 on Mobile.
Performance
- Plain markup and CSS, with no loops or timers.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import AvailabilityCell from @/components/fetaui/availability-cell.
- month is required. state picks booked, one-slot or open, and note replaces the state text.
- Availability Strip lays out six of these for you.
Related
Availability StripComponentSix months of availability beside a label.Pricing · ServicesProBlockThree service plans with the Featured one first.Calendar EventComponentAn event block for week views: colour tag, title, time and attendees.BadgeComponentA short label that names a status or a category. The pill stays ink and the mark carries the tone.Studio · HeroProBlockStudio mark and availability, an oversized title, image and ruled columns.