@hyperkitxyz/elements

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.

Elements

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.

Installation

To install the elements:

bun add @hyperkitxyz/elements

Usage

Simply 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.