Create Stunning Pages with React and Shoelace CSS
Published: 2023-08-25 20:45:55

by [Gabriel Chinedu](https://blog.openreplay.com/authors/gabriel-chinedu)

<blockquote><em>Shoelace CSS is a UI component library that offers a wide range of UX elements. These components have pre-designed visuals, accessibility, and customization options. Shoelace CSS distinguishes itself by using Web Components, allowing integration with any framework. This article will show you all the needed details so you can immediately start using the framework.</em></blockquote>



[Shoelace CSS](https://shoelace.style/) is a lightweight and modular CSS framework that provides developers with a simple and efficient way to style their web applications while focusing on flexibility. Shoelace CSS offers a comprehensive set of customizable components to help create modern and responsive designs. It makes use of modern CSS features like [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) and [Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids), with small file sizes and built-in dark mode support, allowing developers to quickly and simply create more complex layouts. The framework is made to be highly flexible and simple to use.


## Benefits of using Shoelace CSS

Shoelace CSS brings several benefits for web developers, such as:


- Lightweight: Thanks to the lightweight design of Shoelace CSS, web pages load more quickly. To prevent unnecessary bloat, it focuses on providing only the necessary styles and components.
- Responsive: With the framework, it's simple to develop responsive and visually stunning designs because it supports modern CSS features like Flexbox and Grid. Your web application will look modern and professional because the components are made with an updated design.
- Easy-to-Use: Using Shoelace CSS allows developers to save time and effort. Instead of building regular website parts from scratch, you may use the ready-to-use library of Shoelace CSS components and tools. It accelerates the development process by giving ready-made, well-tested components.



## Drawbacks of using Shoelace CSS

While Shoelace CSS offers many benefits, there are also a few potential drawbacks to consider:


- Compared to larger CSS frameworks, Shoelace CSS might have fewer components available. You may need to modify an existing component if Shoelace CSS does not contain the exact component you need, or you may want to use a different CSS framework or library.
- Although Shoelace CSS is user-friendly for beginners, advanced customizations may require a deeper knowledge of CSS and the framework's architecture. You might need extra time and effort to get the required outcomes if your design needs are complicated or you need highly customized components.
- Utilizing Shoelace CSS requires the use of an outside CSS framework. This can give your styles a strong base, but it also means that your project is dependent on the growth and changes of the framework. Future modifications or switching to a new framework may be necessary if the framework's development is poor or does not include the features you want.


## Modern Browser Support for Shoelace CSS

Shoelace CSS is made to be suitable for a wide range of modern web browsers thanks to its full browser support. The framework tries to support the most commonly used browsers, such as:


- Google Chrome
- Mozilla Firefox
- Safari (including iOS Safari)
- Microsoft Edge
- Internet Explorer 11 (with some limitations)






This library is not for you if you need to support IE11 or pre-Chromium Edge. Although supporting older browsers is outside this project's scope, web components can (to a certain extent) be poly filled for them. You will experience problems if you use Shoelace CSS in such a browser.


## Getting Started:

Shoelace CSS is the perfect tool to add to your toolbox if you're a web developer trying to design beautiful and usable website interfaces. In this section, we’ll use React.js to work with Shoelace CSS, and we’ll be working with components and elements which are very simple to use. You don’t need any advanced knowledge to begin this section; simply understanding the fundamentals of React is sufficient to begin using Shoelace. Please remember that you can use Shoelace CSS in standard HTML, which is simple for us to implement.

## Installations

The installation of Shoelace CSS will be discussed first, guiding you through the setup process to ensure integration, whether you prefer using package managers like `npm` or directly including the library via CDN.


### Installing Shoelace CSS via npm

To install Shoelace CSS in your React project using `npm`, it is necessary to have `node.js` installed on your computer. Please follow the steps below to install Shoelace CSS in your project using `npm`:

Open the command prompt or terminal.

Navigate to the directory for your React project.

Run the following command in the terminal to install Shoelace CSS as a dependency:

```shell
npm install @shoelace-style/shoelace
```
   
To give your website a specific appearance, you can choose a theme. In this case, we'll use a bright and colorful light theme, the default. We'll set a base path using a Content Delivery Network (CDN) to easily access icons and other assets. The CDN acts as a file storage space, ensuring quick and efficient delivery to our website. To achieve this, we need to open our `index.js` file and import the following lines of code:


```javascript
import "@shoelace-style/shoelace/dist/themes/light.css";
import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path";
setBasePath("https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/");
```

Once we are done with that, we can start using Shoelace CSS components by importing them into our components, just as in the code example below:


```javascript
import { SlButton } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <div>
     <SlButton>Hello, Click Me</SlButton>
   </div>
 );
};

export default App;
```

Specific components can be imported as needed because Shoelace CSS provides available imports for every React component used in our project. In React, the Shoelace CSS components are imported as `React` components instead of their original custom elements. This is unique to React alone.

The above code will display a basic `button` element on the web browser but won't have any predefined style by default.

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690284402462_Screenshot+96.png)


Shoelace components are made to be very compatible with any possible theming system that may be used in our project. A default light theme, a dark theme, or a custom theme can be made to suit our needs.

The theme you include in your project determines how your components will look by default. For example, if you add the light theme to your project by linking the light theme stylesheet to your `App.js` file:


```javascript
import { SlButton } from "@shoelace-style/shoelace/dist/react";

///light theme stylesheet
import "@shoelace-style/shoelace/dist/themes/light.css";

const App = () => {
 return (
   <div>
     <SlButton>Hello, Click Me</SlButton>
   </div>
 );
};
export default App;
```

The light theme will define the initial style of your components. The light theme is also regarded as the default style theme.

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690284528965_Screenshot+97.png)


If you choose to use the dark theme instead, the component will automatically have a specific style matching your selected dark theme.

To apply the dark theme in your project, you must activate it after importing the stylesheet. Add the class name `sl-theme-dark` to the parent div inside the `App.js` file to do this. This tells the application to use the dark theme's style.


```javascript
import { SlButton } from "@shoelace-style/shoelace/dist/react";

///Dark theme stylesheet
import "@shoelace-style/shoelace/dist/themes/dark.css";

const App = () => {
 return (
   <div className="sl-theme-dark">
     <SlButton>Hello, Click Me</SlButton>
   </div>
 );
};
export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690284592500_Screenshot+98.png)


By now, you must have understood how to add Shoelace CSS to your React project using `npm` and using the built-in themes.

Let's explore another method of adding Shoelace CSS to our React application.


### CDN Usage:

A CDN, or Content Delivery Network, is a special network of servers that helps deliver website content to people quickly. Shoelace CSS offers a CDN option, which means you can easily use Shoelace CSS in your project without needing to download or install anything.

In other to use Shoelace CSS CDN in your React project, the following steps below should be followed:

Create a new React project or navigate to the directory of an existing project.

Open the `index.html` file, which is located in your React project's `public` folder.

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1689118139985_Screenshot+50.png)


In the `<head></head>` section of the `index.html` file, add the following link tag to include Shoelace CSS from the CDN:


```htmlmixed
<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/themes/light.css"
/>

