Install

Concepts

Elements

Prose

hp-cell

hp-code

hp-copy

hp-hex

hp-latex

hp-visually-hidden

hp-button

hp-checkbox

hp-form

hp-label

hp-radio

hp-select

hp-slider

hp-toggle

hp-toggle-group

hp-badge

hp-tag

hp-progress

hp-spinner

hp-background

hp-cluster

hp-collapsible

hp-demo

hp-grid

hp-scroll-area

hp-separator

hp-sidebar

hp-toolbar

hp-avatar

hp-icon

hp-pixel

hp-link

hp-menubar

hp-navigation-menu

hp-tabs

hp-alert-dialog

hp-context-menu

hp-dialog

hp-dropdown-menu

hp-hover-card

hp-popover

hp-tooltip

hp-banner

hp-toast

hp-tether

hp-module-handle

hp-unfold-list

hp-unfold-overlay

hp-unfold-page

hp-bond

hp-link-node

Palette

Animations

Releases

Hexpunk

Hexagonal-first, wireframe-cyberpunk Lit component design system.

Setup

Drop the canonical four-line block into your page <head>:

<link rel="stylesheet" href="https://esm.sh/@hexpunk/core/tokens.dark.css" /> <link rel="stylesheet" href="https://esm.sh/@hexpunk/core/elements.css" /> <script type="importmap"> { "imports": { "lit": "https://esm.sh/lit", "@hexpunk/core": "https://esm.sh/@hexpunk/core" } } </script> <script type="module"> import "@hexpunk/core"; </script>

Copy setup block

For an npm-style install (build pipelines, bundlers, Astro): see Install.

Get started