Note that commercial use of Silk requires a commercial license. More information on the website: silkhq.com.

Install the package

To get started with Silk, install its npm package using your terminal.

npm install @silk-hq/components

Import the styles

Silk makes use of low-level styles that must be imported into your project.

For convenience and flexibility, these styles are available in two versions: unlayered and layered. The layered version wraps Silk’s default styles into a CSS @layer {}.

Basic

In a project using CSS layers (e.g. Tailwind V4)

Import and use the components

You can now import the components that you want to use anywhere in your code.

Creating a bottom sheet component:

// BottomSheet.tsx

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

const BottomSheet = () => (
  <Sheet.Root license="commercial">
    <Sheet.Trigger>Open</Sheet.Trigger>
    <Sheet.Portal>
      <Sheet.View className="BottomSheet-view" nativeEdgeSwipePrevention={true}>
        <Sheet.Backdrop themeColorDimming="auto" />
        <Sheet.Content className="BottomSheet-content">
          <Sheet.BleedingBackground className="BottomSheet-bleedingBackground" />
          Some content
        </Sheet.Content>
      </Sheet.View>
    </Sheet.Portal>
  </Sheet.Root>
);

export { BottomSheet };

/* BottomSheet.css */

.BottomSheet-view {
  height: var(--silk-100-lvh-dvh-pct);
}

.BottomSheet-content {
  box-sizing: border-box;
  max-width: 700px;
  padding-block: 25vh;
  text-align: center;
}

.BottomSheet-bleedingBackground {
  border-radius: 24px;
  background-color: white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

Using the bottom sheet:

// Home.tsx

import { BottomSheet } from "./BottomSheet/BottomSheet";

export default function Home() {
	return (
		<BottomSheet />
	);
}