A free component library for Etch WP, right inside the builder.
etchKit adds a panel to the Etch builder with ready-to-use components, patterns, and design tools. Search, preview, copy/paste and keep building. You can also add your own items directly from the panel.
Browse, copy, build
Components (modals, tabs, carousels, scroll animations, tooltips…), page patterns (heroes, pricing, testimonials, feature grids), and interactive design tools. Each ships with copy-ready JSON.
Add your own
Hit the + button in the panel to add your own components and patterns. They show up alongside the built-in items with the same search and filtering. Edit or delete them anytime.
Color Swatches tool
Pick a base color and prefix to generate a full oklch custom property palette: semantic shades and transparency steps, with light/dark mode toggle using light-dark().
Typography Scale tool
Set a base size, ratio, and viewport range. Generates fluid CSS clamp() custom properties with a live preview. Copy the output and paste it into your project.
1
Upload and activate the plugin – nothing to configure
2
Open any page in Etch – the icon appears in the settings bar
3
Browse or search – filter by type, category, starred items or your own
4
Copy JSON, paste into Etch – done
Ctrl + Shift + E
Toggle the panel from anywhere in the builder.
| Name | Category | Type |
|---|---|---|
| Background SVG Shapes | Interactions | Component |
| Reveal Anything | Interactions | Component |
| Interactive ASCII Canvas | Interactions | Component |
| Toast Notification | Feedback | Component |
| Basic Page Loader | Loader | Component |
| Tabs | Layout | Component |
| Lightbox | Media | Component |
| Carousel | Media | Component |
| Dropdown Menu | Navigation | Component |
| Hero Section | Heroes | Pattern |
| Pricing Table | Marketing | Pattern |
| Feature Grid | Marketing | Pattern |
| Testimonials | Marketing | Pattern |
| Color Swatches | Design | Tool |
| Typography Scale | Design | Tool |
| ..and more coming soon. |
Fast by default
Library loads once and stays in memory. Every filter, search, and detail view after that is instant. No extra requests.
Locked down
Logged-in editors only. Nonce-verified requests. All input escaped server-side. No innerHTML, no eval, no SQL.
Three-layer cache
Browser ETags, server-side transients, and client-side localStorage. Repeat visits load with zero transfer.
Zero footprint
No jQuery, no framework, no CDN calls. A single scoped IIFE that won't collide with your theme or other plugins.
Accessible
Full keyboard nav, ARIA roles, screen-reader announcements on filter changes, focus trap. Built for everyone.
Zero site impact
Assets only load inside the Etch builder. Nothing touches your front end. Zero impact on page speed.
100
Performance
100
Accessibility
100
Best Practices
Free, GPL-2.0
WP 6.4+ · PHP 8.1+ · Etch active
Support etchKit
etchKit is free and always will be. No premium tier, no gated features, no upsells. If it saves you time or you want to see it grow, a coffee goes a long way. It helps fund development, new components, and keeps the lights on.
Buy me a coffee