Kern Component Library GitHub

Kern

A copy-pastable Antlers component library for Statamic.

Kern gives you production-ready primitives, forms, and blocks built with Tailwind 4 tokens + Alpine 3. Copy the partials, keep the docblocks, and adapt them to your project.

Primitives (7)

Reusable UI building blocks

Heading, Container, Button, Card, Disclosure, Dropdown, Dialog.

Forms (2)

Consistent field components

Input and Textarea with shared label/help/error structure.

Blocks (1)

Copy-edit templates

Navigation block with desktop dropdowns + mobile dialog/disclosure drawer.

Quick start

  1. 1. Install dependencies: composer require marcorieser/tailwind-merge-statamic and npm install alpinejs @alpinejs/anchor @alpinejs/collapse @alpinejs/focus .
  2. 2. Copy resources/css/kern.css and import it in your main stylesheet.
  3. 3. Pick a component page, copy the source, and adapt it.

Need full setup details (Vite + CDN, theming, typography)? Go to Getting Started.