https://github.com/vollowx/see
A web components library that can be styled and extended freely, pre-providing components in Material You.
https://github.com/vollowx/see
design-system lit material material-you typescript web web-components
Last synced: 5 months ago
JSON representation
A web components library that can be styled and extended freely, pre-providing components in Material You.
- Host: GitHub
- URL: https://github.com/vollowx/see
- Owner: vollowx
- License: mit
- Created: 2022-07-12T07:17:36.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2026-01-03T12:31:37.000Z (5 months ago)
- Last Synced: 2026-01-06T05:35:56.314Z (5 months ago)
- Topics: design-system, lit, material, material-you, typescript, web, web-components
- Language: TypeScript
- Homepage: https://see.v9.nz/
- Size: 1.7 MB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Roadmap: ROADMAP.md
Awesome Lists containing this project
README
# SEE (Standard Extensible Elements)
**SEE** is a modern, lightweight [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) library. It provides a set of highly customizable UI components that follow the [Material You](https://m3.material.io/) guidelines out of the box, while being designed for easy extension and restyling.
Visit the [official website](https://see.v9.nz/) 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](https://lit.dev/) and [floating-ui](https://floating-ui.com/) 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:
```bash
# 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.
```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';
```
### Using Components
Once imported, use the components just like standard HTML tags.
```html
Filled Button
Outlined Button
Labelled Checkbox
```
### 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](https://github.com/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](./ROADMAP.md)
- [Contributing Guide](./CONTRIBUTING.md)
- [License](./LICENSE)