IMPORTANT: The elements are work in progress and subject to major (& breaking) changes until the 1.0 release. Until then, we would encourage everyone to use pinned versions and not rely on semantic versioning.
A set of web components built with @webtides/element-js
@webtides/element-library provides a set of pre-built custom elements based on @webtides/element-js with performance and accessibility in mind. They provide a starting point for rapidly building UIs without having to re-implement the same elements over and over again.
See our live Storybook to preview examples of all our elements.
npm i --save @webtides/element-libraryRegister all components at once:
import '@webtides/element-library/all';Register a single component (tree-shakable):
import '@webtides/element-library/accordion/define';Import a component class without registering it:
import { Accordion } from '@webtides/element-library/accordion';Components are headless by default — no theme imported means no opinionated colors, borders, or shadows. To opt in to a coherent look, import one of the shipped themes:
import '@webtides/element-library/themes/default.css'; // neutral, system-feeling
import '@webtides/element-library/themes/high-contrast.css'; // WCAG-AAA-leaningEach theme defines the library's --el-* design-token contract at :root and uses light-dark(), so a single import covers both light and dark color schemes. You can override individual tokens to customize, or ship a full custom theme using the same pattern — see the Theming guide in the live Storybook for the token reference, custom states, and CSS Parts.
| Package | Description | Version |
|---|---|---|
| accordion | Single Accordion element | 0.1.0 |
| accordion-group | Accordion group to hold multiple elements | 0.1.0 |
| amount-field | A simple element to create amount stepping input fields | 0.1.1 |
| button | A themeable button with variants, sizes, icon slots, caret and loading | 0.1.0 |
| carousel | A carousel element that wraps the glide.js library for sliding elements | 0.1.1 |
| checkbox-field | 0.1.1 |
|
| dropdown | A dropdown element | 0.1.0 |
| form-field | 0.1.0 |
|
| input-field | 0.1.0 |
|
| lazy-src | 0.2.0 |
|
| scroll-to | 0.1.0 |
|
| scroll-to-top | 0.1.0 |
|
| select-field | 0.1.0 |
|
| slider | CSS only slider element to slide child elements | 0.4.3 |
| sticky | 0.2.0 |
|
| svg-use | 0.1.0 |
|
| tab-group | A tab group wraps a list of tab-links and tab-panels and shows one at a time | 0.1.0 |
| tab-link | A link that serves as a label for one of the tab panels to display that panel | 0.1.0 |
| tab-panel | The element that contains the content associated with a tab | 0.1.0 |
| textarea-field | 0.1.0 |
|
| transition-classes | An element that applies classes for various stages of a transition | 0.1.0 |
For contributions and development see contributing docs
@webtides/element-library is open-sourced software licensed under the MIT license.