Components are standalone, reusable UI elements. Each one is self-contained, accessible, and ready to drop into any page. Copy the JSON from the panel, paste it into the Etch canvas, and customize the content.

Every component listed here is built-in and ships with etchKit.

Interactions #

Scroll Animations adds CSS scroll-driven animations with stagger support. Entirely CSS-based, zero JavaScript. Elements animate into view as the user scrolls down the page. You can control timing, direction, and stagger delay through config options.

Tooltip is a CSS-anchored tooltip built on the Popover API. It positions itself automatically based on available space (smart placement) and supports rich HTML content inside the tooltip, not just plain text.

Dropdown Menu gives you an accessible dropdown with full keyboard navigation, nested sub-menus, and Popover API stacking so menus layer correctly. ARIA attributes are handled automatically.

Feedback #

Toast Notification is a declarative toast system. You trigger toasts using data-toast attributes on any element. Toasts stack on screen and auto-dismiss after a set duration. No JavaScript to write, just add the data attribute.

Modal Dialog is an accessible modal built on the native <dialog> element. It traps focus inside the modal while open, closes on Escape, and manages the backdrop and scroll lock for you. All ARIA attributes are set automatically.

Layout #

Accordion is an expand/collapse component with single-open and multi-open modes. In single-open mode, opening one section closes the others. ARIA roles and states are managed automatically so screen readers handle it correctly out of the box.

Tabs gives you keyboard-navigable tab panels with an animated active indicator. Supports both horizontal and vertical layouts. Panels can be set to lazy-load so their content only renders when the tab is activated.

Media #

Lightbox is a fullscreen image viewer built on the native <dialog> element. Supports grouped images with previous/next navigation, swipe gestures on touch devices, and captions. Opens and closes with smooth transitions.

Carousel is a lightweight swipeable carousel. Works with touch, keyboard, mouse drag, and pointer events. No heavy dependencies. Handles responsive sizing and supports any content inside the slides, not just images.

Navigation #

Dropdown Menu (listed above under Interactions) also serves as a navigation component. See the Interactions section for details.