iiinova — where your digital self keeps evolving

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 19/05/2026

Silk has passed 100k weekly downloads on npm! 🎉

021

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 07/05/2026

ChatGPT’s mobile web app uses @silkhq.com for its bottom sheets. Silk is now powering native-like interactions inside one of the most-used products in the world 🎉

141

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 28/04/2026

Lovable's bottom sheets are built with @silkhq.com. On the web and in the app. Same code. Native feel everywhere.

001

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 16/04/2026

Love how AtoBeach.com is built with @silkhq.com 15+ swipeable bottom sheets, a swipeable sidebar. All running at up to 120fps, even in iOS Safari. Beautiful work

011

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 01/12/2025

Only 2 days left to take advantage of @silkhq.com Black Friday deal! 25% off all commercial licenses.

001

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 26/11/2025

Black Friday Deal ✨ Silk is 25% off for one week. Don't miss it.

Silk — Native-like swipeable sheets on the web — 25% off

112

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 08/07/2025

Page with background parallax. 120fps trackpad swipe animation. Animated header fade. Fully accessible. On the web, with @silkhq.com

011

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 07/07/2025

Just added an `updateThemeColor()` function to @silkhq.com 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!

001

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 03/07/2025

This is what the mobile web should have felt like all along. My goal is to make this the new normal.

251

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 02/07/2025

Tjek’s eTilbudsavis web app, home to digital catalogs from brands across Scandinavia, is now using @silkhq.com. It looks great, check it out 👇

011

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 01/07/2025

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 @silkhq.com, on the web.

021

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 30/06/2025

Rich in-editor hints for @silkhq.com 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.

001

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 20/06/2025

Coming soon: Rich code editor hints for Silk ✨ You'll know which sub-components are required, how they compose together and what their props do without leaving your editor.

Screenshot of Silk's rich hints in VSCode

011

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 19/06/2025

Long scrollable sheet. Swipe up or down to dismiss with your trackpad. Made with Silk, on the web.

031

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 03/06/2025

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, on the web.

021

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 02/06/2025

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

111

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 28/05/2025

Detached side drawer. Scrollable, swipeable, stackable. Made with Silk, on the web.

121

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 27/05/2025

The backdrop not covering the status bar when opening a sheet on the web makes it feel... subpar compared to native. So in Silk I baked-in the ability to blend them together by automatically dimming the theme-color in sync with the backdrop opacity.

6404

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 26/05/2025

Little UX improvement to the music player example that'll come with the code revamp I'm working on: you'll be able to scroll the page right after swiping down the panel, without having to wait for the animation to end.

001

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 20/05/2025

Simple swipeable page on the web, made with Silk.

111

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 15/05/2025

Want a sheet that can only be dismissed with a button tap? With Silk just set the `swipeDismissal` prop to `false` and the sheet won’t be dismissible by swipe. On iOS the user can still swipe the sheet, but it will snap back into place instead of closing.

011

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 14/05/2025

Working on revamping @silk_hq examples' code to make them a lot more flexible and easier to drop into your project. One change I’m making is switching from props as slots to compound components that match the actual API. before → after

Silk bottom sheet example using props as slots

Silk bottom sheet example using compound components

001

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 13/05/2025

Detached sheet made with silkhq.co on the web. Natural overshoot, status bar blending with the backdrop, swipe or click outside to dismiss.

111

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 02/05/2025

With Silk you get a nice <Sheet.Backdrop> sub-component that animates its opacity automatically as the sheet goes in and out of the view. It also has a special prop to blend it with the iOS status bar, and you can make it respond to swipe or not. All fully configurable.

import { Sheet } from "@silk-hq/components";

const BottomSheet = () => (
<Sheet.Root>
<Sheet.Trigger>Present sheet</Sheet.Trigger>
<Sheet.Portal>
<Sheet.View>
<Sheet.Backdrop
themeColorDimming="auto"
swipeable={false}
/>
<Sheet.Content>
...
</Sheet.Content>
</Sheet.View>
</Sheet.Portal>
</Sheet.Root>
);

011

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 01/05/2025

Using Radix's DropdownMenu or other overlay components? Silk is built to be fully compatible with all of them. Just added a guide about it to the docs.

Screenshot of the docs page "Usage with third-party overlays"

001

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 30/04/2025

Toast with natural swipe overshoot. Implemented with @silkhq.bsky.social and React on the web.

001

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 26/04/2025

Did you try installing silkhq.co on your home screen? It extends below the status bar there. That's how it looks

121

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 25/04/2025

`<Sheet.View>` is Silk's most important sub-component. It defines the area where the sheet is visible, but it's also where you set most of its configuration. It has props for content placement, detents, swipe behavior, interactions outside, and a lot more.

import { Sheet } from "@silk-hq/components";

