# OhMyEtch

> Atomic, non-opinionated components for WordPress — behavior and logic you compose into any layout.

# 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](/category/ui-components)** — Accordion, Dialog, Tabs, Carousel, and more. Accessible, keyboard-navigable, composable families.
- **[Facets](/facets/overview)** — Search, filter, pagination, and map facets wired to dynamic result targets.
- **[Woo Components](/woo/overview)** — 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](/llms)** for `llms.txt`, section bundles, and every plain Markdown export.