Standard Extensible Elements. A web components library that can be styled and extended freely, while pre-providing components in Material 3 design guideline.
npm install @vollowx/seeSEE 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 official website 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 SEE's logic.
- Lightweight: Built on Lit and floating-ui only, ensuring fast performance and small bundle sizes.
- Accessible: Designed with accessibility in mind (using ElementInternals and standard ARIA patterns).
Install SEE using your preferred package manager:
``bashnpm
npm install @vollowx/see
Usage
$3
You can import the entire library or individual components to keep your bundle size small.
javascript
// Import all components
import '@vollowx/see';// OR Import specific components (Recommended)
import '@vollowx/see/m3/button/common-button.js';
import '@vollowx/see/m3/checkbox.js';
`$3
Once imported, use the components just like standard HTML tags.
html
Filled Button
Outlined Button
`$3
SEE 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/see-website or the
folder of this repository.Browser Support
SEE relies on modern web standards like
ElementInternals.- Chromium:
>= 125.0
- Firefox: