Customizable Web Components UI Library – Shoelace

Category: Frameworks , Javascript , Recommended | March 25, 2024
Author:shoelace-style
Views Total:33 views
Official Page:Go to website
Last Update:March 25, 2024
License:MIT

Preview:

Customizable Web Components UI Library – Shoelace

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 Alert Component

Shoelace Color Picker Component

Shoelace Color Picker Component

Shoelace Dialog Component

Shoelace Dialog Component

Shoelace Drawer Panel Component

Shoelace Drawer Panel Component

Shoelace Dropdown Component

Shoelace Dropdown Component

Shoelace Form Component

Shoelace Form Component

Shoelace Progress Ring Component

Shoelace Progress Ring Component

Shoelace Range Slider Component

Shoelace Range Slider Component

Shoelace Tab Panel Component

Shoelace Tab Panel Component

Shoelace Tooltip Component

Shoelace Tooltip Component

Changelog:

v2.15.0 (03/25/2024)

  • Update & bugfix

You Might Be Interested In:


Leave a Reply