<script
 type="module"
 src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/shoelace-autoloader.js"
></script>
```

After that, save the link tag inside the `index.html` file.

We can now return to our `App.js` file to import Shoelace CSS components. Before we start making use of Shoelace CSS components in our `React` project, let's note that the method for importing Shoelace CSS components using `CDN` will be `<sl->`:


```javascript
const App = () => {
 return (
   <div>
     <sl-button>Button, click me</sl-button>
   </div>
 );
};
export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690284766707_Screenshot+99.png)


From the above result, we can see our button component work just fine but with a different approach. Now that we know how to install Shoelace CSS in our React project, it is high time we begin implementing Shoelace CSS styles to various elements.


## Design Tokens

Design Tokens in Shoelace CSS are variables that store design-related values, such as colors, spacing, typography, and more. They provide a centralized and standardized approach to managing and customizing visual styles in the CSS framework. Here are some examples of Design Tokens in Shoelace CSS and how to use them:


## Typography

Shoelace CSS offers powerful [Typography](https://shoelace.style/tokens/typography) components for web design. You can apply various font styles, sizes, and alignments to your web content, ensuring consistent and beautiful typography throughout your website. In this section, we'll explore Shoelace CSS Typography components and learn how to create professional-looking text for your web pages. Let's dive into the world of Shoelace CSS Typography and enhance your website's visual impact.

Example


```javascript
import { SlCard } from "@shoelace-style/shoelace/dist/react";

const Style = `
     .heading1 {
       font-size: var(--sl-font-size-x-large );
       font-family: var(--sl-font-serif);
       letter-spacing: var(--sl-letter-spacing-looser);
       line-height: var(--sl-line-height-looser );
     }
   
   `;

const App = () => {
 return (
   <div>
     <br />
     <SlCard className="heading1">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </SlCard>
     <style>{Style}</style>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690284849730_Screenshot+100.png)

## Color

Color plays a vital role in web design, and Shoelace CSS offers [Color Tokens](https://shoelace.style/tokens/color) to ensure consistent color usage across your application. Shoelace CSS provides palettes for theme colors and primitives, serving as a solid base for your design system. These `Color Tokens` are accessed through the `--sl-color-{name}-{n`} CSS custom property, where `name` represents the palette name and `n` indicates the desired numeric value.

Example


```javascript
import { SlButton } from "@shoelace-style/shoelace/dist/react";

const Style = `
   .first-button::part(base) {
     background: var(--sl-color-warning-100);
   }
   .first-button::part(label) {
     color: var(--sl-color-success-500);
   }
   .second-button::part(base) {
     background: var(--sl-color-neutral-400);
   }
   .second-button::part(label) {
     color: var(--sl-color-neutral-100);
   }
   `;

const App = () => {
 return (
   <div>
     <SlButton className="first-button">Hello, Click Me</SlButton>
     <br />
     <br />
     <SlButton className="second-button">Hello, Click Me</SlButton>
     <style>{Style}</style>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690284922640_Screenshot+101.png)

## Spacing

Spacing is an important aspect of web design that helps create balance and organization in a user interface. In Shoelace CSS, the [Spacing](https://shoelace.style/tokens/spacing) token provides an easy way to manage spacing between elements. By applying `Spacing` classes, you can control the `margin` and `padding` to achieve the desired spacing effect. Whether you want consistent spacing between components or visual separation, the `Spacing` utility class in Shoelace CSS offers a simple solution. With predefined spacing options, you can easily adjust the spacing in your web application for a visually appealing layout.

Example


```javascript
import { SlCard } from "@shoelace-style/shoelace/dist/react";

const Style = `
     .content {
       word-spacing: var(--sl-spacing-x-large  );
     }
   
   `;

const App = () => {
 return (
   <div>
     <SlCard className="content">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique
       quam et malesuada posuere. Suspendisse auctor ullamcorper dui, ac
       ultrices libero molestie in. Vestibulum feugiat magna non justo
       consectetur, a aliquam velit ultricies. Nulla facilisi. Vivamus
       interdum, lorem vel consectetur placerat, sem felis vulputate orci, eget
       ultrices sapien lorem vel mauris. Cras dignissim tortor eu odio
       eleifend, vel eleifend mauris aliquam. Phasellus vitae lorem mi.
       Suspendisse potenti. Donec feugiat mauris sed risus dignissim congue.
       Sed ullamcorper tellus a congue consequat. Proin efficitur rhoncus leo a
       ultricies. Nam a dui tellus. Nunc vehicula velit id semper maximus. Sed
       ut sollicitudin enim. Aenean vitae erat vel enim aliquam fringilla a
       eget nulla.
     </SlCard>
     <style>{Style}</style>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690285223906_Screenshot+102.png)

## Elevation

[Elevation](https://shoelace.style/tokens/elevation) is a feature in Shoelace CSS that allows you to add visual depth and prominence to elements on your website. By applying elevation, you can create a sense of layering and hierarchy, making certain elements stand out and appear more interactive. This feature is particularly useful when designing user interfaces that require a clear distinction between different components or when you want to highlight important elements. With Shoelace CSS `Elevation` classes, you can easily add depth and enhance the visual appeal of your website, creating a more engaging and intuitive user experience.

Example


```javascript
import { SlCard } from "@shoelace-style/shoelace/dist/react";

const Style = `
     .card {
       box-shadow: var(--sl-shadow-x-large);
     }
   `;
const App = () => {
 return (
   <div>
     <SlCard className="card">
       This item has elevation if you look closely.
     </SlCard>
     <style>{Style}</style>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1688934918872_Screenshot+40.png)



## Border Radius

[Border Radius](https://shoelace.style/tokens/border-radius) tokens provide a way to soften sharp edges and create a smoother, rounded appearance. By applying border-radius, you can give a softer and more visually appealing look to buttons, cards, containers, and other components. The `Border Radius` token provides predefined values that you can use to achieve consistent and harmonious rounded corners across your design.

Example


```javascript
const Style = `
   
   :root {
     --border-radius-1: var(--sl-border-radius-x-large);
     --border-radius-2: var(--sl-border-radius-large);  
   } 
   .border_1 {
     border-radius: var(--border-radius-1);
     border: 1px solid black;
     padding: 1rem;
   }
   .border_2 {
     border-radius: var(--border-radius-2);
     border: 1px solid black;
     padding: 1rem;
   }
   `;

const App = () => {
 return (
   <div>
     <div className="border_1">Border radius applied.</div>
     <br />
     <div className="border_2">Border radius applied.</div>
     <style>{Style}</style>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690285422637_Screenshot+103.png)



## Transition

Shoelace CSS [Transition](https://shoelace.style/tokens/transition) token adds smooth and animated effects to your web elements. Customize the duration, timing function, and properties of transitions easily. Whether a fade-in effect or a slide-out animation, the Shoelace CSS `Transition` token brings your elements to life with flexibility and visual appeal.

Example:


```javascript
const App = () => {
 const Style = `
     p {
      display: inline;
      color: black;
      border: 1px solid black;
      padding: 20px;
    
      background: linear-gradient(to left, white 50%, salmon 50%) right;
      background-size: 200%;
      transition: var(--sl-transition-x-slow);
    }
    
     p:hover {
      background-position: left;
    }
    `;
 return (
   <>
     <p>Hover me</p>
     <style>{Style}</style>
   </>
 );
};
export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690215513333_ezgif.com-crop+10.gif)



## Z-index

The [Z-index](https://shoelace.style/tokens/z-index) token in Shoelace CSS controls the stacking order of elements on a web page. It ensures a logical arrangement and prevents overlapping of components like dropdowns, dialog boxes, and tooltips. With the `Z-index` token, you can create a visually appealing and well-organized user interface.

Example:


```javascript
const App = () => {
 const Style = `
   
   .container {
     position: relative;
   }
   .element {
     position: absolute;
     width: 200px;
     height: 200px;
     background-color: #f1f1f1;
     border: 1px solid #ddd;
   }
   .element1 {
     z-index: var(--sl-z-index-dialog);
   }
   .element2 {
     z-index: var(--sl-z-index-dropdown);
   }
   .element3 {
     z-index: var(--sl-z-index-tooltip);
   }
   `;
 return (
   <div class="container">
     <div class="element element1">Element 1</div>
     <div class="element element2">Element 2</div>
     <div class="element element3">Element 3</div>
     <style>{Style}</style>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690285833591_Screenshot+104.png)


In the above example, we have three elements (Element 1, Element 2, and Element 3) stacked on top of each other within a container. We control their stacking order by assigning different `Z-index` tokens to each element. Element 1 has the lowest `Z-index` token, followed by Element 2, and Element 3 has the highest `Z-index` token. This arrangement determines which element appears in front or behind the others.


## Components

Shoelace CSS provides a vast collection of customizable and reusable UI components for building user interfaces. These pre-designed components' UI library help create stylish and responsive web designs and can be easily customized to match the desired style of your application. We should specify the component whenever we want to import a component for Shoelace CSS.

Below are some of the components offered by Shoelace CSS:


## Alert

The [Alert](https://shoelace.style/components/alert) component in Shoelace CSS is a useful and flexible user interface element that shows important messages or alerts to users. The `Alert` component is designed to grab your attention and can be changed to suit different needs. To use the `Alert` component in our `React` project, we must import it from Shoelace CSS and add an attribute name `open` so the `Alert` becomes visible. Here's an example of how to do it:


```javascript
import { SlAlert } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <div>
     <SlAlert open>This is just a default alert</SlAlert>
   </div>
 );
};
export default App;
```

The `open` attribute is set to true by default, showing the alert immediately. However, it can be changed to false, hiding the alert initially until triggered by user actions like clicking a button. This flexibility of this attribute allows developers to control the alert's visibility based on the desired user experience.

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690285947994_Screenshot+105.png)


The code example above demonstrates a basic `Alert` component that can be customized to modify its content and icons. In Shoelace CSS, we can alter the default appearance of the `Alert` by using something called `variant`. This refers to different styles or looks available for a specific component. It's similar to having different color schemes for different parts of the Shoelace CSS components.

For instance, the `Alert` component in Shoelace CSS offers variants such as `success`, `warning`, `danger`, `neutral` etc. These variants provide unique colors or icons to represent different types of messages. By utilizing variants, we can make the `Alert` component stand out or suit a specific purpose. It's a straightforward and effective way to enhance a component's visual appearance and uniqueness without altering the overall design.

Here is a code sample that showcases some `Alert` variants with custom icons from Shoelace CSS and demonstrates how they display various messages:


```javascript
import { SlAlert, SlIcon } from "@shoelace-style/shoelace/dist/react";
const App = () => (
 <div>
   <SlAlert variant="success" open>
     <SlIcon slot="icon" name="info-circle" />
     <strong>Your changes have been saved</strong>
     <br />
     You can now safely close the application.
   </SlAlert>
   <br />
   <SlAlert variant="warning" open>
     <SlIcon slot="icon" name="exclamation-triangle" />
     <strong>Your session has ended</strong>
     <br />
     Please login again to continue.
   </SlAlert>
   <br />
   <SlAlert variant="danger" open>
     <SlIcon slot="icon" name="exclamation-octagon" />
     <strong>Your account has been disabled</strong>
     <br />
     We detected suspicious activity!
   </SlAlert>
   <br />
   <SlAlert variant="primary" open>
     <SlIcon slot="icon" name="gear" />
     <strong>Unable to communicate with server</strong>
     <br />
     Please try again later
   </SlAlert>
 </div>
);
export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690286065437_Screenshot+106.png)


Now that we have added the `Alert` component to our React project, we must explore another interesting component in Shoelace CSS. Let’s dive into it and see how it enhances our application with new features.


## Avatar

The [Avatar](https://shoelace.style/components/avatar) component in Shoelace CSS displays user profile pictures or icons. It comes with different size, shape, and dynamic rendering options, making it look stylish and fancy. It can handle fallbacks to ensure things always look good. By default, the `Avatar` component displays a generic icon. However, you can customize avatars by adding your own icons, initials, or images. Including a `label` attribute for assistive devices is important to ensure accessibility.

By default, the `Avatar` component displays a common icon. However, you can customize avatars by adding your own icons, initials, or images.

If you want to use an image as the avatar, you can specify the `image` and `label` attributes. This image will be displayed instead of initials or icons, giving a more personalized touch to the avatar. Additionally, you can improve performance by lazily loading the avatar image using the `loading` attribute set to `lazy`.

Below is a code sample that explores some exciting features of the `Avatar` component and how it enhances the visual representation of individuals or users in our applications.


```javascript
import { SlAvatar } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <div>
     <SlAvatar
       image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ12AfIQBvSlJTmZA 7b7Q6IOqZNDbPdsyYC_g&usqp=CAU"
       label="Avatar of a brown puppy sitting on grass"
       loading="lazy"
     />
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690286558002_Screenshot+107.png)


If you don't have a specific image to use for an avatar, you can make it more unique and personal by setting the `initials` attribute. Instead of using an icon, the `initials` attribute allows you to display personalized letters as the avatar. This adds a touch of personalization even when an image is not available.

The code sample below demonstrates how initials can be used for the avatar:


```javascript
import { SlAvatar } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <div>
     <SlAvatar initials="PIC" label="Avatar with initials: PIC" />
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690286682602_Screenshot+108.png)


It will display a default icon if you don't set an image or initials for the `Avatar`. By using the `icon slot`, you can customize the default icon to suit your preferences, as seen in the code sample below:


```javascript
import { SlAvatar, SlIcon } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <div className="avatar_group">
     <SlAvatar label="Avatar with a book icon">
       <SlIcon slot="icon" name="book" />
     </SlAvatar>

     <SlAvatar label="Avatar with a cloud icon">
       <SlIcon slot="icon" name="cloud" />
     </SlAvatar>

     <SlAvatar label="Avatar with a gear icon">
       <SlIcon slot="icon" name="gear" />
     </SlAvatar>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690286790984_Screenshot+109.png)



## Badge

The [Badge](https://shoelace.style/components/badge) component allows you to display information, notifications, or status indicators visually appealingly. It's a simple and effective tool to highlight important content and enhance the user experience in your web application. With customizable colors, sizes, and text, the `Badge` component offers flexibility to match the design and purpose of your project. Whether you want to display unread messages, indicate product availability, or draw attention to updates, the `Badge` component is a powerful addition to your project.

In the code sample below, we import the `Badge` component from Shoelace CSS and set the `variant` attribute to change the look of our `Badge` components.


```javascript
import { SlBadge } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <div>
     <SlBadge variant="primary">Primary</SlBadge>
     <SlBadge variant="success">Success</SlBadge>
     <SlBadge variant="neutral">Neutral</SlBadge>
     <SlBadge variant="warning">Warning</SlBadge>
     <SlBadge variant="danger">Danger</SlBadge>
   </div>
 );
};

export default App;
```

The `Badge` component can be customized to have rounded edges by adding the `pill` attribute as shown in the code below:


```javascript
import { SlBadge } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <div>
     <SlBadge variant="warning" pill>
       Warning
     </SlBadge>

     <SlBadge variant="neutral" pill>
       Neutral
     </SlBadge>
   </div>
 );
};
export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690287820749_Screenshot+111.png)


