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

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.

// 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 nativeEdgeSwipePrevention={true}>
				<Sheet.Backdrop themeColorDimming="auto" />
				<Sheet.Content>
					<Sheet.BleedingBackground />
					Some content
				</Sheet.Content>
			</Sheet.View>
		</Sheet.Portal>
  </Sheet.Root>
);

/* BottomSheet.css */

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

.BottomSheet-content {
	 box-sizing: border-box;
   max-width: 700px;
   height: auto;
}

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

Next, see the examples to get started quickly.