web ui components
- 💁 see all the components at https://shiny.e280.org/ 👈
- 🎭 duality: all components are available as web components or sly views
- 👷 built with 🦝sly and 🔥lit
- 🎨 totally customizable, via theme presets, custom themes, css vars and parts
- 🧩 using tabler icons
- 🧑💻 a project by https://e280.org/
- put this in your html
<head><script async src="https://shiny.e280.org/install/aura.bundle.min.js"></script>
- you can swap
aurathere for another theme
- you can swap
- you're ready to put shiny components in your html
<body><shiny-copy text="hello world"></shiny-copy>
- go pick your favorites at https://shiny.e280.org/
- install shiny and friends
npm install @e280/shiny @e280/sly lit
- import stuff
import {dom} from "@e280/sly" import {shiny, themes} from "@e280/shiny"
- prepare the components/views and choose a theme
const {components, views} = shiny({theme: themes.aura})
- (optional) register the components
dom.register(components)
- or use views instead of components
- go shopping at https://shiny.e280.org/
aura— cosmic dreamy seaside nebula vibesplain— bare-bones spartan theme, for diy, buttons look lame
- hey, remember those
viewsyou got from the web app install snippet? - well you can yoink out a view you wanna use
const {ShinyCopy} = views
- then you can use 'em directly in your lit templates
import {html} from "lit" import {dom, view} from "@e280/sly" dom.register({ MyComponent: view.component(use => html` <div> ${ShinyCopy("hello world")} </div> `) })
- put this in your
<head>and you can customize colors and stuff<style> html { --shiny-bg: #111; --shiny-alpha: #def; --shiny-lame: #8888; --shiny-inactive-opacity: 0.5; --shiny-angry: #f50; --shiny-zesty: #cf0; --shiny-happy: #0fa; --shiny-calm: #0af; --shiny-sad: #74f; --shiny-quirky: #f49; } </style>
reward us with github stars
build with us at https://e280.org/ if you're good at dev