<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>



## Breadcrumb

The [Breadcrumb](https://shoelace.style/components/breadcrumb) component in Shoelace CSS shows the user's current location within a website or app. It consists of clickable links representing different sections or pages, allowing easy navigation. Developers can customize its appearance and separator symbol to match the design. Using the `Breadcrumb` component improves navigation and enhances the user experience. Below is a `Breadcrumb` component containing a group of links so users can easily navigate a website:


```javascript
import {
 SlBreadcrumb,
 SlBreadcrumbItem,
} from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <div>
     <SlBreadcrumb>
       <SlBreadcrumbItem>Home</SlBreadcrumbItem>
       <SlBreadcrumbItem>Shop</SlBreadcrumbItem>
       <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
       <SlBreadcrumbItem>Men's Clothing</SlBreadcrumbItem>
       <SlBreadcrumbItem>Shirts & Tops</SlBreadcrumbItem>
     </SlBreadcrumb>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690287920424_Screenshot+112.png)

## Button

In this section, we'll use the Shoelace CSS [Button](https://shoelace.style/components/button) component to make a responsive design, and this component allows users to trigger actions in a web application.  It offers customization options for appearance, accessibility features, and event-handling capabilities.

The following code below shows how the `Button` component can be customized to create different stunning responsive output:


```javascript
import { SlButton } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <div className="button_group">
     <SlButton variant="default" size="medium" pill>
       Default
     </SlButton>

     <SlButton variant="success" size="large">
       Large Success
     </SlButton>

     <SlButton variant="danger" size="small">
       Small Danger
     </SlButton>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690288069036_Screenshot+113.png)

