Customizable Web Components UI Library – Shoelace

Preview:

Description:

Shoelace is an open-source, highly customizable, framework-agnostic UI components library for modern web application design.

UI Components Included:

• Alert
• Avatar
• Badge
• Breadcrumb
• Button
• Button Group
• Card
• Checkbox
• Color Picker
• Details
• Dialog
• Divider
• Drawer
• Dropdown
• Icon
• Icon Button
• Image Comparer
• Input
• Menu
• Menu Item
• Menu Label
• Progress Bar
• Progress Ring
• QR Code
• Radio
• Radio Button
• Radio Group
• Range
• Rating
• Select
• Skeleton
• Spinner
• Split Panel
• Switch
• Tab Group
• Tab
• Tab Panel
• Tag
• Textarea
• Tooltip
• Tree

How to use it:

1. Install & import the UI components library.

<link rel="stylesheet" href="https://unpkg.com/@shoelace-style/shoelace@latest/dist/shoelace/shoelace.css" />
<script type="module" src="https://unpkg.com/@shoelace-style/shoelace@latest/dist/shoelace/shoelace.esm.js"></script>

2. Start coding your web components.

<sl-alert open>
  <sl-icon slot="icon" name="info-circle"></sl-icon>
  An Alert Message
</sl-alert>

Previews:

Shoelace Alert Component

Shoelace Color Picker Component

Shoelace Dialog Component

Shoelace Drawer Panel Component

Shoelace Dropdown Component

Shoelace Form Component

Shoelace Progress Ring Component

Shoelace Range Slider Component

Shoelace Tab Panel Component

Shoelace Tooltip Component

Changelog:

v2.12.0/12 (11/20/2023)

• Update & bugfix