This is the 2nd launch from Shoelace.css. View more
Shoelace 2.0
A forward-thinking library of web components.
Shoelace provides a collection of open source, professionally designed UI components. Use it as an alternative to Bootstrap and similar tools to build websites, applications, and more!
Hi, Product Hunters! 👋
I created Shoelace because I wanted a well-designed, open source library of UI components (buttons, form controls, color pickers, etc.) that works with any framework. You can use Shoelace with React, Vue, Angular — or you can use it with plain HTML+JS!
Think Bootstrap, but with custom elements such as <sl-button> instead of <button type="button" class="btn btn-primary">. Now that we have an API to extend HTML, we can design developer-friendly components that significantly reduce the amount of markup we write.
🥾 Check out the many demos on the project's website for more examples! https://shoelace.style/
This is possible because Shoelace is built with a technology called "web components", which are a standardized set of browser APIs that all modern browsers support.
Web components had a rough start when they were first introduced and many people aren't aware of how much they've matured in recent years. I want Shoelace to show everyone how awesome web components really are.
Shoelace can be loaded via CDN with a simple <script> and <style> tag, yet it's fully customizable. Design tokens let you make high-level style changes, and each component exposes custom properties and CSS parts that can be used to make component-level customizations.
All this can be done in your own stylesheet with pure CSS — no preprocessing with Sass or Less is required! (Even if you load Shoelace via CDN.)
I built Shoelace 2.0 from scratch using the awesome Stencil compiler, a tool that leverages TypeScript and JSX to provide a really fun way of developing components. Check it out at: https://stenciljs.com/
I'm excited to see what you create with it!
⭐️ Oh, and remember Shoelace is open source. If you're on GitHub, feel free give it a star! https://github.com/shoelace-styl...
Here’s a thread that shows how high-level theming works. You can control each color palette by modifying only two CSS vars. (GIF to demonstrate) https://twitter.com/claviska/sta...
You can also customize things at the component level.
Shoelace.css
Spark for Squarespace
Shoelace.css
Shoelace.css