export default () => (
<Sheet.Root>
<Sheet.Trigger />
<Sheet.Portal>
<Sheet.View
contentPlacement="top"
detents="100px"
swipeDismissal={false}
inertOutside={false}
>
<Sheet.Backdrop />
<Sheet.Content>
Content
</Sheet.Content>
</Sheet.View>
</Sheet.Portal>
</Sheet.Root>
);

001

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 24/04/2025

Added some very nice quotes to Silk's website

051

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 22/04/2025

Little bouncy card implemented with Silk on the web. Swipe up to dismiss

021

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 21/04/2025

Just released Silk v0.9.0, which improves compatibility with Tailwind v4 and some build tools! Silk's CSS styles are now exported from the package, letting you import them as you need in your project.

121

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 16/04/2025

Bottom sheets are great, but what about top sheets? Swipeable. 120fps. On the web. Made with Silk.

021

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 15/04/2025

ˋ<Sheet.Trigger>` in Silk isn't just used to open a sheet, it’s a versatile component. You can use it to dismiss a sheet, or step to the next detent too.

<Sheet.Trigger>
Present the sheet
</Sheet.Trigger>

<Sheet.Trigger action="dismiss">
Dismiss the sheet
</Sheet.Trigger>

<Sheet.Trigger action="step">
Step to the next detent
</Sheet.Trigger>

031

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 11/04/2025

In Silk, the `<Sheet.Root>ˋ sub-component acts like an umbrella that gathers and links together the other sub-components. It holds the states that needs to be shared among them. For example, it is where is set the ˋpresented` prop, which allow you to make the sheet a controlled component.

import { Sheet } from "@silk-hq/components";

const BottomSheet = () => {
const [presented, setPresented] = useState(false);

<Sheet.Root presented={presented} onPresentedChange={setPresented}>
<Sheet.Outlet />
<Sheet.Trigger />
<Sheet.Portal>
<Sheet.View>
<Sheet.Backdrop />
<Sheet.Content>
<Sheet.Handle />
Content
</Sheet.Content>
</Sheet.View>
</Sheet.Portal>
</Sheet.Root>
};

011

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 10/04/2025

Which styling solution do you use these days and would you like to see Silk examples for? CSS and SCSS? Tailwind CSS? CSS Modules? Something else? Let me know in the comments 👇

011

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 09/04/2025

In case you missed it, Silk Commercial Plan now starts at €299.

011

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 08/04/2025

Swipeable music player. Made with Silk, on the web.

131

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 07/04/2025

I've just added a guide to the docs on using Silk's sheet as a controlled component. Let me know your thoughts and if you'd like more guides like this!

Screenshot of the docs page "Implementing a controlled sheet".

141

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 05/04/2025

Silk is low-level and unstyled by default. The examples are just a starting point to help you move fast—but you're not limited to them. It's highly flexible and designed to let you build whatever swipeable (or not) sheet UI you may need. Go wild with it!

041

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 04/04/2025

Here's the code it takes to create a bottom sheet with Silk. Its declarative API, based on sub-components, aims to cover the most common use cases out of the box. When needed, you can opt into more imperative methods to make your sheet controlled.

Screenshot of the code needed to make a basic bottom sheet with Silk

101

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 03/04/2025

I built Silk to feel right on both mobile and desktop. You can swipe sheets with your trackpad, just like switching workspaces or going back in the browser. If you’ve got a mouse, the scroll wheel works too. Or just click the backdrop or close button. No mouse? Hit escape.

132

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 02/04/2025

To make Silk more accessible to indie hackers and early-stage startups, I am introducing a new €299 tier for businesses with 1 to 5 employees. I also plan to introduce purchasing power parity pricing in the future to ensure Silk is affordable in lower-income countries.

152

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 01/04/2025

Since last week, I have added a "Usage" section to Silk's docs to integrate it with other tools. It currently has four pages: • Usage with Vite & Next.js Pages router: These environments don't import global CSS automatically from packages. Their configuration needs to be tweaked a bit to allow it.

Screenshot of the usage section in Silk's docs.

101

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 31/03/2025

Silk relies heavily on web APIs, like Scroll snap and WAAPI. While building it, I also took care to anticipate new ones, like the Scroll-driven animations API.

142

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 29/03/2025

In case you missed it, the code for Silk's 12 basic examples is available on CodeSandbox for you to explore and play with. The code for the 4 most advanced examples is available upon purchasing a commercial license.

Screenshot of CodeSandbox with Silk's examples code

131

Reposted by Silk

Bruno Stasse @brunostasse.bsky.social · 25/03/2025

Introducing Silk — The most advanced swipeable sheet ever engineered for the web. Native-like experience • Works on all devices • Unlocks dozens of UI patterns on the web. Available for React.

1411820