SEE (Standard Extensible Elements)

SEE is a modern, lightweight Web Components library. It provides a set of highly customizable UI components that follow the Material You guidelines out of the box, while being designed for easy extension and restyling.

Visit the official website for documentation and demos.

Features

• Material You: 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).

Installation

Install SEE using your preferred package manager:

# npm
npm install @vollowx/see

# pnpm
pnpm add @vollowx/see

# yarn
yarn add @vollowx/see

# bun
bun add @vollowx/see

Usage

Importing Components

You can import the entire library or individual components to keep your bundle size small.

// 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';

Using Components

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>

Theming

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 dev folder of this repository.

Browser Support

SEE relies on modern web standards like ElementInternals.

• Chromium: >= 125.0
• Firefox: >= 126.0

Resources

• Roadmap
• Contributing Guide
• License