## Button Group

The [Button Group](https://shoelace.style/components/button-group) component in Shoelace CSS is a helpful feature that helps you organize and group buttons together clearly. It allows you to create horizontal or vertical groups of buttons, customize their appearance, and control how they work when clicked. Using the `Button Group` component, you can make your buttons look better and easier to use, making your app more enjoyable for everyone. Here’s an example of how the `Button Group` component can be used in our React application:


```javascript
import { SlButton, SlButtonGroup } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <div>
     <SlButtonGroup>
       <SlButton size="small" variant="warning" pill>
         Top
       </SlButton>
     </SlButtonGroup>

     <br />

     <SlButtonGroup>
       <SlButton size="medium" variant="danger">
         Center
       </SlButton>
     </SlButtonGroup>

     <br />

     <SlButtonGroup>
       <SlButton size="large" variant="success">
         Bottom
       </SlButton>
     </SlButtonGroup>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690288272210_Screenshot+114.png)

## Card

The [Card](https://shoelace.style/components/card) component is a useful tool for presenting information in a neat and attractive way. It allows you to customize titles, content, images, and buttons to create attractive cards. With its responsive design and interactive features, whether you are building a blog, e-commerce site, or any application that requires content grouping, the `Card` component can be used to group related subjects in a container.

In our example project, we will create a `Card` component that includes a button, an image, and a book icon.


```javascript
import { SlButton, SlCard, SlIcon } from "@shoelace-style/shoelace/dist/react";

const Style = `
     .card {
       max-width: 300px;
     }
     .card small {
       color: var(--sl-color-success-500);
     }
     .card [slot="footer"] {
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
   `;

const App = () => {
 return (
   <div>
     <SlCard className="card">
       <img
         slot="image"
         src="https://images.unsplash.com/photo-1516590914727-51e55df118d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8ZmVubmVjJTIwZm94fGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60"
         alt="Wild life photography of snow fox."
       />
       <strong>Snow Fox</strong>
       <br />
       Captivating Snow Fox Wildlife Photography Caught on Camera
       <br />
       <small>8 weeks old</small>
       <div slot="footer">
         <SlButton variant="danger" pill>
           More info
         </SlButton>
         <SlIcon slot="icon" name="book"></SlIcon>
       </div>
     </SlCard>
     <style>{Style}</style>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690236895729_Screenshot+92.png)


The code above imports three components from the Shoelace CSS library: `SlButton`, `SlCard`, and `SlIcon`. It also defines some CSS styles using the `Style` variable. In the `App` component, a `SlCard` component is rendered. Inside the card component, there is an image of a snow fox, a title wrapped in a `strong` tag, a captivating description, and a small text indicating the age of the fox. At the bottom of the card, there is a footer section containing a `SlButton` component with the label "More Info" and a `SlIcon` component with the "book" icon.



## Checkbox

The [Checkbox](https://shoelace.style/components/checkbox) component in Shoelace CSS allows users to make selections or indicate choices. It consists of a small box that can be checked or unchecked, along with a label describing the option. With Shoelace CSS, we can change how the `Checkbox` looks, works, and can be accessed. The `Checkbox` component in Shoelace CSS is designed to make it easy for everyone to interact with forms and settings. It ensures that users can effectively use and understand its purpose. Whether you're choosing options or indicating choices,  the `Checkbox` offers flexibility to meet different design needs and make the user experience more enjoyable.

The following code shows a default `Checkbox` component and how we can use it in our React application:


```javascript
import { SlCheckbox } from "@shoelace-style/shoelace/dist/react";
   
   const App = () => {
     return (
       <div>
         <SlCheckbox>Default Checkbox</SlCheckbox>
         <br />
         <br /> 
         <SlCheckbox checked>Activated Checkbox</SlCheckbox>
       </div>
     );
   };
   export default App;
```

We can activate the Checkbox by using the `checked` attribute.

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690237707456_ezgif.com-crop+12.gif)

## Color Picker

The [Color Picker](https://shoelace.style/components/color-picker) component in Shoelace CSS is a tool that helps you choose and adjust colors and can be used as a `self-closing`  element. It has a user-friendly design and can be customized to fit different needs. Whether you're designing graphics, customizing themes, or working with colors in any way, the `Color Picker` makes it easy and fun to select the perfect shades. In the code sample below, we can see how we use the `Color Picker` component to style our React application:


```javascript
import { SlColorPicker, SlButton } from "@shoelace-style/shoelace/dist/react";
import { useState } from "react";

const App = () => {
 const [onChange, SetOnChange] = useState(false);
 const clickHandler = () => {
   SetOnChange(true);
 };
 return (
   <div>
     <SlButton onClick={clickHandler}>Set Color</SlButton>
     <br />
     <br />
     {onChange && (
       <SlColorPicker
         value="#4a90e2"
         label="click to select a color"
       ></SlColorPicker>
     )}
     <br />
     <br />
     <SlButton
       onClick={() => {
         SetOnChange(false);
       }}
     >
       Close Color
     </SlButton>
   </div>
 );
};
export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690273475856_ezgif.com-crop+13.gif)


The above code shows a Shoelace CSS `Button` component that displays the `Color Picker` when the `Set Color` button is clicked and removes it from the UI when the `Close Color` button is clicked.


## Details/Accordion

The Shoelace CSS [Details](https://shoelace.style/components/details) component is a special element that helps display extra information on a webpage in a neat and organized way. It allows you to create collapsible sections, which means you can hide or show content with just a click. This is useful for things like FAQs, tutorials, or any time you want to provide more details. It's a simple and user-friendly way to improve your website and make it more interactive for everyone.

Below is a code illustration of how to set up and use the Shoelace CSS `Details` component in our React project:


```javascript
import { SlDetails } from "@shoelace-style/shoelace/dist/react";

const App = () => (
 <div>
   <SlDetails summary="Learn More">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
     veniam.
   </SlDetails>

   <br />

   <SlDetails summary="Learn More">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
     veniam.
   </SlDetails>

   <br />

   <SlDetails summary="Learn More">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
     veniam.
   </SlDetails>
 </div>
);

export default App;
```

The `summary` attribute can be used to set a default value for our `Details` component.

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690273970316_ezgif.com-crop+14.gif)



## Divider

The [Divider](https://shoelace.style/components/divider) component in Shoelace CSS is a valuable tool for creating visually appealing and well-structured interfaces. It helps to separate different sections or elements clearly and organized. Whether you want to distinguish content sections, create visual breaks, or improve the overall layout of your interface, the `Divider` component offers a simple solution. You can customize its color, thickness, style, and alignment to match your design preferences. With this versatile and user-friendly component, you can enhance the visual hierarchy and improve the user experience of your interface.

Below is a brief example showing the `Divider` component in our React application:


```javascript
import { SlDivider } from "@shoelace-style/shoelace/dist/react";

const App = () => (
 <div>
   <SlDivider />
   First Section
   <SlDivider style={{ "--width": "5px" }} />
   Second Section
   <SlDivider style={{ "--width": "5px" }} />
   Third Section
   <SlDivider style={{ "--width": "2px" }} />
 </div>
);

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690274152145_Screenshot+93.png)


The above code shows the Shoelace CSS `Divider` component being used with some custom styles to separate different parts of the web page, making it look more clear and more organized.


## Icon

The [Icon](https://shoelace.style/components/icon) component s a powerful tool that lets you easily add attractive symbols to your website or application. These symbols help users understand and navigate your interface with ease. With a wide range of ready-to-use icons available, you can effortlessly enhance the look of your design. The `Icon` component allows you to customize the size, color, and style of the icons, making it simple to match them with your overall design. In this section, we’ll take a look at some of the icons Shoelace CSS provides us with.

The code below displays a list of icons that are ready to use in our React application. By setting the `name` attribute, we can easily include these icons in our design and make it responsive:


```javascript
import { SlIcon } from "@shoelace-style/shoelace/dist/react";

const App = () => (
 <div>
   <div>
     <SlIcon name="exclamation-triangle"></SlIcon>
     <SlIcon name="archive"></SlIcon>
     <SlIcon name="battery-charging"></SlIcon>
     <SlIcon name="bell"></SlIcon>
     <SlIcon name="clock"></SlIcon>
     <SlIcon name="cloud"></SlIcon>
     <br />
     <SlIcon name="download"></SlIcon>
     <SlIcon name="file-earmark"></SlIcon>
     <SlIcon name="flag"></SlIcon>
     <SlIcon name="heart"></SlIcon>
     <SlIcon name="image"></SlIcon>
     <SlIcon name="lightning"></SlIcon>
     <br />
     <SlIcon name="mic"></SlIcon>
     <SlIcon name="search"></SlIcon>
     <SlIcon name="star"></SlIcon>
     <SlIcon name="trash"></SlIcon>
     <SlIcon name="exclamation-triangle" />
     <SlIcon name="zoom-out" />
     <br />
     <SlIcon name="zoom-in" />
     <SlIcon name="yin-yang" />
     <SlIcon name="xbox" />
     <SlIcon name="x" />
     <SlIcon name="wrench-adjustable-circle-fill" />
     <SlIcon name="wordpress" />
     <br />
     <SlIcon name="x-diamond-fill" />
     <SlIcon name="wind" />
     <SlIcon name="window-dash" />
     <SlIcon name="window" />
     <SlIcon name="wikipedia" />
     <SlIcon name="wifi" />
     <br />
     <SlIcon name="wifi-off" />
     <SlIcon name="whatsapp" />
     <SlIcon name="wechat" />
     <SlIcon name="webcam-fill" />
     <SlIcon name="wallet2" />
     <SlIcon name="watch" />
     <br />
     <SlIcon name="vr" />
     <SlIcon name="volume-up-fill" />
     <SlIcon name="voicemail" />
     <SlIcon name="usb-plug" />
     <SlIcon name="vinyl-fill" />
     <SlIcon name="valentine2" />
     <br />
     <SlIcon name="usb-drive-fill" />
     <SlIcon name="universal-access-circle" />
     <SlIcon name="unlock" />
     <SlIcon name="upc-scan" />
     <SlIcon name="twitter" />
     <SlIcon name="tsunami" />
     <br />
     <SlIcon name="type-h3" />
     <SlIcon name="truck-flatbed" />
     <SlIcon name="train-front-fill" />
     <SlIcon name="tornado" />
     <SlIcon name="thermometer-low" />
     <SlIcon name="telephone-x" />
   </div>
 </div>
);

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690274793468_Screenshot+95.png)



## Icon Button

The [Icon Button](https://shoelace.style/components/icon-button) component is an easy-to-use tool that allows you to add interactive icons to your website or app. These buttons combine the functions of a regular button with attractive icons. You can choose from a variety of pre-designed icons and customize the size, color, and style of the icons to match your design. To use the `Icon Button` component, we first need to import `SlIconButton` from Shoelace CSS and pass in a `name` and a `label` attribute. The `name` attribute serves as the icon name, and the `label` attribute provides a text description or name for the icon, as seen in the code below:


```javascript
import { SlIconButton } from "@shoelace-style/shoelace/dist/react";

const App = () => (
 <div>
   <SlIconButton name="gear" label="Settings" />
   <SlIconButton name="book" label="Book" />
   <SlIconButton name="pen" label="Edit" />
   <SlIconButton name="zoom-in" label="zoom-in" />
   <SlIconButton name="zoom-out" label="zoom-out" />
 </div>
);
export default App;

```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690288634377_ezgif.com-video-to-gif+7.gif)


To give users more information, we can use a special tool called `SlTooltip` from Shoelace CSS. It works by wrapping it around a `SlIconButton`. When a user hovers over or interacts with the `Icon Button`, a small box called a `tooltip` appears. Inside the `tooltip`, we can use the `content` attribute to include specific information or descriptions that will be displayed when the user hovers over or interacts with the `Icon Button`. This helps users understand what will happen when they click or interact with the button.

Below is a code example of how the `SlTooltip` component works when used as a wrapper for the `SlIconButton` component:


```javascript
import { SlIconButton, SlTooltip } from "@shoelace-style/shoelace/dist/react";

const App = () => (
 <div>
   <SlTooltip content="Settings">
     <SlIconButton name="gear" label="Settings" />
   </SlTooltip>
   <SlTooltip content="Book">
     <SlIconButton name="book" label="Book" />
   </SlTooltip>
   <SlTooltip content="Edit">
     <SlIconButton name="pen" label="Edit" />
   </SlTooltip>
   <SlTooltip content="Zoom-In">
     <SlIconButton name="zoom-in" label="Zoom-In" />
   </SlTooltip>
   <SlTooltip content="Zoom-Out">
     <SlIconButton name="zoom-out" label="Zoom-Out" />
   </SlTooltip>
 </div>
);

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690288831464_ezgif.com-video-to-gif+8.gif)



## Advanced Components

Shoelace CSS Advanced Components take web interfaces to the next level. With advanced features and customization options, these components empower you to build impressive web applications effortlessly. From dynamic `modals` to interactive `forms` and `tables`, they offer a wide range of functionalities. In this section, we'll explore the power of Shoelace's Advanced Components and how they can elevate the user experience of your website.


## Notification Bar

In this section, we will be building a customized `Navigation Bar` using some of Shoelace CSS components. While Shoelace CSS provides a wide range of components, including `buttons`, `forms`, and `cards`, it does not offer a specific `Navigation Bar` component. However, by leveraging some of the provided components and applying custom styles, we can create our own unique `Navigation Bar` that fits our design requirements.

Below is a code example showing how we can customize  some of Shoelace CSS components to build our very own custom `Notification Bar` component:


```javascript
import { SlCard, SlButton, SlIcon } from "@shoelace-style/shoelace/dist/react";
import { useState } from "react";

const Style = `
   sl-card {
     width: 100%;
   }
   .card_holder .item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-align: center;
   }
   sl-icon {
     margin: 1px;
     font-size: 1.5rem;
   }
   `;

const App = () => {
 const [showNotification, setShowNotification] = useState(false);

 return (
   <>
     {showNotification && (
       <SlCard className="card_holder">
         <div className="item">
           <SlIcon name="exclamation-octagon" style={{ color: "red" }} />
           <strong>
             Notice: This is an error message. This is an error message. This
             is an error message. This is an error message. This is an error
             message.
           </strong>
           <SlIcon
             name="x-lg"
             onClick={() => {
               setShowNotification(false);
             }}
           />
         </div>
       </SlCard>
     )}
     <br />
     <br />
     <SlButton
       variant="warning"
       onClick={() => {
         setShowNotification(true);
       }}
     >
       Show Notification
     </SlButton>
     <style>{Style}</style>
   </>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690289100378_ezgif.com-video-to-gif+9.gif)


The code above demonstrates how to create a custom `Notification Bar` using Shoelace CSS components in React. It includes a button to show and hide the notification. The `Notification Bar` displays an error message and a close button when the `Show Notification` button is clicked. The code also includes CSS styles for the card's layout and appearance.


## Progress Bar

The Shoelace CSS [Progress Bar](https://shoelace.style/components/progress-bar) component is a helpful tool for showing the progress or completion of a task in your web applications. It provides a simple and easy-to-understand way to communicate how far along a process is, such as uploading files or loading data. With options to customize its color, size, and animations, the `Progress Bar` improves the user experience by displaying the progress and ensuring a responsive interface. Whether you're creating a basic form or a more advanced application, the Shoelace CSS `Progress Bar` component adds both functionality and visual appeal to your projects.

The code below shows how the `Progress Bar` can be used in our React application:


```javascript
import { SlProgressBar } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <>
     <SlProgressBar
       value="45"
       label="Upload in progress"
       style={{ "--width": "15px" }}
     />
   </>
 );
};

