Automad Theme UI Kit

A collection of native and headless web components that can be used in Automad themes. No framework required.

• Installation
• Search Component
  • Usage
  • Results Template
• Theme Switcher
  • Usage

Installation

You can install the UI kit using your preferred NPM package manager.

npm i -D automad-theme-ui-kit

Components can be imported separately as needed.

Search Component

The Search component provides an easy way to integrate a search dialog with type-ahead instant feedback.

Usage

Before you can use the component, it must be imported in some way into your theme's JavaScript bundle. For example in your main index.ts you can import it as follows:

import 'automad-theme-ui-kit/Search';

Now you can use the component in your Automad template like this:

<au-search
  src="/_api/public/pagelist"
  context="@{ origUrl }"
  class="kit-search"
  key="k"
>
  <au-search-toggle class="kit-search__toggle" title="Ctrl + k">
    Search
  </au-search-toggle>
  <au-search-dialog class="kit-search__dialog" class:loading="loading">
    <au-search-form class="kit-search__form">
      <input class="kit-search__input" type="search" placeholder="Search ..." />
    </au-search-form>
    <au-search-results class="kit-search__results" class:selected="selected">
      <a href="{{ url }}" class="kit-search__results-item">
        <div class="kit-search__results-title">{{ title }}</div>
        <small class="kit-search__results-description">
          {{ :searchResultsContext | +hero | +main }}
        </small>
      </a>
    </au-search-results>
    <au-search-no-results>Nothing found.</au-search-no-results>
  </au-search-dialog>
</au-search>

The example above shows the structure of components that can be freely style in order to fit the design of your page.

Results Template

You can use the {{ variable }} syntax inside the <au-search-results-each> component in order to access page data for search results. A | character can be used to define fallback fields in case a field has no value.

<small class="kit-search__results-description">
  {{ :searchResultsContext | +hero | +main }}
</small>

Here we look for the :searchResultsContext field which gives us the searched term including surrounding context. When a search dialog opens and before we type anything into the search field, this field will be empty. In that case the +hero field is used and the +main field finally.

Theme Switcher

The ThemeSwitcher component provides a simple toggle for switching between light and dark mode. A user's selections is persisted in the browser's local storage.

Usage

First, import the component into your bundle.

import 'automad-theme-ui-kit/ThemeSwitcher';

Then add it to your Automad template like this:

<au-theme-switcher>
  <au-theme-switcher-dark>Dark</au-theme-switcher-dark>
  <au-theme-switcher-light>Light</au-theme-switcher-light>
</au-theme-switcher>

The switcher will add either the light or the dark class to the main html element according to the user's selection or browser settings.

Labels that indicate the active mode can be defined using the <au-theme-switcher-light> and <au-theme-switcher-dark> components as shown in the above example.

© 2026 Marc Anton Dahmen, MIT license