shoelace-react

shoelace-react

React wrappers around the shoelace web components.

But wait, doesn't shoelace already ship with "first class" React support?

Yes. Except they don't work for server-side rendering. These wrappers do.

Installation

Add the package as a dependency to your project as normal:

npm install shoelace-react

You must also add Shoelace's theme and module just as if you were using Shoelace directly. Something like this:

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

You can also follow their docs for cherry-picking or bundling to reduce the download required.

Alternatively this package publishes the theme and a minified bundle of shoelace. Because this loads as a normal script it has the side effect of blocking rendering until loaded, but that also reduces the chances of rendering the page before the web component definitions have loaded:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shoelace-react@0.7.0/cdn/themes/light.css" />
<script src="https://cdn.jsdelivr.net/npm/shoelace-react@0.7.0/cdn/shoelace.js"></script>

Usage

Import the component you want and use it as a normal react element. The components should have the same props as the official Shoelace react elements so follow their API docs. If there are differences in behaviour then please file an issue.

import { SlAvatar } from 'shoelace-react';

const App = () => <SlAvatar label="User avatar" />;

You can also import components individually which may allow for a smaller bundle, though this package is fairly small anyway.

import SlButton from 'shoelace-react/components/button';

const App = () => (
  <>
    <SlButton variant="default">Default</SlButton>
  </>
);