Copy, strip, ship.

Production-ready Antlers components for Statamic — built with Tailwind 4 + Alpine 3. Copy the partials, keep the docblocks, adapt to your project.

Get Started Browse Components

Components

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.

How it works

Kern is not an install-and-import library. You copy the source into your project and it becomes your code — like shadcn/ui , but for Antlers + Statamic.

Every component is deliberately over-complete. The Button handles anchors, loading states, icon slots, ARIA — far more than most marketing sites need. That's the point: we show the pattern in full so you can understand it, then strip what you don't need. A landing page button might be ten lines. An app-style button keeps thirty. Both start from the same source.

This is why readability comes first. No abstractions to untangle, no hidden base classes. Just Antlers, Tailwind utilities, and comments that explain the why. If you can read it, you can cut it.

Quick start

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

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