Examples

Worked examples of common UI patterns built with @studiometa/js-toolkit. Each example shows the HTML, the component code, and the app setup.

Basics

• Counter component — Increment and decrement a number with refs and event handling
• Accordion — Show and hide a content section with ARIA support

Patterns

• Tabs — Switch between panels with keyboard navigation and ARIA roles
• Modal — Open a dialog with a backdrop, focus trapping, and Escape to close
• Form validation — Validate fields in real time with error messages

Advanced

• Scroll-linked animation — Drive parallax and skew effects from scroll position
• Lazy image — Defer image loading with the withMountWhenInView decorator
• Teleport refs — Move DOM elements outside the component tree while keeping ref access