Shoelace Profile Banner
Shoelace Profile
Shoelace

@shoelace_style

3,312
Followers
4
Following
78
Media
753
Statuses

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.
@shoelace_style
Shoelace
2 years
๐Ÿš€ 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
@shoelace_style
Shoelace
4 years
Even the best animators reuse good work instead of doing it all over again from scratch. #designSystems
1
46
91
@shoelace_style
Shoelace
3 years
๐Ÿš€ 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
@shoelace_style
Shoelace
2 years
No tracking. No advertisements. Just awesome web components. โœŒ๏ธ
Tweet media one
2
1
43
@shoelace_style
Shoelace
1 year
๐Ÿš€ 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
@shoelace_style
Shoelace
10 months
๐Ÿš€ 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
@shoelace_style
Shoelace
1 year
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
@shoelace_style
Shoelace
3 years
<sl-input type="date">
Tweet media one
3
3
31
@shoelace_style
Shoelace
3 years
Look at these fine organizations using Lit ๐Ÿ’™
Tweet media one
0
6
30
@shoelace_style
Shoelace
3 years
My commitment to accessibility in Shoelace.
Tweet media one
2
4
30
@shoelace_style
Shoelace
1 year
๐Ÿš€ 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
@shoelace_style
Shoelace
2 years
This. Is. Awesome!
@fontawesome
Font Awesome
2 years
Big news today! Super excited for what the future holds. And stay tuned. ๐Ÿ˜‰
1
15
76
0
2
30
@shoelace_style
Shoelace
2 years
Big news!
@claviska
Cory LaViska
2 years
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
@shoelace_style
Shoelace
1 year
๐Ÿš€ 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
@shoelace_style
Shoelace
3 years
Thereโ€™s a new package for React users that makes Shoelace easier to use. Check it out here:
1
8
22
@shoelace_style
Shoelace
2 years
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
@shoelace_style
Shoelace
3 years
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_style
Shoelace
5 months
๐Ÿ‘€
@claviska
Cory LaViska
5 months
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
177
1
3
20
@shoelace_style
Shoelace
4 years
๐Ÿ“ฆ 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
@shoelace_style
Shoelace
1 year
๐Ÿš€ 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
@shoelace_style
Shoelace
11 months
๐Ÿš€ 2.9.0 ๐ŸชŸ Added support for third-party modals ๐Ÿ› Various bug fixes and updates Changelog:
1
2
19
@shoelace_style
Shoelace
1 year
๐Ÿš€ 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
@shoelace_style
Shoelace
3 years
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_style
Shoelace
2 years
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
@shoelace_style
Shoelace
2 years
๐Ÿš€ 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
@shoelace_style
Shoelace
7 months
๐Ÿš€ 2.13.0 ๐ŸŒ‰ Added hover-bridge to <sl-popup> ๐Ÿ› Various bug fixes and improvements Changelog:
1
1
17
@shoelace_style
Shoelace
2 years
New in beta.84: add custom validation styles to your form controls with ease. Learn more:
Tweet media one
1
4
17
@shoelace_style
Shoelace
3 years
Shoelace has reached over 30M hits/mo on @jsDelivr . Pretty incredible.
Tweet media one
0
4
16
@shoelace_style
Shoelace
2 years
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
@shoelace_style
Shoelace
1 year
๐Ÿš€ 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
@shoelace_style
Shoelace
2 years
๐Ÿš€ 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
@shoelace_style
Shoelace
1 year
๐Ÿš€ 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
@shoelace_style
Shoelace
10 months
๐Ÿš€ 2.11.0 ๐Ÿ’ฌ Added the Croatian translation โš›๏ธ Fixed a bug that broke certain React imports ๐Ÿ› Other bug fixes Changelog:
0
5
15
@shoelace_style
Shoelace
3 years
You can build Shoelace on Windows now.
1
1
15
@shoelace_style
Shoelace
3 years
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
@shoelace_style
Shoelace
2 years
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
@shoelace_style
Shoelace
3 years
Mark your calendars!
@buildWithLit
Lit
3 years
๐Ÿ™‹โ€โ™€๏ธ 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:
Tweet media one
3
14
52
0
1
13
@shoelace_style
Shoelace
3 years
๐Ÿš€ 2.0.0-beta.63 ๐Ÿšจ Changed `type` properties to `variant` โ†”๏ธ Added <sl-split-panel> component ๐Ÿ› Bug fixes and light refactoring Changelog:
4
0
13
@shoelace_style
Shoelace
3 years
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
@shoelace_style
Shoelace
2 years
๐Ÿš€ 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
@shoelace_style
Shoelace
2 years
๐Ÿš€ 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
@shoelace_style
Shoelace
2 years
๐Ÿš€ 2.0.0-beta.81 ๐Ÿฟ Various popup-related fixes and improvements ๐Ÿ› Various bug fixes and accessibility improvements โš™๏ธ Updated dependencies Changelog:
0
0
11
@shoelace_style
Shoelace
3 years
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
@shoelace_style
Shoelace
3 years
๐Ÿš€ 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
@shoelace_style
Shoelace
2 years
๐Ÿš€ 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
@shoelace_style
Shoelace
5 months
๐Ÿš€ 2.15.0 ๐Ÿ’ฌ Added the Slovenian translation ๐Ÿชž Added the sync attribute to <sl-dropdown> ๐Ÿ› Numerous bug fixes and improvements Changelog
1
0
11
@shoelace_style
Shoelace
3 years
๐Ÿš€ 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
@shoelace_style
Shoelace
4 years
Hereโ€™s a teaser. Coming soon! โ˜€๏ธ ๐ŸŒ™
0
0
11
@shoelace_style
Shoelace
2 years
A new part was added to form controls so you can customize them better. Side labels? No sweat! ๐Ÿ˜… Details:
Tweet media one
1
1
11
@shoelace_style
Shoelace
6 months
๐Ÿš€ 2.14.0 ๐Ÿ’ฌ Added Arabic translation โœ… Added help text to checkbox and switch ๐ŸŽจ More efficient component styles ๐Ÿ› Various bug fixes Changelog:
0
0
9
@shoelace_style
Shoelace
4 years
1M hits/month on @jsDelivr
Tweet media one
0
3
10
@shoelace_style
Shoelace
4 years
<sl-responsive-embed> is coming soon! โคต
1
0
10
@shoelace_style
Shoelace
9 months
๐Ÿš€ 2.12.0 ๐Ÿ’ฌ Added the Italian translation โœ๏ธ Added the ability to call form.checkValidity() ๐Ÿ› Various bug fixes Changelog:
2
2
9
@shoelace_style
Shoelace
2 years
๐Ÿš€ 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
@shoelace_style
Shoelace
4 years
๐Ÿš€ 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
@shoelace_style
Shoelace
3 years
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
@shoelace_style
Shoelace
3 years
๐Ÿš€ 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
@shoelace_style
Shoelace
3 years
๐Ÿš€ 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
@shoelace_style
Shoelace
3 years
Outline buttons and filled inputs coming at ya in beta.53
Tweet media one
Tweet media two
1
0
9
@shoelace_style
Shoelace
2 years
๐Ÿš€ 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
@shoelace_style
Shoelace
3 years
๐Ÿž Breadcrumbs have landed in beta.50. Check out the docs here:
Tweet media one
0
1
9
@shoelace_style
Shoelace
4 years
๐Ÿคฏ Over half a million hits per month on jsDelivr (and this doesn't include unpkg stats)
Tweet media one
1
2
9
@shoelace_style
Shoelace
3 years
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
@shoelace_style
Shoelace
3 years
Letโ€™s talk about DX. Whatโ€™s something you struggle with or find difficult to do when using Shoelace?
3
6
9
@shoelace_style
Shoelace
2 years
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.
Tweet media one
1
0
9
@shoelace_style
Shoelace
2 years
๐Ÿš€ 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
@shoelace_style
Shoelace
4 years
Button groups have landed in beta 11.
Tweet media one
0
2
9
@shoelace_style
Shoelace
2 years
With this release, your VS Code experience will improve with even more powerful IntelliSense, courtesy of @stuffbreaker 's excellent CEM Analyzer plugin.
Tweet media one
0
1
9
@shoelace_style
Shoelace
4 years
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
@shoelace_style
Shoelace
1 year
๐Ÿš€ 2.5.2 ๐Ÿ“š Fixed broken links and source buttons in the docs (There are no component updates in this release.)
0
0
8
@shoelace_style
Shoelace
4 years
Over a quarter million CDN hits per month on jsDelivr! ๐Ÿคฏ (And this doesn't count unpkg stats, which was the official CDN at launch.)
Tweet media one
0
2
8
@shoelace_style
Shoelace
3 years
๐Ÿš€ 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
@shoelace_style
Shoelace
3 years
17 millions hits/mo
0
0
7
@shoelace_style
Shoelace
3 years
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
@shoelace_style
Shoelace
3 years
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. ๐Ÿ™
@shoelace_style
Shoelace
3 years
๐Ÿš€ 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
@shoelace_style
Shoelace
3 years
๐Ÿคฉ
Tweet media one
0
0
8
@shoelace_style
Shoelace
3 years
Check out this amazing YouTube mock-up using Shoelace (left) compared to the actual (right) ๐Ÿคฉ Submitted by @yuki24
Tweet media one
0
0
8
@shoelace_style
Shoelace
3 years
๐Ÿš€ 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
@shoelace_style
Shoelace
4 years
๐Ÿš€ 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
@shoelace_style
Shoelace
3 years
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
@shoelace_style
Shoelace
3 years
Cherry picking is getting easier. In the next beta, you won't have to manually register component dependencies. ๐Ÿ’
Tweet media one
4
0
8
@shoelace_style
Shoelace
3 years
๐Ÿš€ 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
@shoelace_style
Shoelace
4 years
๐Ÿฅณ 2.0.0-beta.12 is out with some bug fixes and support for link buttons.
Tweet media one
0
2
8
@shoelace_style
Shoelace
4 months
The Kickstarter is live and we've got a ton of options for quality swag!
@claviska
Cory LaViska
5 months
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
@shoelace_style
Shoelace
10 months
๐Ÿš€ 2.11.1 ๐Ÿž๏ธ Improvements to <sl-carousel> Changelog:
0
1
8
@shoelace_style
Shoelace
2 years
๐Ÿš€ 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
@shoelace_style
Shoelace
2 years
๐Ÿ‘€
@claviska
Cory LaViska
2 years
Hanging out with @davegandy and @supercodepoet at @fontawesome HQ this week!
Tweet media one
0
2
17
1
0
7
@shoelace_style
Shoelace
3 months
๐Ÿš€ 2.15.1 ๐Ÿ› Various bug fixes Changelog
4
1
9
@shoelace_style
Shoelace
4 years
๐Ÿฅณ 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. โšก๏ธ
Tweet media one
Tweet media two
3
3
7
@shoelace_style
Shoelace
3 years
Friendly reminder that all components have copy/paste imports at the bottom of each page now โ€”ย even for React.
Tweet media one
1
1
7
@shoelace_style
Shoelace
3 years
๐Ÿš€ 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
@shoelace_style
Shoelace
4 years
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