Web Components built on top of Open Props, utilizing Progressive Enhancement. Minimal JS, maximum compatibility. Works with any front end framework (and without).
Important
This project is still in active development
To use base themes, put the following in your html head element:
<link rel="stylesheet" href="open-comps/dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" href="open-comps/light.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" href="open-comps/main.css" />
This includes all the colors for both light and dark modes as well as all
the normalized styling.
Place the following in your head element:
<link rel="stylesheet" href="open-comps/components.css" />
And either in your head element or main JS file:
import "open-comps"
<link rel="stylesheet" href="open-comps/qr-code.css" />
and
import "open-comps/qr-code.js"
Note this can be included anywhere in your body element as:
<body>
...
<link rel="stylesheet" href="https://esm.sh/[email protected]/components/qr-code/qr-code.css">
<qr-code value="https://stellarand.com"></qr-code>
<qr-code value="https://github.com/andstellar"></qr-code>
<script type="module" src="https://esm.sh/[email protected]/esm/components/qr-code/qr-code.js"></script>
...
</body>
Or using is-land:
<is-land on:visible on:idle>
<qr-code value="https://stellarand.com"></qr-code>
<template data-island>
<link rel="stylesheet" href="https://esm.sh/[email protected]/components/qr-code/qr-code.css">
<script type="module" src="https://esm.sh/[email protected]/esm/components/qr-code/qr-code.js"></script>
</template>
</is-land>
This project uses the following for development: