sheet - examples - Adam Jurek

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Phone22remthe floor, the narrowest this promises to work at

tanstacktanstack add https://adamjurek.com/r/tanstack/sheet.json

shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/sheet.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { Sheet } from "@sushindustries/ui";
import { useState } from "react";

export function ProductCard() {
	const [open, setOpen] = useState(false);

	return (
		<>
			<div className="card p-4">
				<h3 className="h4 m-0">Reveal</h3>
				<button type="button" onClick={() => setOpen(true)}>
					Quick view
				</button>
			</div>
			<Sheet
				open={open}
				onClose={() => setOpen(false)}
				title="Reveal"
				side="right"
			>
				<p>Fades and rises its children the first time they reach the viewport.</p>
			</Sheet>
		</>
	);
}

tsx