Synergy

Simple, lightweight, and customizable modern CSS-only framework with UI components.

Features

• Very lightweight (<2kb gzip) with no dependencies
• Modular components, use just what you need
• Customizable main color, so it fits your sites design
• 8+ CSS-only components with no JavaScript required

Usage

Import the whole framework (src/style.css), or just the components you need (src/components/*.css + tokens.css + base.css).

Everything lives in cascade layers, so your own styles always win without specificity games:

@layer synergy.tokens, synergy.base, synergy.components, synergy.utilities;

Tokens have defaults in src/tokens.css. Overriding the variables is the whole theming API - override just the ones you need, whether for a dark theme or a brand color:

:root {
	--synergy-accent: #186cd9;
	--synergy-border-radius: .375rem;
	--synergy-focus-ring: var(--synergy-accent);
}

Components

| Component | Markup | |---|---| | Button | <button class="btn btn-primary btn-lg"> | | Input | <div class="input"><input></div> | | Select | <div class="input input-select"><select> | | Picker | <div class="input"><button> | | Field | <div class="field"><label class="field-label">…</label><div class="input"><input></div><p class="desc">…</p></div> | | Form | <form class="form"><div class="field">…</div><div class="row"><button class="btn"></div></form> | | Tabs (CSS only) | <div class="tabs"><label><input type="radio" name="x"><span class="tabs-item">Title</span></label></div> | | Tabs (headless) | <div class="tabs"><div class="tabs-list"><button class="tabs-trigger" data-state="active"><span class="tabs-item">Title</span></button></div></div> | | Checkbox / radio | <label class="checkbox"><input type="checkbox"><span>Label</span></label> | | Toggle | <label class="toggle"><input type="checkbox"></label> | | Pagination | <nav class="pagination"><button class="btn">… | | Utilities | .row, .visually-hidden |

States are exposed as classes (.btn-primary, .input-error, .field-full, .form-tab, .tabs-full, .tabs-boxed, .tabs-seam, .tabs-border) and as aria attributes ([aria-current="page"], [aria-invalid="true"], [aria-disabled="true"]).