A suite of headless, unstyled custom elements designed to make building rich, interactive UIs simple and fast. Hyperkit allows you to create dynamic, scalable interfaces with pure HTML & CSS, with no need for writing JavaScript.
Here is a list of the available elements in this package:
- Modal: A versatile modal element for displaying content in an overlay with optional transitions, backdrops, and dismissible actions.
- Popover: A simple popover element for showing contextual information or interactive content in an overlay.
- Detail & Accordion: Expandable content elements, with optional accordion functionality and smooth transitions.
- Select: A flexible select element that integrates with inputs and fires change events on selection.
- Fieldset Repeater: A dynamic form component allowing users to add and remove repeated sets of input fields.
- Sortable List: A drag-and-drop sortable list with optional position tracking.
- Calendar: A calendar element for navigating and selecting dates, with optional input field integration.
- Masked Input: An input element for applying custom masks to user input.
- Transition: An element for animating content visibility with customizable enter and exit classes.
- Arrow Nav: Navigate between focusable elements using up and down arrow keys.
For more details and examples, visit the Hyperkit documentation.
To install the elements:
bun add @hyperkitxyz/elementsSimply import the elements and include them in your HTML to start building dynamic interfaces.
import "@hyperkitxyz/modal"For full documentation and examples, visit hyperkit.xyz.