sly web ui library
▶️ see all the components at https://shiny.e280.org/ 👈- 👷 built with 🦝sly and 🔥lit
- 🎨 customizable via css vars and shadow parts
- 🧩 using tabler icons
- 🧑💻 a project by https://e280.org/
- install shiny and friends into your project
npm install @e280/shiny @e280/sly lit
- use some shiny views in your lit html
import {html} from "lit" import {dom} from "@e280/sly" import {ShinyButton, ShinyCopy} from "@e280/shiny" dom.render(dom(".demo"), html` <div> example text ${ShinyButton("e280")} ${ShinyCopy("hello world")} </div> `)
- go shopping for more views at https://shiny.e280.org/
- put this in your
<head><style> html { --shiny-bg: #111; --shiny-alpha: #def; --shiny-rounded: 0.5em; --shiny-padding: 0.5em; --shiny-prime: #d068ff; --shiny-code: #3f1; --shiny-link: cyan; --shiny-selection: white; --shiny-selection-bg: #f70; --shiny-lame: #8888; --shiny-angry: #f50; --shiny-zesty: #cf0; --shiny-happy: #0fa; --shiny-calm: #0af; --shiny-sad: #74f; --shiny-quirky: #f49; --shiny-inactive-opacity: 0.5; --shiny-anim-duration: 300ms; } </style>
reward us with github stars
build with us at https://e280.org/ if you're good at dev