Description

A primitive component for building advanced swipeable modal and non-modal overlay components such as bottom sheets, drawers, sidebars, dialogs, pages, lightboxes, toasts and more.

Built with a compound component architecture, it exposes a set of sub-components that give you full control over structure, behavior, and styling.

Anatomy

Basic

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

export default () => (
	<Sheet.Root>
		<Sheet.Trigger />
		<Sheet.Portal>
			<Sheet.View>
				<Sheet.Backdrop />
				<Sheet.Content>
					<Sheet.BleedingBackground />
					<Sheet.Title />
					<Sheet.Description />
				</Sheet.Content>
			</Sheet.View>
		</Sheet.Portal>
	</Sheet.Root>
);

With a component id

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

const mySheetId = createComponentId();

export default () => {
	return (
		<Sheet.Root componentId={mySheetId}>
			<Sheet.Root>
				<Sheet.Trigger />
				<Sheet.Portal>
					<Sheet.View>
						<Sheet.Backdrop />
						<Sheet.Content>
							<Sheet.BleedingBackground />
							<Sheet.Title />
							<Sheet.Description />
							<Sheet.Trigger forComponent={mySheetId} />
						</Sheet.Content>
					</Sheet.View>
				</Sheet.Portal>
			</Sheet.Root>

			<Sheet.Trigger forComponent={mySheetId} />
			<Sheet.Portal>
				<Sheet.View forComponent={mySheetId}>
					<Sheet.Backdrop />
					<Sheet.Content>
						<Sheet.BleedingBackground />
						<Sheet.Title />
						<Sheet.Description />
					</Sheet.Content>
				</Sheet.View>
			</Sheet.Portal>
		</Sheet.Root>
	)
}

With related components

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

export default () => (
	<Sheet.Root>
		<Island.Root>
			<Island.Content />
		</Island.Root>
		
		<Sheet.Outlet />
		<Sheet.Trigger />
		
		<Sheet.Portal>
			<Sheet.View>
				<Sheet.Backdrop />
				<Sheet.Content>
					<Sheet.BleedingBackground />
					<Sheet.Handle />
					<Sheet.Trigger />
					<Sheet.Title />
					<Sheet.Description />
					<AutoFocusTarget.Root />
				</Sheet.Content>
			</Sheet.View>
		</Sheet.Portal>
	</Sheet.Root>
);

With SpecialWrapper

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

export default () => (
	<Sheet.Root>
		<Sheet.Trigger />
		<Sheet.Portal>
			<Sheet.View>
				<Sheet.Backdrop />
				<Sheet.Content>
					<Sheet.SpecialWrapper.Root>
						<Sheet.SpecialWrapper.Content>
							<Sheet.BleedingBackground />
							<Sheet.Title />
							<Sheet.Description />
						</Sheet.SpecialWrapper.Content>
					</Sheet.SpecialWrapper.Root>
				</Sheet.Content>
			</Sheet.View>
		</Sheet.Portal>
	</Sheet.Root>
);

Sub-components

<Sheet.Root>

Description

The Root sub-component wraps all other Sheet sub-components that belong to the same Sheet instance (except for <Sheet.Portal> which can be used around it), as it contains logic that is shared with all of them.

Notes