Getting Started

Kern is a copy-pastable Antlers component library for Statamic. Pick one of the setup paths below, wire Alpine + tw_merge once, then copy any component partial into your project.

Prerequisites

Statamic: 5.x or newer
Tailwind CSS: 4.x
Alpine.js: 3.x
tw_merge for Antlers: marcorieser/tailwind-merge-statamic

Setup Path A: Vite (recommended)

1) Install dependencies

composer require marcorieser/tailwind-merge-statamic
npm install alpinejs @alpinejs/anchor @alpinejs/collapse @alpinejs/focus

Start here to integrate Kern with your Statamic project.

import Alpine from 'alpinejs';
import anchor from '@alpinejs/anchor';
import collapse from '@alpinejs/collapse';
import focus from '@alpinejs/focus';

Alpine.plugin(collapse);
Alpine.plugin(anchor);
Alpine.plugin(focus);

window.Alpine = Alpine;
Alpine.start();

3) Import Kern tokens/styles

Keep your tokens in resources/css/kern.css , then import it from your main stylesheet:

@import './kern.css';

Setup Path B: CDN

Use this if you are prototyping without a build step. You still need the PHP package for tw_merge in Antlers.

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Copy Kern partials and use them directly in Antlers templates. Keep using token-based utility classes so everything stays themeable.

Start here to integrate Kern with your Statamic project.

Kern components read Tailwind theme tokens (for example bg-primary , text-foreground , border-border ). Override the token values in your own @theme block:

@theme {
  --color-primary: oklch(0.55 0.24 262);
  --color-primary-foreground: oklch(0.99 0 0);
  --color-background: oklch(0.98 0 0);
  --radius-default: 0.625rem;
}

Avoid hardcoded color literals in components. Change tokens once, and every component updates.

Start here to integrate Kern with your Statamic project.

Kern ships utility heading classes in kern.css so you can keep semantic tags separate from visual hierarchy.

<h2 class="h1">Visually large, semantically h2</h2>
<h3 class="h4">Visually compact section title</h3>

Recommended base-layer pattern for prose-heavy pages:

@layer base {
  .docs-prose h1 { @apply h2; }
  .docs-prose h2 { @apply h3 mt-10; }
  .docs-prose h3 { @apply h4 mt-8; }
}

Next step

Start with Button or browse all categories from the docs sidebar.