export default App;
```
   

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1688718415703_Screenshot+26.png)


We can adjust the `value` attribute to change the upload progress of the `Progress Bar` and use the `style` attribute to set a custom `height`.


## Search Bar

In Shoelace CSS, there isn't a ready-made `Search Bar` component. However, we can make our own custom `Search Bar` using different components provided by Shoelace CSS. By combining elements like an `Input Field` and a `Button`, we can create a Search Bar that works well and looks good. This gives us the freedom to design the Search Bar according to our needs. In this section, we will learn how to build a personalized `Search Bar` using Shoelace components, allowing us to offer a pleasant and effective search experience to our users. Here's an example of how you can do it:


```javascript
import { SlInput, SlButton } from "@shoelace-style/shoelace/dist/react";
import { useState } from "react";

const App = () => {
 const [searchValue, setSearchValue] = useState("");

 const handleSearch = () => {
   console.log("Search Result:", searchValue);
 };

 const handleChangeInput = (event) => {
   setSearchValue(event.target.value);
 };

 return (
   <>
     <SlInput
       type="text"
       placeholder="Search..."
       onInput={handleChangeInput}
       value={searchValue}
     />
     <br />
     <SlButton onClick={handleSearch}>Search</SlButton>
   </>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690292736970_Screenshot+115.png)


In the above code example, we use the `SlInput` component to create an input field for the search query, and the `SlButton` component to create a search button. The `handleSearch` function is triggered when the `Search` button is clicked, and it can contain your custom logic to handle the search operation. The `handleChangeInput` function updates the `searchValue` state as the user types in the input field.

By combining these Shoelace CSS components and custom logic, you can create a search bar that suits your specific needs.


## Pagination

`Pagination` helps organize large amounts of data by splitting it into smaller sections across multiple pages. This makes it easier for users to navigate and find the information they need. While Shoelace CSS doesn't have a built-in `Pagination` component, we can create our very own using buttons and page indicators provided by Shoelace CSS. Adding `pagination` improves the user experience and makes your web application more organized, particularly when working with large datasets.

In the below example, the `Pagination` component keeps track of the current page using the `currentPage` state variable. The `goToPage` function is responsible for updating the current page when a pagination button is clicked. The `renderPaginationButtons` function dynamically generates the pagination buttons based on the total number of pages. Each button is a `SlButton` component from Shoelace CSS and triggers the `goToPage` function with the corresponding page number. The `Previous` and `Next` buttons allow the user to navigate to the previous and next pages, respectively.

Example


```javascript
import { SlButton } from "@shoelace-style/shoelace/dist/react";
import { useState } from "react";

const App = () => {
 const [currentPage, setCurrentPage] = useState(1);
 const totalPages = 5;
 const goToPage = (pageNumber) => {
   setCurrentPage(pageNumber);
 };
 const renderPaginationButtons = () => {
   const buttons = [];
   for (let i = 1; i <= totalPages; i++) {
     buttons.push(
       <SlButton
         key={i}
         variant={currentPage === i ? "primary" : "default"}
         onClick={() => goToPage(i)}
       >
         {i}
       </SlButton>,
     );
   }
   return buttons;
 };
 return (
   <div>
     <SlButton
       disabled={currentPage === 1}
       onClick={() => goToPage(currentPage - 1)}
     >
       Previous
     </SlButton>
     {renderPaginationButtons()}
     <SlButton
       disabled={currentPage === totalPages}
       onClick={() => goToPage(currentPage + 1)}
     >
       Next
     </SlButton>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690293696664_ezgif.com-video-to-gif+10.gif)



## Image Carousel

The [Image Carousel](https://shoelace.style/components/carousel) component in Shoelace CSS is a powerful tool for creating visually stunning and interactive image galleries on your website. It allows you to showcase a collection of images in a slideshow-like format, where users can navigate through the images by clicking on navigation arrows or indicators. The `Image Carousel` component offers various customization options to suit your needs, such as setting the transition duration, autoplay functionality, and controlling the number of visible images at a time.  

Example


```javascript
import {
 SlCarousel,
 SlCarouselItem,
} from "@shoelace-style/shoelace/dist/react";

const Style = `
   sl-carousel {
     height: 300px;
     width: 500px;
   }
   `;

const App = () => {
 return (
   <>
     <SlCarousel pagination>
       <SlCarouselItem>
         <img
           alt="red squirrel on brown table top"
           src="https://images.pexels.com/photos/460775/pexels-photo-460775.jpeg?auto=compress&cs=tinysrgb&w=2000"
         />
       </SlCarouselItem>
       <SlCarouselItem>
         <img
           alt="veranda surrounded by green cactus and pink bougainvillea"
           src="https://images.pexels.com/photos/919278/pexels-photo-919278.jpeg?auto=compress&cs=tinysrgb&w=2000"
         />
       </SlCarouselItem>
       <SlCarouselItem>
         <img
           alt="white mountain bike parks near white concrete poster on gray bricks pavement"
           src="https://images.pexels.com/photos/1145257/pexels-photo-1145257.jpeg?auto=compress&cs=tinysrgb&w=2000"
         />
       </SlCarouselItem>
     </SlCarousel>
     <style>{Style}</style>
   </>
 );
};
export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690295198510_ezgif.com-video-to-gif+11.gif)



