Silk

Native-like swipeable sheets on the web. Bring your web app to a whole new level.

[Silk @silk_hq]

Silk is now powering bottom sheets inside ChatGPT mobile web app 🚀

[Bruno Stasse @brunostasse]

ChatGPT’s mobile web app uses @silk_hq for its bottom sheets.

Silk is now powering native-like interactions inside one of the most-used products in the world 🎉

[Bruno Stasse @brunostasse]

Silk has passed 100k weekly downloads on npm! 🎉

[Bruno Stasse @brunostasse]

Lovable's bottom sheets are built with @silk_hq. On the web and in the app.

Same code. Native feel everywhere.

[Bruno Stasse @brunostasse]

Love how @AtoBeach is built with @silk_hq

15+ swipeable bottom sheets, a swipeable sidebar. All running at up to 120fps, even in iOS Safari.

Beautiful work @chazza

[Charlie J @chazza]

Continuing to develop @AtoBeach whilst on vacation & absolutely loving @brunostasse’s Sheet component.

I’m looking to write a blog post soon sharing my “Drawdal” component I’ve built with Silk for AtoB.

If you use React and need a drawer + modal component, Silk is fkn awesome!

[Bruno Stasse @brunostasse]

I'll be talking about my path into design engineering and building Silk.

Come hang at Granola's on the 14th!

[Bruno Stasse @brunostasse]

Page with background parallax.

120fps trackpad swipe animation. Animated header fade. Fully accessible.

On the web, with @silk_hq.

[Bruno Stasse @brunostasse]

Just added an `updateThemeColor()` function to @silk_hq that lets you update the page `theme-color` used for the iOS status bar while preserving the dimming that makes it blend with the Sheet's Backdrop.

Pretty useful when you're switching between light/dark mode from within a Sheet!

[Bruno Stasse @brunostasse]

This is what the mobile web should have felt like all along.

My goal is to make this the new normal.

[Bruno Stasse @brunostasse]

Tjek’s eTilbudsavis web app, home to digital catalogs from brands across Scandinavia, is now using @silk_hq.

It looks great, check it out 👇

[Bruno Stasse @brunostasse]

Sometimes all you need is a clean, smoothly animated page.

120fps enter/exit animations. Inner scrolling with overshoot. Perfect body scroll locking. Fully accessible.

Made with @silk_hq, on the web.

[Bruno Stasse @brunostasse]

Rich in-editor hints for @silk_hq just shipped!

You now get information about each component, sub-component and prop inline as you type. Learn what is required, what things do and how they compose together without leaving you editor.

[Bruno Stasse @brunostasse]

Coming soon: Rich code editor hints for Silk ✨

You'll see which sub-components are required, how they compose together and what their props do without leaving your editor.

[Bruno Stasse @brunostasse]

Long scrollable sheet. Swipe up or down to dismiss with your trackpad.

Made with @silk_hq, on the web.

[Bruno Stasse @brunostasse]

Silk is getting an upgrade today. It's a letter.

https://t.co/a9lGFlCdBe becomes https://t.co/7mugaKCBZc

[Bruno Stasse @brunostasse]

Sheet with transient detent. The intermediate detent is removed once the sheet reaches the last detent.

Swipe up or tap the input to expand. Scroll to dismiss the keyboard. Swipe down to dismiss the sheet.

Made with @silk_hq, on the web.

[Bruno Stasse @brunostasse]

Just shipped a big revamp of Silk examples' code.

Each example is now fully self-contained, making it much easier to just copy/paste into your own project.

The generic part of the example is now also structured as compound components, matching Silk's API and providing granular control.

v1 → v2

[Bruno Stasse @brunostasse]

Freelancers and agency owners: if you’re open to taking on projects using @silk_hq, drop a comment with your info (or DM if you prefer).

Companies have started reaching out for help with Silk projects, so next time I'd love to point them to you.

Please include:
- language(s) spoken & location
- your experience (including with Silk, if any)
- link to your portfolio/work
- your typical rate

[Bruno Stasse @brunostasse]

Detached side drawer. Scrollable, swipeable, stackable.

Made with @silk_hq on the web.

[Bruno Stasse @brunostasse]

The backdrop not covering the status bar when opening a sheet on the web makes it feel... subpar compared to native.

So in @silk_hq I baked-in the ability to blend them together by automatically dimming the theme-color in sync with the backdrop opacity.

Works with any color (for both the backdrop and the original theme-color), and with stacked backdrops. Only in Safari for now, as perf deteriorates in other browsers.