Skip to main content
    NewThe Companion plugin puts the library inside Etch

    Ship client websites in half the time.

    Production-ready sections for the Etch builder. Rename every class to your client's naming in one step, then insert it straight from Etch.

    Start free
    • Free while in beta
    • No credit card
    • Built for Automatic.css v4
    The EtchwpKits panel open inside the Etch builder, listing library sections with search and category filters.
    Built for
    • Etch
    • WordPress
    • Automatic.css v4
    • BEM naming
    • Container queries
    How it works

    From library to live page in three steps.

    1. Choose a section

      Heroes, features, galleries, pricing, FAQs and more, each one a complete section.

    2. Rename once

      Every class, modifier and ARIA reference follows your client's naming.

      • .feature .acme-hero
      • .feature__title .acme-hero__title
      • .feature__grid .acme-hero__grid
      • .feature--boxed .acme-hero--boxed

    3. Insert into Etch

      One click from the panel inside Etch, or paste it in. Cmd+Z undoes it.

      The EtchwpKits panel right after an insert, with the confirmation note and the bottom bar showing where the next insert lands and the classes renamed to the site prefix.
    Companion plugin

    Everything you need, without leaving the canvas.

    Our WordPress plugin puts the whole library inside the Etch builder. Connect your site once, then browse, insert, rename and clone sections without leaving the canvas.

    Explore the plugin

    Free during early access. WordPress 6.5+ and the Etch builder.

    • Review updates, change by change

      See which components you used on a page and which have a new version. Take the changes you want and keep the edits you made.

      The On this page view of the panel, listing each inserted copy with its version, an Update available notice and a copy that is not on the page any more.

    • Your class prefix

      Set it once per site. Every insert arrives renamed and ready to hand over.

      • .acme-hero
      • .acme-hero__title
      • .acme-hero__actions

    • Container queries

      Sections answer to the space they get, so they fit a sidebar, a column or full width.

    • My Kits on every site

      Save your own blocks and CSS snippets once, insert them on any site you connect.

      The My Kits view of the panel, showing saved components in folders and CSS snippets.

    • A Font Manager inside Etch

      Google Fonts served from your own site, matched fallbacks, and site-wide heading and body fonts.

      The Font Manager in the panel: My fonts, with the site's font families shown as cards with live specimens.
    The library

    The sections every client site needs.

    Each one is a complete, responsive section with semantic HTML and readable BEM classes. Named after cities, so you can tell Helsinki from Stockholm at a glance.

    Browse the library
    Under the hood

    Code you would sign off on.

    • Container queries instead of breakpoints

      Each section responds to the space it is given, so it fits a sidebar, a column or full width without re-breaking at 768 or 1440.

    • BEM you can read

      Predictable block, element and modifier names that survive a hand-off to another developer.

    • Automatic.css ready

      Spacing, type and color come from ACSS v4 variables, so sections follow your settings.

    • Semantic and accessible

      Real landmarks, headings in order and labelled sections by default.

    services.css
    .services {
  container-type: inline-size;
  padding-block: var(--section-space-m);
}
.services__grid {
  display: grid;
  gap: var(--space-m);
}
/* reads its container, not the viewport */
@container (min-width: 40rem) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.services__card--featured {
  background: var(--primary-ultra-light);
}
    Pricing

    Free while in beta.

    Every section and every plugin tool is free during the beta. After that, one simple yearly plan.

    • Free

      $0

      • Free sections
      • Copy and paste into Etch
      • Live preview of every section
      Start free

    • Pro

      $0 during the beta

      • Every section, Free and Pro
      • Insert from inside Etch, renamed to your prefix
      • My Kits, Font Manager and update review
      See pricing
    Questions

    Before you start.

    Something else? Contact us.

    Yes. The sections are built for the Etch builder on WordPress. Paste them into Etch as JSON, or insert them with the Companion plugin.

    Start shipping today.

    Pick a section, rename it for your client and have it live on their site before lunch.

    Start freeBrowse the library

    Free while in beta. No credit card.