## Masonry Grid

In web design, a `Masonry Grid` is a layout technique that arranges elements in a dynamic grid-like structure. While Shoelace CSS doesn't provide a specific `Masonry Grid` component, we can build our own custom version using some of Shoelace CSS components and CSS. This allows us to create visually appealing and responsive grid layouts for displaying content. Let's explore how to create a custom `Masonry Grid` using Shoelace CSS components.

Example:


```javascript
import { SlCard } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 return (
   <div style={{ display: "flex", gap: "10px" }}>
     <div style={{ flex: "1" }}>
       <SlCard>Card 1</SlCard>
       <SlCard>Card 2</SlCard>
     </div>
     <div style={{ flex: "1" }}>
       <SlCard>Card 3</SlCard>
       <SlCard>Card 4</SlCard>
       <SlCard>Card 5</SlCard>
     </div>
     <div style={{ flex: "1" }}>
       <SlCard>Card 6</SlCard>
       <SlCard>Card 7</SlCard>
       <SlCard>Card 8</SlCard>
       <SlCard>Card 9</SlCard>
     </div>
   </div>
 );
};

export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1689158836664_Screenshot+52.png)



## Tag Input

The `Tag Input` component makes adding and managing tags very easy. With its interactive interface, users can easily input and remove tags, creating a seamless experience. Shoelace CSS does not provide a specific `Tag Input` component. However, we can create similar functionality using the available components. Here's an example of how we can achieve that using some of Shoelace CSS components:

Example:


```javascript
import React, { useState } from "react";
import { SlInput, SlTag } from "@shoelace-style/shoelace/dist/react";

