82 lines
1.7 KiB
Plaintext
82 lines
1.7 KiB
Plaintext
---
|
|
title: Sheet
|
|
description: Extends the Dialog component to display content that complements the main content of the screen.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="radix-sheet-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="radix-sheet" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<Sheet>
|
|
<SheetTrigger>Open Sheet</SheetTrigger>
|
|
<SheetContent>
|
|
<SheetHeader>
|
|
<SheetTitle>Title</SheetTitle>
|
|
<SheetDescription>Description</SheetDescription>
|
|
</SheetHeader>
|
|
<p>Sheet Content</p>
|
|
<SheetFooter>
|
|
<button>Close</button>
|
|
</SheetFooter>
|
|
</SheetContent>
|
|
</Sheet>
|
|
```
|
|
|
|
## Props
|
|
|
|
### Radix UI
|
|
|
|
<div className="flex flex-row gap-x-3">
|
|
<ExternalLink
|
|
href="https://www.radix-ui.com/primitives/docs/components/dialog"
|
|
text="Docs"
|
|
/>
|
|
<ExternalLink
|
|
href="https://www.radix-ui.com/primitives/docs/components/dialog#api-reference"
|
|
text="API Reference"
|
|
/>
|
|
</div>
|
|
|
|
### Shadcn UI
|
|
|
|
<div className="flex flex-row gap-x-3">
|
|
<ExternalLink
|
|
href="https://ui.shadcn.com/docs/components/sheet"
|
|
text="Docs"
|
|
/>
|
|
</div>
|
|
|
|
### Animate UI props
|
|
|
|
#### SheetContent
|
|
|
|
<TypeTable
|
|
type={{
|
|
transition: {
|
|
description: 'The transition of the sheet',
|
|
type: 'Transition',
|
|
required: false,
|
|
default: "{ type: 'spring', stiffness: 150, damping: 25 }",
|
|
},
|
|
overlay: {
|
|
description: 'Whether to show an overlay',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'true',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- We use [Radix UI](https://www.radix-ui.com/primitives/docs/components/dialog) for the sheet component.
|
|
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/sheet) for the sheet style.
|