SEELE is a modern, lightweight Web Components library. It provides a set of highly customizable UI components that follow the Material Design 3 guidelines out of the box, while being designed for easy extension and restyling.
Visit the website of SEELE for documentation and demos.
- Material Design 3: Ready-to-use components following the latest Material guidelines.
- Web Components: Framework-agnostic. Works with vanilla HTML or any framework.
- Extensible: Built to be extended. Create your own design system on top of SEELE's logic.
- Lightweight: Built on Lit and floating-ui only, ensuring fast performance and small bundle sizes.
- Accessible: Designed with accessibility in mind (using
ElementInternalsand standard ARIA patterns).
Install SEELE using your preferred package manager:
# npm
npm install @vollowx/seele
# pnpm
pnpm add @vollowx/seele
# yarn
yarn add @vollowx/seele
# bun
bun add @vollowx/seeleYou can import the entire library or individual components to keep your bundle size small.
// Import all components
import '@vollowx/seele';
// OR Import specific components (Recommended)
import '@vollowx/seele/m3/button/common-button.js';
import '@vollowx/seele/m3/checkbox.js';Once imported, use the components just like standard HTML tags.
<md-button variant="filled">Filled Button</md-button>
<md-button variant="outlined">Outlined Button</md-button>
<label>
<md-checkbox checked></md-checkbox>
Labelled Checkbox
</label>SEELE components use CSS variables for styling. Currently, the global Material Design 3 token variables are not included in the JavaScript bundle.
To style the components correctly, you need to define the necessary CSS variables in your project. You can find reference implementations in vollowx/seele-docs or the dev folder of this repository.
SEELE relies on modern web standards like ElementInternals.
- Chromium:
>= 125.0 - Firefox:
>= 126.0