Customizable Web Components UI Library – Shoelace

Category: Frameworks , Javascript , Recommended | September 19, 2022
Author:shoelace-style
Views Total:1 view
Official Page:Go to website
Last Update:September 19, 2022
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/[email protected]/dist/shoelace/shoelace.css" />
<script type="module" src="https://unpkg.com/@shoelace-style/[email protected]/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.0.0-beta.83 (09/19/2022)

  • Update & bugfix

You Might Be Interested In:


Leave a Reply