Description

A component designed to group together several Sheet components and enable the definition of stacking-driven animations (i.e. animations based on the travel of Sheets stacked on top of each other).

Limitations

• Sheets which are part of a SheetStack can only be dismissed when they are frontmost (i.e. at the top of the stack). This limitation will be lifted in the future.

Structure

The sheets inside of a SheetStack can be either nested or siblings.

Sibling sheets

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

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

Nested sheets

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

export default () => (
	<SheetStack.Root>
		<SheetStack.Outlet />
	
		<Sheet.Root>
			<Sheet.Trigger />
			<Sheet.Portal>
				<Sheet.View>
					<Sheet.Backdrop />
					<Sheet.Content>
						<Sheet.Title />
						<Sheet.Description />
						
						{/* Nested sheet */}
						<Sheet.Root>
							<Sheet.Trigger />
							<Sheet.Portal>
								<Sheet.View>
									<Sheet.Backdrop />
									<Sheet.Content>
										<Sheet.Title />
										<Sheet.Description />
									</Sheet.Content>
								</Sheet.View>
							</Sheet.Portal>
						</Sheet.Root>
						
					</Sheet.Content>
				</Sheet.View>
			</Sheet.Portal>
		</Sheet.Root>
);

Sub-components

<SheetStack.Root />

Description

The root sub-component for the SheetStack component.

asChild