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!
Upvote (1)Share
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.
Upvote (1)Share
@jakkrit_hochoey thank you! Enjoy!
This all look neat and clean, I like those alerts. I'm definitely gonna tie this shoelace. Thanks for making it.
Upvote (1)Share
@roshan_shelar Thanks for checking it out! Be sure to show me what you make! @shoelace_style