Tile UI React
Source code

Components

Sheet

Side sheet overlay.

Use Sheet to slide a panel from the edge of the screen.

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@tile-ui/react';

export default function SheetDemo() {
	return (
		<Sheet>
			<SheetTrigger className="component-preview__action">Open sheet</SheetTrigger>

Registry install

pnpm dlx shadcn@latest add @tile-ui/sheet

Package usage

import { Sheet, SheetTrigger, SheetContent, SheetTitle, SheetDescription } from '@tile-ui/react';
 
<Sheet>
	<SheetTrigger>Open</SheetTrigger>
	<SheetContent side="right">
		<SheetTitle>Details</SheetTitle>
		<SheetDescription>Supporting details.</SheetDescription>
	</SheetContent>
</Sheet>

Highlights

  • Four sides
  • Trigger, overlay, and content
  • Header, footer, title, and description

Registry dependencies

ItemPurpose
sheetComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Sheet

No custom props.

PreviousSeparatorNextSidebar