const App = () => {
 const [tags, setTags] = useState([]);
 const [inputValue, setInputValue] = useState("");
 const handleInputChange = (event) => {
   setInputValue(event.target.value);
 };
 const handleInputKeyPress = (event) => {
   if (event.key === "Enter" && inputValue) {
     setTags([...tags, inputValue]);
     setInputValue("");
   }
 };
 const handleTagRemove = (tagToRemove) => {
   const updatedTags = tags.filter((tag) => tag !== tagToRemove);
   setTags(updatedTags);
 };
 return (
   <div>
     <div>
       {tags.map((tag, index) => (
         <SlTag key={index} onRemove={() => handleTagRemove(tag)}>
           {tag}
         </SlTag>
       ))}
     </div>
     <SlInput
       value={inputValue}
       onInput={handleInputChange}
       onKeyPress={handleInputKeyPress}
       placeholder="Enter a tag"
     />
   </div>
 );
};
export default App;

```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690296926589_ezgif.com-video-to-gif+12.gif)


In the above code example, we use the `tags` state, managed by `useState`, to store an array of tags. The input value is stored in the `inputValue` state, which is updated as the user types using the `handleInputChange` function. When the user presses Enter, the `handleInputKeyPress` function adds the input value as a new tag to the `tags` array.

To display the tags, we use the `SlTag` component within a loop. Each `tag` includes a remove button that triggers the `handleTagRemove` function when clicked.


## Accordion

Shoelace CSS does not provide a built-in `Accordion` component. However, we can create an accordion-like behavior using the available components and some additional code. One approach is to use the `SlDetails` component from Shoelace CSS along with some `JavaScript` logic to toggle the visibility of the content.

Here's an example of how we can create an accordion-like behavior with Shoelace CSS:

Example:


```javascript
import { useState } from "react";
import { SlDetails, SlButton } from "@shoelace-style/shoelace/dist/react";
const App = () => {
 const [isOpen, setIsOpen] = useState(false);
 const toggleAccordion = () => {
   setIsOpen(!isOpen);
 };
 return (
   <div>
     <SlButton onClick={toggleAccordion}>Toggle Accordion</SlButton>
     <SlDetails open={isOpen}>
       <summary>Accordion Content</summary>
       <p>This is the content of the accordion.</p>
     </SlDetails>
   </div>
 );
};
export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690315338463_ezgif.com-crop+17.gif)


