> ## Documentation Index
> Fetch the complete documentation index at: https://elormui-mintlify-6ade9c4d.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Sheet

> Extends the Dialog component to display content that complements the main content.

export const ComponentPreview = ({component = "button", theme = "neutral", accent = "default", mode = "dark"}) => {
  const src = `${previewOrigin()}/preview/${component}?theme=${theme}&accent=${accent}&mode=${mode}`;
  return <Frame>
      <iframe src={src} title={`${component} preview`} style={{
    width: "100%",
    height: "280px",
    border: "none",
    borderRadius: "8px",
    background: "transparent"
  }} />
    </Frame>;
};

export const InstallCommand = ({command = "elorm add button"}) => {
  const managers = [{
    name: "npm",
    cmd: `npx ${command}`
  }, {
    name: "pnpm",
    cmd: `pnpm dlx ${command}`
  }, {
    name: "yarn",
    cmd: `yarn dlx ${command}`
  }, {
    name: "bun",
    cmd: `bunx ${command}`
  }];
  return <CodeGroup>
      {managers.map(({name, cmd}) => <pre key={name} data-language="bash" data-title={name}>
          <code>{cmd}</code>
        </pre>)}
    </CodeGroup>;
};

## Installation

<InstallCommand command="elorm add sheet" />

## Preview

<ComponentPreview component="sheet" />

## Usage

```tsx theme={null}
import { Sheet } from '@/components/ui/sheet'
```

Extends the Dialog component to display content that complements the main content.

## Examples

### Default

<Tabs>
  <Tab title="Preview">
    <ComponentPreview component="sheet" />
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    <Sheet />
    ```
  </Tab>
</Tabs>