https://shoelace.style/

Skip to main content
  Light Dark System
Shoelace
2.12.0
Code Star Follow
Search

  * Getting Started

      + Home
      + Installation
      + Usage
      + Themes
      + Customizing
      + Form Controls
      + Localization
  * Frameworks

      + React
      + Vue
      + Angular
  * Resources

      + Community
      + Help & Support
      + Accessibility
      + Contributing
      + Changelog
  * Components

      + Alert
      + Animated Image
      + Animation
      + Avatar
      + Badge
      + Breadcrumb
      + Breadcrumb Item
      + Button
      + Button Group
      + Card
      + Carousel
      + Carousel Item
      + Checkbox
      + Color Picker
      + Copy Button
      + Details
      + Dialog
      + Divider
      + Drawer
      + Dropdown
      + Format Bytes
      + Format Date
      + Format Number
      + Icon
      + Icon Button
      + Image Comparer
      + Include
      + Input
      + Menu
      + Menu Item
      + Menu Label
      + Mutation Observer
      + Option
      + Popup
      + Progress Bar
      + Progress Ring
      + QR Code
      + Radio
      + Radio Button
      + Radio Group
      + Range
      + Rating
      + Relative Time
      + Resize Observer
      + Select
      + Skeleton
      + Spinner
      + Split Panel
      + Switch
      + Tab
      + Tab Group
      + Tab Panel
      + Tag
      + Textarea
      + Tooltip
      + Tree
      + Tree Item
      + Visually Hidden
  * Design Tokens

      + Typography
      + Color
      + Spacing
      + Elevation
      + Border Radius
      + Transition
      + Z-index
      + More Tokens
  * Tutorials

      + Integrating with Laravel
      + Integrating with NextJS
      + Integrating with Rails

Shoelace

Shoelace: A forward-thinking library of web components.

  * Works with all frameworks 
  * Works with CDNs 
  * Fully customizable with CSS 
  * Includes a dark theme 
  * Built with accessibility in mind [?][?]
  * First-class React support [?][?]
  * Built-in localization 
  * Open source 
  * More awesome than ever Awesome emoji

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

jsDelivr npm License
Discord Twitter Sponsor

Quick Start 

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:

Click me

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

Source

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 Web Components? 

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

Thanks to the popularity of frameworks such as Angular, Vue, and
React, component-driven development has become a part of our every
day lives. Components help us encapsulate styles and behaviors into
reusable building blocks. They make a lot of sense in terms of
design, development, and testing.

Unfortunately, framework-specific components fail us in a number of
ways:

  * You can only use them in the framework they're designed for 
  * Their lifespan is limited to that of the framework's [?]
  * New frameworks/versions can lead to breaking changes, requiring
    substantial effort to update components 

Web components solve these problems. They're supported by all modern
browsers, they're framework-agnostic, and they're part of the
standard, so we know they'll be supported for many years to come.

This is the technology that Shoelace is built on.

What Problem Does This Solve? 

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 the foundational components
you need are right here, ready to be customized for your brand. And
since it's built on web standards, browsers will continue to support
it for many years to come.

Whether you use Shoelace as a starting point for your organization's
design system or for a fun personal project, there's no limit to what
you can do with it.

Browser Support 

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

Chrome Edge Firefox Opera Safari

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. [?]

License 

Shoelace was created in New Hampshire by Cory LaViska. It's available
under the terms of the MIT license.

Attribution 

Special thanks to the following projects and individuals that help
make Shoelace possible.

  * Components are built with Lit
  * Component metadata is generated by the Custom Elements Manifest
    Analyzer
  * Documentation is powered by 11ty
  * CDN services are provided by jsDelivr
  * Color primitives are inspired by Tailwind
  * Icons are courtesy of Bootstrap Icons
  * The homepage illustration is courtesy of unDraw
  * Positioning of dropdowns, tooltips, et al is handled by Floating
    UI
  * Animations are courtesy of animate.css
  * Search is powered by Lunr
  * The Shoelace logo was designed with a single shoelace by Adam K
    Olson