In the above example, the `SlDetails` component serves as a container for the accordion content. The `open` prop is used to control the visibility of the content based on the `isOpen` state. The `SlButton` component is used to toggle the `isOpen` state when clicked.


## Rating System

The [Rating](https://shoelace.style/components/rating) component in Shoelace CSS is a tool for collecting and displaying user ratings on your website or app. It visually represents ratings using stars or symbols, allowing users to express their opinion. With the `Rating` component, you can easily implement a rating system that enhances user engagement and provides valuable feedback. It's perfect for product reviews, feedback forms, and any application that requires user ratings. The `Rating` component offers a user-friendly and natural solution, making it easier for users to express their desire and for others to make informed decisions based on the ratings provided.

Below is an example of how the `Rating` component work:


```javascript
import { SlRating } from "@shoelace-style/shoelace/dist/react";
   const App = () => {
     return (
       <div>
         <SlRating label="Rate this product" />
       </div>
     );
   };
   export default App;
```

A `label` should be provided for assistive devices using the `label` attribute.

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690315566446_Screenshot+116.png)


Ratings are normally 0-5 by default, but we can increase the value of our rating to any number of our choice using the `max`  attribute, as seen in the code below:


```javascript
import { SlRating } from "@shoelace-style/shoelace/dist/react";
const App = () => {
 return (
   <div>
     <SlRating label="Rate this product" max={10} />
   </div>
 );
};
export default App;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690315658111_Screenshot+117.png)



## Stepper

Shoelace CSS does not offer a built-in `Stepper` component. However, Shoelace CSS provides a wide range of other components that can be used to build a custom stepper. We can utilize components like `Buttons`, `Progress Bars`, and `Input Fields` to create the desired functionality and appearance of a stepper. By implementing the necessary logic and styling, we can achieve a stepper-like behavior using some of the Shoelace CSS components.

Here is an example of how we can do that:

Example:


```javascript
import { useState } from "react";
import { SlButton } from "@shoelace-style/shoelace/dist/react";

const Stepper = () => {
 const [step, setStep] = useState(1);
 const handleNext = () => {
   setStep((prevStep) => prevStep + 1);
 };
 const handlePrevious = () => {
   setStep((prevStep) => prevStep - 1);
 };
 return (
   <div>
     {step === 1 && <div>Step 1 Content</div>}
     {step === 2 && <div>Step 2 Content</div>}
     {step === 3 && <div>Step 3 Content</div>}
     {step === 4 && <div>Step 4 Content</div>}
     {step === 5 && <div>Step 5 Content</div>}
     {step === 6 && <div>Step 6 Content</div>}
     <br />
     {step > 1 && <SlButton onClick={handlePrevious}>Previous</SlButton>}
     {step < 6 && <SlButton onClick={handleNext}>Next</SlButton>}
   </div>
 );
};

export default Stepper;
```

Output:

![-](https://blog.openreplay.com/images/create-stunning-pages-with-react-and-shoelace-css/images/s_72111FD9611CDC8B62284D23CC49EF0425A45915238795F85DD6097B9427E576_1690316743663_ezgif.com-crop+19.gif)


In the above example, the stepper component maintains the current step using the `step` state variable. The content of each step is conditionally rendered based on the current step value. The user can navigate between steps by clicking on the "Previous" and "Next" buttons, which update the `step` state accordingly.



## Conclusion

I hope you found this article to be interesting. In this article, we discussed Shoelace CSS foundations and how to set up Shoelace CSS and use it with React.js`. Additionally, we use Shoelace to quickly construct different kinds of components without having to write a ton of CSS codes. I will encourage you to take another advanced project and integrate it with Shoelace CSS if you want to advance further with it. What you’ve covered in Shoelace CSS and other front-end frameworks can be easily integrated. Kindly click on this [link](https://shoelace.style/) to understand more about Shoelace CSS.