title: drab - A Headless Custom Element Library
url: https://drab.robino.dev/
hash_url: 2a1235215c277ebb8a0e9acb7ffd91e0
archive_date: 2024-02-03
og_image: 
description: A headless custom element library.
favicon: https://drab.robino.dev/favicon.svg
language: en_US

<p><strong>drab</strong> focuses on providing JavaScript functionality where it’s most useful. Many of the elements are helpful wrappers around browser APIs. Here are some of the features of the library.</p><ul><li>Each element is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements">custom element</a>. So you can use them <a href="http://drab.robino.dev/getting-started/#frameworks">with a framework</a>, without one, or even directly in a markdown file. These components will work <a href="https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/">regardless of your project’s architecture</a>.</li><li><strong>drab</strong> does <em>not</em> use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM">shadow DOM</a>, so you can style content within these elements as usual with CSS.</li><li>Since you provide the HTML, these elements can take advantage of what JavaScript frameworks excel at—creating reusable markup that can be server side rendered.</li><li>Each element can be imported, extended, named, and used however you see fit.</li></ul><ul><li><strong>drab</strong> has zero dependencies.</li></ul><ul><li>Elements can be installed as a package (recommended), or utilized without writing any JavaScript by adding a <code>script</code> tag to your document.</li><li>Each element can be configured through HTML attributes, making it possible to use an alternative language for your backend.</li></ul><ul><li>Uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">web animations API</a> for transitions.</li><li>Transitions are disabled for users who prefer reduced motion.</li><li>Extend the <code>Animate</code> element to build your own elements.</li></ul><p>Find an bug or have an idea? Feel free to create an issue on <a href="https://github.com/rossrobino/drab">GitHub</a>.</p><p>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.</p><p>This library is built with <a href="https://vitejs.dev">Vite</a>, <a href="https://domco.robino.dev">domco</a>, and TypeScript. The package contents are located in <code>src/package</code>.</p><ol><li>Clone the <a href="https://github.com/rossrobino/drab">repository</a></li><li><code>bun i</code></li><li><code>bun dev</code></li></ol><ol><li>Add or edit the element in <code>src/package</code>—each element should extend <code>Base</code> or <code>Animate</code>. Each element has a <code>index.ts</code> file with the source code, and then a <code>define.ts</code> file where it is imported and called for use with a CDN.</li><li>Add or edit the example in <code>src/docs</code>.</li><li>Export the element from <code>src/package/index.ts</code>.</li><li>Run <code>bun doc</code> to document your element with <a href="https://typedoc.org/">TypeDoc</a>.</li><li>Add the element as an entry point to <code>tsup.config.ts</code>, then run <code>bun package</code> to build with <a href="https://tsup.egoist.dev/">tsup</a>.</li></ol>