OhMyEtch

OhMyEtch brings atomic, headless-style components to WordPress. Each component owns one job — accessible behavior, interaction logic, and the structural hooks you need — and nothing else. You compose them into any layout, any visual design, and any product surface you want.

That is the whole philosophy: logic without opinion.

Atomic by design

Most WordPress component libraries ship finished UI patterns — cards, heroes, pricing tables, checkout shells — and ask you to adapt your design to theirs. OhMyEtch goes the other way.

An Accordion is not a FAQ block. A Dialog is not a modal popup template. A CartItemTitle is not a cart row layout. They are atoms: small, focused units that do one thing well and stay out of your way.

What the component provides	What you provide
Keyboard navigation, ARIA, focus management	Typography, spacing, color
Open/close state, form scope, facet wiring	Grid, flex, breakpoints, brand
Consistent runtime behavior across the site	Markup structure inside slots, copy, imagery

Because each atom has a narrow responsibility, the same component family can become wildly different experiences:

• Accordion → FAQ, settings panel, sidebar nav, product specs
• Tabs → product details, account settings, documentation sections
• Dialog + Trigger → newsletter signup, image lightbox entry, mobile menu
• FacetTarget + SearchFacet → job board filters, product catalog, map search
• AddToCartForm + AttributeSelector → variable product page, quick-view drawer, archive loop card

The component does not know your use case. It only guarantees the behavior works correctly every time.

Composition is the product

OhMyEtch is built for composition, not configuration hacks.

Components nest inside each other. Triggers connect to targets by ID. Facets refresh targets. Woo atoms loop inside cart containers. You assemble molecules from atoms — exactly the structure your design needs, not the structure a plugin author guessed you would want.

That matters because real projects are diverse. A marketing site, a Woo store, and a filtered archive do not share one layout — but they can share the same behavior layer. OhMyEtch keeps that layer consistent while your Etch patterns, ACSS classes, and HTML stay entirely yours.

Not opinionated — on purpose

Opinionated components save time until they do not. The moment you need a different markup order, a non-standard breakpoint, or a brand-specific interaction, you are fighting the block.

OhMyEtch deliberately avoids that:

• No baked-in layouts — slots and structure are yours to author
• No visual theme — default styling is minimal; design tokens and classes are yours
• No product assumptions — the same cart atom works in a drawer, a page, or a mini-cart dropdown
• No dead ends — when requirements change, you rearrange composition instead of replacing the component

This is what headless means in a WordPress context: the component runtime carries logic and accessibility; the presentation layer stays fully under your control.

Why atomic wins in WordPress

WordPress sites are long-lived. Teams change. Designs evolve. Integrations multiply.

Atomic components stay stable because their contract is behavior, not appearance. When you refactor a pattern library, you restyle — you do not rewrite accordion keyboard handling. When you add WooCommerce, you compose new atoms into existing layouts instead of swapping entire page templates.

You get:

• Predictable accessibility — the same patterns everywhere, tested once
• Reuse without duplication — one Dialog family, many modal experiences
• Freedom to scale — from a single FAQ to a full checkout without changing philosophy
• A system that grows with you — new atoms join the same composition model

What is in these docs

This site is the reference for composing OhMyEtch on real projects:

• UI Components — Accordion, Dialog, Tabs, Carousel, and more. Accessible, keyboard-navigable, composable families.
• Facets — Search, filter, pagination, and map facets wired to dynamic result targets.
• Woo Components — Cart, checkout, and product atoms for WooCommerce.

Pick a family, read how it composes, and build the layout you actually want.

Building with an AI agent? See LLM & agent access for llms.txt, section bundles, and every plain Markdown export.