A forward-thinking library of net parts.

2024-01-10 14:46:33

Works with all frameworks 🧩
Works with CDNs 🚛
Absolutely customizable with CSS 🎨
Features a darkish theme 🌛
Constructed with accessibility in thoughts ♿️
First-class React support ⚛️
Constructed-in localization 💬
Open supply 😸
More awesome than ever

Cartoon of people assembling components while standing on a giant laptop.

Fast Begin

Add the following code to your page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/shoelace-autoloader.js"></script>

Now you have access to all of Shoelace’s components! Try adding a button:

<sl-button>Click me</sl-button>

This will activate Shoelace’s experimental autoloader, which registers components on the fly as you use
them. To learn more about it, or for other ways to install Shoelace, refer to the
installation instructions.

New to Internet Parts?

TL;DR – we finally have a way to create
our own HTML elements
and use them in any framework we would like!

Due to the recognition of frameworks similar to Angular, Vue, and React, component-driven improvement has
change into part of our on daily basis lives. Parts assist us encapsulate types and behaviors into reusable
constructing blocks. They make numerous sense when it comes to design, improvement, and testing.

Sadly, framework-specific parts fail us in various methods:

You possibly can solely use them within the framework they’re designed for 🔒
Their lifespan is proscribed to that of the framework’s ⏳
New frameworks/variations can result in breaking modifications, requiring substantial effort to replace parts 😭

Internet parts remedy these issues. They’re
supported by all modern browsers, they’re framework-agnostic, and so they’re
part of the standard, so we all know they’ll be supported for a few years to come back.

That is the expertise that Shoelace is constructed on.

What Drawback Does This Clear up?

Shoelace provides a collection of professionally designed, highly customizable UI components built on a
framework agnostic technology. Why spend hundreds of hours (or more) building a design system from scratch?
Why make a component library that only works with one framework?

With Shoelace, you can:

Start building things faster (no need to roll your own buttons)
Build multiple apps with different frameworks that all share the same UI components
Fully customize components to match your existing designs
Incrementally adopt components as needed (no need to ditch your framework)
Upgrade or switch frameworks without rebuilding foundational components

If your organization is looking to build a design system,
Shoelace will save you thousands of dollars. All of the foundational parts you want are proper right here, able to be personalized to your model. And since
it’s constructed on net requirements, browsers will proceed to help it for a few years to come back.

Whether or not you utilize Shoelace as a place to begin to your group’s design system or for a enjoyable private
undertaking, there’s no restrict to what you are able to do with it.

Browser Help

Shoelace is tested in the latest two versions of the following browsers.

Critical bug fixes in earlier versions will be addressed based on their severity and impact.

If you need to support IE11 or pre-Chromium Edge, this library isn’t for you. Although web components can
(to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If
you’re using Shoelace in such a browser, you’re gonna have a bad time. ⛷