Customizable Web Components UI Library – Shoelace

Category: Frameworks , Javascript , Recommended | July 18, 2020
Author:shoelace-style
Views Total:330 views
Official Page:Go to website
Last Update:July 18, 2020
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
  • Button
  • Checkbox
  • Color Picker
  • Details
  • Dialog
  • Drawer
  • Dropdown
  • Form
  • Icon
  • Input
  • Menu
  • Menu Divider
  • Menu Item
  • Menu Label
  • Progress Bar
  • Progress Ring
  • Radio
  • Range
  • Select
  • Spinner
  • Switch
  • Tab Group
  • Tab
  • Tab Panel
  • Tag
  • Textarea
  • Tooltip

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

You Might Be Interested In:


Leave a Reply