Hexpunk
InstallConceptsElementsProsehp-cellhp-codehp-copyhp-hexhp-latexhp-visually-hiddenhp-buttonhp-checkboxhp-formhp-labelhp-radiohp-selecthp-sliderhp-togglehp-toggle-grouphp-badgehp-taghp-progresshp-spinnerhp-backgroundhp-clusterhp-collapsiblehp-demohp-gridhp-scroll-areahp-separatorhp-sidebarhp-toolbarhp-avatarhp-iconhp-pixelhp-linkhp-menubarhp-navigation-menuhp-tabshp-alert-dialoghp-context-menuhp-dialoghp-dropdown-menuhp-hover-cardhp-popoverhp-tooltiphp-bannerhp-toasthp-tetherhp-module-handlehp-unfold-listhp-unfold-overlayhp-unfold-pagehp-bondhp-link-nodePaletteAnimationsReleases

Install

Hexpunk ships as @hexpunk/core on npm. Install alongside lit:

bun add @hexpunk/core lit

Then import the elements you want (or the full barrel for everything):

import "@hexpunk/core";

The package side-effects-registers every <hp-*> tag via Lit's @customElement decorator on import.

Tokens

The dark-theme token set ships as @hexpunk/core/tokens.dark.css. Link or import it once at the app root.

esc