Skip to content

Commit a7aad93

Browse files
Add Copy component documentation
- Add new Copy component page with usage examples and properties - Add Copy component to navigation in docs.yml - Add changelog entry for 2025-11-08 Co-Authored-By: Catherine Deskur <[email protected]>
1 parent d98f21b commit a7aad93

File tree

3 files changed

+60
-0
lines changed

3 files changed

+60
-0
lines changed

fern/products/docs/docs.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ navigation:
6767
path: ./pages/component-library/default-components/code-blocks.mdx
6868
icon: fa-duotone fa-code
6969
slug: code-blocks
70+
- page: Copy
71+
path: ./pages/component-library/default-components/copy.mdx
72+
icon: fa-duotone fa-copy
7073
- page: Download
7174
path: ./pages/component-library/default-components/download.mdx
7275
icon: fa-duotone fa-download
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
## New Copy component for inline copyable text
2+
3+
The `<Copy>` component makes text copyable with a single click. Use it inline to allow readers to quickly copy version numbers, commands, API keys, or other text snippets without selecting and copying manually.
4+
5+
You can also customize what gets copied to the clipboard using the `clipboard` prop. This is useful when you want to display formatted text but copy plain text or a different value.
6+
7+
```jsx
8+
Use the Fern CLI to build and consume REST APIs. The latest version is <Copy>v2.0</Copy>.
9+
10+
If you want the full version, you can use the <Copy clipboard="foobopbar">v1.0</Copy> version.
11+
```
12+
13+
Read more in the [Copy component documentation](/learn/docs/writing-content/components/copy).
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: Copy
3+
description: Make text copyable with a click-to-copy button.
4+
---
5+
6+
The `<Copy>` component makes text copyable with a single click. Use it inline to allow readers to quickly copy version numbers, commands, API keys, or other text snippets without selecting and copying manually.
7+
8+
## Usage
9+
10+
<div className="highlight-frame">
11+
<div className="highlight-frame-content">
12+
Use the Fern CLI to build and consume REST APIs. The latest version is <Copy>v2.0</Copy>.
13+
</div>
14+
</div>
15+
16+
```jsx Markdown
17+
Use the Fern CLI to build and consume REST APIs. The latest version is <Copy>v2.0</Copy>.
18+
```
19+
20+
## Variants
21+
22+
### Custom clipboard content
23+
24+
You can customize what gets copied to the clipboard using the `clipboard` prop. This is useful when you want to display formatted text but copy plain text or a different value.
25+
26+
<div className="highlight-frame">
27+
<div className="highlight-frame-content">
28+
If you want the full version, you can use the <Copy clipboard="foobopbar">v1.0</Copy> version.
29+
</div>
30+
</div>
31+
32+
```jsx Markdown
33+
If you want the full version, you can use the <Copy clipboard="foobopbar">v1.0</Copy> version.
34+
```
35+
36+
## Properties
37+
38+
<ParamField path="children" type="string | ReactNode" required={true}>
39+
The text content to display and make copyable. This is what users see on the page.
40+
</ParamField>
41+
42+
<ParamField path="clipboard" type="string" required={false}>
43+
Custom text to copy to the clipboard. If not specified, the component copies the children content. Use this when you want to display one value but copy a different value.
44+
</ParamField>

0 commit comments

Comments
 (0)