Install the library

npm install @silk-hq/components

Import and use the components

// BottomSheet.tsx

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

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>
);

Add your styles

// 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 {
   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);
}