A forward-thinking library of web components for EG Xena.

  • Works with all frameworks 🧩
  • Fully customizable with CSS 🎨
  • Built with accessibility in mind ♿️

Designed by EG Xena.

Cartoon of people working with accounting while standing on a giant laptop.

Quick Start

Add the following code to your page.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@xenabiz/xena-designsystem@development/dist/xenads/xenads.css"
/>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@xenabiz/xena-designsystem@development/dist/xenads/xenads.esm.js"
></script>

Now you have access to all of EG Xena's components! Try adding a button:

<xena-button>Click me</xena-button>

See the installation instructions for more details and other ways to install XenaDS.

New to Web Components?

TL;DR – we finally have a way to create our own HTML elements and use them in any framework we want!

Thanks to the popularity of frameworks such as Angular, Vue, and React, component-driven development has become a part of our every day lives. Components help us encapsulate styles and behaviors into reusable building blocks. They make a lot of sense in terms of design, development, and testing.

Unfortunately, framework-specific components fail us in a number of ways:

  • You can only use them in the framework they're designed for 🔒
  • Their lifespan is limited to that of the framework's ⏳
  • New frameworks/versions can lead to breaking changes, requiring substantial effort to update components 😭

Web components solve these problems. They're supported by all modern browsers, they're framework-agnostic, and they're part of the standard, so we know they'll be supported for many years to come.

This is the technology that XenaDS is built on.

What Problem Does This Solve?

XenaDS provides a collection of professionally designed, every day UI components built on a framework-agnostic technology. Why make a component library that only works with one framework?

With XenaDS, you can:

  • Start building things faster (no need to roll your own buttons)
  • Build multiple apps with different frameworks that all share the same UI

All the foundational components you need are right here. And since it's built on web standards, browsers will continue to support it for many years to come.

Browser Support

XenaDS is tested in the latest two versions of the following browsers.

Chrome Edge Firefox Opera Safari

Critical bug fixes in earlier versions will be addressed based on their severity and impact.

If you need to support IE11 or pre-Chromium Edge, this library isn't for you. Although web components can (to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If you're using XenaDS in such a browser, you're gonna have a bad time. ⛷

Attribution

Special thanks to the following projects and individuals that helped make XenaDS possible.

If you're new to this project, please see the installation instructions.