Components

Farn is a design token system with an optional component layer. Tokens give you the vocabulary; component classes give you a starting point — override the tokens to retheme without touching the classes.

All component classes consume semantic tokens so they adapt to dark/light mode and surface context automatically.

Layout

Cards, section transitions, separators, and quotes — structural components for organising content.

Navigation

Breadcrumbs, accordions, tabs, and pagination — components for orientation and movement.

Actions

Buttons and links — four variants cover the full intent spectrum from confirmation to destructive.

Forms

Input, textarea, and select styles consuming --input-* tokens — no extra classes on native elements.

Data

Badges, tables, code blocks — seven badge variants and full table density tiers.

Status

Spinners, skeleton loaders, and tooltips — visual language for async state and feedback.

Using component classes

All component classes ship in dist/farn-components.css. Load it alongside farn.css or farn-tokens.css.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/farn-theme/dist/farn.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/farn-theme/dist/farn-components.css">

Surfaces and theme context

All components inherit the correct tokens automatically when placed inside a data-surface or data-theme context.

<!-- depth levels (relative to page theme) -->
<section data-surface="base"> … </section>
<section data-surface="layer"> … </section>
<section data-surface="overlay"> … </section>

<!-- forced theme (sets background + all tokens) -->
<section data-theme="dark"> … </section>
<section data-theme="dark" data-surface="layer"> … </section>