Shoelace
@shoelace_style
Followers
3,315
Following
4
Media
78
Statuses
753
A collection of open source, professionally designed UI components built for longevity. Designed by @claviska 🥾
New Hampshire
Joined July 2017
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
無料クーポン
• 322594 Tweets
増量作戦
• 179625 Tweets
#IndependenceDay2024
• 135109 Tweets
River
• 116121 Tweets
MAGIC TIME W CHARLOTTE15
• 75451 Tweets
大阪停電
• 72103 Tweets
終戦の日
• 65526 Tweets
Simón
• 57647 Tweets
Botafogo
• 53127 Tweets
終戦記念日
• 44686 Tweets
Maurício
• 34498 Tweets
#AEWDynamite
• 28015 Tweets
O Palmeiras
• 23511 Tweets
Talleres
• 22069 Tweets
#JaiHind
• 20736 Tweets
Gena Rowlands
• 19812 Tweets
Judon
• 18550 Tweets
Flaco
• 18301 Tweets
Falcons
• 17537 Tweets
開示請求
• 16775 Tweets
#स्वतंत्रता_दिवस
• 15819 Tweets
Rony
• 14602 Tweets
Bustos
• 14178 Tweets
Enzo Diaz
• 10121 Tweets
🚀 2.0.0
Shoelace has finally dropped the beta tag! This long-awaited release comes with many bug fixes, improvements, and the promise of a stable API!
Read more about the 2.0 release and what comes next on the
@fontawesome
blog.
9
41
117
Even the best animators reuse good work instead of doing it all over again from scratch.
#designSystems
1
46
91
🚀 2.0.0-beta.60
With this release, Shoelace adds first-class support for React!
⚛️ React components are baked-in
📚 Toggle between HTML and React in the docs
🍳 Copy/paste imports for all components
Learn more and try it out at:
3
8
49
No tracking. No advertisements. Just awesome web components. ✌️
2
1
43
Over 100,000,000 monthly hits on
@jsDelivr
🤯
Thanks for using Shoelace. Amazing things are on the horizon!
4
6
36
🚀 2.5.0
This release features a new documentation website powered by
@eleven_ty
, a number of bug fixes, and a number of other improvements. We've also unbundled Lit and other deps from the main distribution and added a CDN distribution.
Changelog:
3
8
36
🚀 2.10.0
💬 Added Simplified Chinese translation
🔺 Improved submenu selection with safe triangles
🐛 Various bug fixes
⚙️ Updated Lit and other dependencies
Changelog:
1
2
35
We've been working on a new website! 👀
It looks a lot like the old one right now, but we switched things over to
@eleven_ty
for a proper static website. We can do much more with it now!
Please take a look and report anything that looks off!
3
3
32
🚀 2.6.0 has been released!
💬 Added version conflict detection at runtime
🍾 Added support for virtual anchors in <sl-popup>
⚛️ Improved tree shaking for React users
🐛 Lots of bug fixes
📦 Too much more to mention
See the changelog for more info:
1
8
29
This. Is. Awesome!
Big news today! Super excited for what the future holds. And stay tuned. 😉
1
15
76
0
2
30
Big news!
Time to talk about the future of Shoelace.
It's been more than two years since the beta release of Shoelace 2.0, which was the first version of the project to ship Web Components…
👇 cont'd
35
36
224
1
4
25
🚀 2.7.0
📋 Added the experimental <sl-copy-button>
📦 Removed sideEffects key from package.json
🏷️Moved tag type definitions to the correct location
🐛 Various bug fixes
Changelog here:
2
5
22
There’s a new package for React users that makes Shoelace easier to use. Check it out here:
1
8
22
Coming soon: <sl-popup>
This is a positioning utility that doesn’t have any styles — it just anchors one element to another. Powered by Floating UI, so think Popper.js/Floating UI in an HTML tag.
This will make positioning things much easier!
1
0
21
If you've been waiting for the dust to settle from the move to LitElement, now's a great time to update. Beta.34 is where you want to be. All known bugs have been squashed and we're honing in on 2.0 stable.
Details in the changelog:
0
3
20
👀
Shoelace is becoming Web Awesome, part of the Font Awesome family.
I give a lot through open source and I don’t usually ask for anything in return. Today, I’m asking you to tip the scale a bit for us in our Kickstarter 👇👇
7
80
178
1
3
20
⭐️ All of your favorite effects from animate.css in an ES module ready for use with the Web Animations API.
1
5
20
📦 2.0.0-beta.18 is here!
⬆️ Upgraded to
@stenciljs
2.0
💪 <sl-animation> is now stable
🎨 Color picker can now be submitted as a form control
👆 Touch support for demo resizers (docs)
🐛 Lots of minor bug fixes
Changelog:
1
4
19
🚀 2.3.0
🤖 Added an experimental autoloader
🪧 Added the subpath argument to getBasePath()
📜 Added custom-elements.json to package exports
🐛 Various bug fixes and improvements
Changelog:
0
6
19
🚀 2.9.0
🪟 Added support for third-party modals
🐛 Various bug fixes and updates
Changelog:
1
2
19
🚀 2.2.0
🗓️ Added TypeScript types to all custom events
📝 Added the getForm() method to all form controls
🌃 Added an experimental carousel component
🐛 Various improvements and bug fixes
Changelog:
2
4
17
All the work to implement the new Web Components Manifest Analyzer has been completed and merged into `next`. Working on one last bug fix before the next beta release.
3
3
18
Shoelace solves real world problems by offering accessible, intuitive, and interoperable components that save teams and individuals tens of thousands of dollars.
There’s no need to roll your own buttons anymore.
0
4
18
🚀 2.0.0-beta.85
🐛 Fixed a `hoist` bug caused by an upstream dep
🐛 Fixed a selection bug in lazy <sl-tree-item>
Changelog:
3
2
17
🚀 2.13.0
🌉 Added hover-bridge to <sl-popup>
🐛 Various bug fixes and improvements
Changelog:
1
1
17
New in beta.84: add custom validation styles to your form controls with ease.
Learn more:
1
4
17
In an effort to improve accessibility throughout the library, all components (and the documentation) has been updated to meet WCAG Level AA requirements for contrast.
You can preview the changes here:
Let me know what you think. 💙
3
1
17
🚀 2.8.0
🖱️ Added support for submenus to <sl-menu-item>
⚛️ Fixed type issues with the ref attribute in React
🐛 Various bug fixes and improvements
Changelog:
1
3
17
🚀 2.0.0-beta.86
📚 Various improvements to the docs
🤖 Improved IntelliSense for VS Code
♿️ Various accessibility improvements
🐛 Various bug fixes
🚨 Some minor breaking changes
Changelog:
2
1
16
🚀 2.4.0
💡 Exported the autoloader's discover() function
🗜️ Added the size attribute to <sl-radio-group>
🐛 Various bug fixes and improvements
Changelog:
0
3
15
🚀 2.11.0
💬 Added the Croatian translation
⚛️ Fixed a bug that broke certain React imports
🐛 Other bug fixes
Changelog:
0
5
15
In the next release, you'll be able to cherry pick just the components you want to use in your bundler OR in the browser.
From the same build. ✨
1
2
13
One of the bigger changes in today’s release is focus rings. No more box-shadow rings. Now that browsers do more than just square outlines — and with :focus-visible a thing — we can have nice, accessible focus rings using outline and outline-offset.
1
0
12
Mark your calendars!
🙋♀️ Lit 2 Livestream Panelist
Joining our Q&A panel – Cory LaViska
@claviska
, now at Microsoft, is the creator of the
@shoelace_style
Join our Lit 2.0 livestream on September 21st, 10am PDT at the link below or subscribe to the Lit YouTube channel:
3
14
52
0
1
13
🚀 2.0.0-beta.63
🚨 Changed `type` properties to `variant`
↔️ Added <sl-split-panel> component
🐛 Bug fixes and light refactoring
Changelog:
4
0
13
If you speak a language other than English/Spanish, mind helping me fill up this directory? 🙏
Please open your PR against the `localize` branch.
2
4
13
🚀 2.0.0-beta.88
🚨 Rewrote <sl-select> to improve a11y
🚨 Improved a11y of checkbox menu items
🚨 Improved color picker swatch API
🐛 Numerous bug fixes, improvements, and updates
See the changelog for details:
1
3
12
🚀 2.1.0
🖋️ Added the sl-invalid event to all form controls
⚠️ Added validation properties to all form controls
🐛 Various bug fixes and improvements
More details in the changelog:
0
0
12
🚀 2.0.0-beta.81
🍿 Various popup-related fixes and improvements
🐛 Various bug fixes and accessibility improvements
⚙️ Updated dependencies
Changelog:
0
0
11
Not sure if this is obvious from the docs, but you can theme Shoelace at a high-level with existing primitives.
Example:
1
1
12
🚀 2.0.0-beta.42
🚨 BREAKING: sl-show|hide are no longer cancelable
🖌 Added Iconoir example to docs
🐛 Fixed bugs related to animation changes
⚙️ Updated Lit and esbuild
See the changelog for details:
1
1
12
🚀 2.0.0-beta.84
🚨 Some minor breaking changes (see the changelog)
✅ Added form validation states
🎁 New methods, custom properties, and more
🐛 Lots of bug fixes and improvements
See the changelog for a complete list!
0
2
11
🚀 2.15.0
💬 Added the Slovenian translation
🪞 Added the sync attribute to <sl-dropdown>
🐛 Numerous bug fixes and improvements
Changelog
1
0
11
🚀 2.0.0-beta.65
✨ New parts, custom properties, and event details
🐛 Bug fixes
🔎 Improved search results in the docs
🧹 Improved linting rules for dev
🔼 Updated dependencies
Changelog:
1
2
11
A new part was added to form controls so you can customize them better. Side labels? No sweat! 😅
Details:
1
1
11
🚀 2.14.0
💬 Added Arabic translation
✅ Added help text to checkbox and switch
🎨 More efficient component styles
🐛 Various bug fixes
Changelog:
0
0
9
🚀 2.12.0
💬 Added the Italian translation
✏️ Added the ability to call form.checkValidity()
🐛 Various bug fixes
Changelog:
2
2
9
🚀 2.0.0-beta.72
📝 Refactored form control parts to support side labels
📻 Added experimental <sl-radio-button>
♿️ Many accessibility improvements
🐛 Various bug fixes
Changelog:
0
3
10
🚀 2.0.0-beta.27
🐛 Bug fixes
🧽 Improved menu styles
🏔 Added label + helpText to sl-range
↩️ Tags now wrap in sl-select
✨ Other minor enhancements
Details in the changelog:
0
3
10
Special thanks to everyone who has sponsored and continues to sponsor development.
Shoelace 2.0 (the one without the beta) is right around the corner!
0
0
9
🚀 2.0.0-beta.46
🚨 BREAKING: <sl-animation> DX improvements
👉 Reworked <sl-menu> to use a roving tab index
🎨 Removed Sass
🐛 Bug fixes
Changelog:
2
1
8
🚀 v2.0.0-beta.34
📦 Removed all.shoelace.js
🤖 Components are automatically registered on import
🍒 Bundling and cherry picking works the same way now
🐛 Bug fixes
Details:
1
3
9
🚀 2.0.0-beta.83
🚨 BREAKING: Removed <sl-responsive-media>
🚨 BREAKING: Renamed `toggle-password` attribute
🐛 Various bug fixes
📢 Refactored how events are emitted
🏅 Upgraded three components to stable
Changelog
1
2
9
Thanks to a slick PR by
@devmount
, new versions are now automatically published to GitHub! Get notified by going to Watch > Custom > ✅ Releases.
0
1
9
🍞 Breadcrumbs have landed in beta.50. Check out the docs here:
0
1
9
🤯 Over half a million hits per month on jsDelivr (and this doesn't include unpkg stats)
1
2
9
Now that GitHub allows one-time contributions for sponsors, I've opened it up to make it easier for individuals and organizations to sponsor Shoelace.
1
1
9
Let’s talk about DX. What’s something you struggle with or find difficult to do when using Shoelace?
3
6
9
Did you know you can instantly turn any example in the docs into a
@CodePen
? This is a great way to test and prototype things! Works for both HTML and React.
1
0
9
🚀 2.0.0-beta.77
⏪ Added support for resetting forms
✳️ Required fields now show * by default
🏎 Improved performance of focus trapping logic
🐛 Bug fixes
Changelog:
1
1
9
With this release, your VS Code experience will improve with even more powerful IntelliSense, courtesy of
@stuffbreaker
's excellent CEM Analyzer plugin.
0
1
9
v2.0.0-beta.23 has been released with four new utility components! 🎉
🎨 <sl-theme>
🔢 <sl-format-number>
⏰ <sl-relative-time>
↔️ <sl-resize-observer>
See the full changelog here:
0
1
9
🚀 2.5.2
📚 Fixed broken links and source buttons in the docs
(There are no component updates in this release.)
0
0
8
Over a quarter million CDN hits per month on jsDelivr! 🤯
(And this doesn't count unpkg stats, which was the official CDN at launch.)
0
2
8
🚀 2.0.0-beta.28
🛠 Major tooling and build overhaul
📦 Now shipping a single ES module dist
🚨 Assets and utilities have moved
See the changelog for an important message about updating and more info:
1
4
8
There are some pretty big (and great) changes to theming coming up. These will land sometime next week. I encourage you to check them out on next, especially the changelog and the color palettes.
1
0
8
If you're using <sl-form>, this release will be a breaking change. I've done a lot of testing on my side, but please help me make this as solid as possible. 🙏
🚀 2.0.0-beta.64
🚨 Removed <sl-form>
✍🏻 Form controls work with <form> now
🔧 Added serialize utility for getting form data as JSON
🐛 Various bug fixes and improvements
Changelog:
1
1
7
1
0
8
Check out this amazing YouTube mock-up using Shoelace (left) compared to the actual (right) 🤩
Submitted by
@yuki24
0
0
8
🚀 2.0.0-beta.29
🛠 Switched to LitElement due to community feedback
💻 Added JSON file for IntelliSense in
@code
🏷 Fixed TypeScript types
🗂 Moved chunk files into separate folder
See the changelog for more info and details on updating:
1
0
8
🚀 v2.0.0-beta.26
🚨 BREAKING: Fixed animations bloat by removing animista
🧪 Added initial e2e tests (more to come)
🔬 Added sl-initial-focus event to dialog/drawer
🎿 Updated bootstrap-icons
🐛 Lots of bug fixes
More in the changelog:
0
3
8
Still working on that animations rework to make it easier and more reliable to customize show/hide/open/close animations for all components that use them.
Web animations are…still fun in 2021 😂
0
0
8
Cherry picking is getting easier. In the next beta, you won't have to manually register component dependencies. 🍒
4
0
8
🚀 2.0.0-beta.53
🚨 Renamed <sl-menu-divider> to <sl-divider>
🦠 Added experimental <sl-mutation-observer>
🔲 Added outline variation to button
⬛️ Added filled variation to input/textarea/select
🐛 Various improvements and bug fixes
Changelog:
0
0
8
🥳 2.0.0-beta.12 is out with some bug fixes and support for link buttons.
0
2
8
The Kickstarter is live and we've got a ton of options for quality swag!
Here’s a behind the scenes video of the smash for the Kickstarter I took with my phone. We did it in one take. 🫠
See the final version here:
2
3
14
0
1
8
🚀 2.11.1
🏞️ Improvements to <sl-carousel>
Changelog:
0
1
8
🚀 2.0.0-beta.78
👁 Removed the focus visible shim for older Safari
⏫ Updated Lit, Bootstrap icons, and other deps
🐛 Bug fixes
Changelog:
1
1
7
👀
0
2
17
1
0
7
🚀 2.15.1
🐛 Various bug fixes
Changelog
4
1
9
🥳 2.0.0-beta.9 is out!
New components!
<sl-icon-button>
<sl-skeleton>
Plus lots of bug fixes 🐛 and a switch to jsDelivr for better CDN performance. ⚡️
3
3
7
Friendly reminder that all components have copy/paste imports at the bottom of each page now — even for React.
1
1
7
🚀 2.0.0-beta.61
🚨 Removed rgb() requirement for color tokens
🎨 Reworked dark theme palettes for richer colors
🔬 Added <sl-visually-hidden>
♿️ Various a11y improvements
🐛 Various bug fixes and improvements
Changelog:
1
1
7
Experimented with another possible implementation of toast notifications via <sl-alert>. Please check out the demos and let me know what you think.
2
1
7