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!
Discussion
Would you recommend this product?
3 Reviews5.0/5
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 It is great to remember all the thing that need to be done for a website!
@visafoto_com Yes! There’s so much that goes into them. Shoelace can provide a great foundation to start with!
Long time user of Surreal here. Just wanted to wish you good luck with Shoelace!😀
@rasmusm Thank you! 💙
@claviska Shoelace 2.0 is very nice and very useful web components. This will help web developer to save time. Thank you so much. You're fully awesome.
This all look neat and clean, I like those alerts. I'm definitely gonna tie this shoelace. Thanks for making it.
@roshan_shelar Thanks for checking it out! Be sure to show me what you make! @shoelace_style