A Headless Custom Element Library
- Each element is a custom element. So you can use them with a framework, without one, or even directly in a markdown file. These components will work regardless of your project’s architecture.
- drab does not use the shadow DOM, so you can style content within these elements as usual with CSS.
- Each element can be imported, extended, named, and used however you see fit.
- drab has zero dependencies.
scripttag to your document.
- Each element can be configured through HTML attributes, making it possible to use an alternative language for your backend.
- Uses the web animations API for transitions.
- Transitions are disabled for users who prefer reduced motion.
- Extend the
Animateelement to build your own elements.
Find an bug or have an idea? Feel free to create an issue on GitHub.
Since this is an headless library, simple elements like a badge that can be easily created with HTML and CSS are not included. Elements such as a select, or a date picker are also not included in favor of the native HTML elements.
- Clone the repository
- Add or edit the element in
src/package—each element should extend
Animate. Each element has a
index.tsfile with the source code, and then a
define.tsfile where it is imported and called for use with a CDN.
- Add or edit the example in
- Export the element from
bun docto document your element with TypeDoc.
- Add the element as an entry point to
tsup.config.ts, then run
bun packageto build with tsup.