import React from 'react';
import { mdx } from '@mdx-js/react';
import { Props, Description } from '@divriots/dockit-react/props';
import { Playground } from '@divriots/dockit-react/playground';
import { Clipboard } from '@divriots/dockit-react/clipboard';
import { CssLayout } from '~/mdx-layout-css';
export default CssLayout;

# Clipboard

<Description of={Clipboard} />

## Setup

```tsx
import '@divriots/dockit-react/clipboard';

<Clipboard>
  <pre>Lorem Ipsum</pre>
</Clipboard>;
```

## Demo

Hover and click to `copy`.

<Playground
  scope={{ Clipboard }}
  code={`<Clipboard style={{ width: '5rem' }}>
  <pre>Lorem Ipsum</pre>
</Clipboard>`}
/>

## Props

<Props of={Clipboard} />