Design engineering
Small components with the details sweated.
Each piece here is built on shared design tokens. It works with a keyboard and a screen reader, and its motion follows your system settings. Try switching the theme or tabbing through the page.
Button
Four variants. While loading it keeps its width, so nothing around it shifts.
- Spring press feedback
- aria-busy while loading
- Visible focus ring
Showing the week view
Segmented control
A radio group whose selection indicator glides between options.
- ← → Home End
- Roving tabindex
- Shared-layout animation
A summary every Monday.
Managed by your organisation.
Switch
Works controlled or uncontrolled. Clicking the label toggles it too.
- role="switch"
- Description wired to aria-describedby
- Spring thumb
Theme
Auto, light and dark, chosen in the header. The choice persists without a flash on reload.
- Inline pre-paint script
- useSyncExternalStore
- Semantic colour tokens