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...
@claviska For what I read so far seems Shoelace requires the use of JS in some shape or form due to the use of custom HTML elements. Is this the case? Maybe I'm missing something or are not getting it at all, haha.
Upvoted though! :)
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
TinyLetter
Shoelace.css
TinyLetter
Shoelace.css