diff --git a/.vale/styles/FernStyles/Acronyms.yml b/.vale/styles/FernStyles/Acronyms.yml index 30097e4d..04d45be7 100644 --- a/.vale/styles/FernStyles/Acronyms.yml +++ b/.vale/styles/FernStyles/Acronyms.yml @@ -100,3 +100,4 @@ exceptions: - FDR - SSR - SSG + - REST diff --git a/fern/products/docs/docs.yml b/fern/products/docs/docs.yml index b6af8552..a772631f 100644 --- a/fern/products/docs/docs.yml +++ b/fern/products/docs/docs.yml @@ -67,6 +67,9 @@ navigation: path: ./pages/component-library/default-components/code-blocks.mdx icon: fa-duotone fa-code slug: code-blocks + - page: Copy + path: ./pages/component-library/default-components/copy.mdx + icon: fa-duotone fa-copy - page: Download path: ./pages/component-library/default-components/download.mdx icon: fa-duotone fa-download diff --git a/fern/products/docs/pages/changelog/2025-11-08.mdx b/fern/products/docs/pages/changelog/2025-11-08.mdx new file mode 100644 index 00000000..d96ee41d --- /dev/null +++ b/fern/products/docs/pages/changelog/2025-11-08.mdx @@ -0,0 +1,12 @@ +## New Copy component for inline copyable text + +The `` 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. + +You can also customize what gets copied to the clipboard using the `clipboard` prop. This is useful when you want simplify commands, versions, or URLs for readability while copying complete values. + +```jsx Markdown +Use the Fern CLI to build and consume REST APIs. The latest version is +v2.0. +``` + +Read more in the [Copy component documentation](/learn/docs/writing-content/components/copy). diff --git a/fern/products/docs/pages/component-library/default-components/copy.mdx b/fern/products/docs/pages/component-library/default-components/copy.mdx new file mode 100644 index 00000000..8af8124f --- /dev/null +++ b/fern/products/docs/pages/component-library/default-components/copy.mdx @@ -0,0 +1,44 @@ +--- +title: Copy +description: Make text copyable with a click-to-copy button. +--- + +The `` component makes text copyable with a single click. Use it inline to allow readers to copy version numbers, commands, API keys, or other text snippets without selecting and copying manually. + +## Usage + +
+
+ Use the Fern CLI to build and consume REST APIs. The current version is v2.0. +
+
+ +```jsx Markdown +Use the Fern CLI to build and consume REST APIs. The current version is v2.0. +``` + +## Variants + +### Custom clipboard content + +Use the `clipboard` prop to display one value while copying a different value to the clipboard This is useful when you want simplify commands, versions, or URLs for readability while copying complete values. + +
+
+ Install the CLI using npm install +
+
+ +```jsx Markdown +Install the CLI using npm install +``` + +## Properties + + + The text content to display and make copyable. This is what users see on the page. + + + + Custom text to copy to the clipboard. Use this when you want to display one value but copy a different value. + diff --git a/fern/products/docs/pages/component-library/default-components/overview.mdx b/fern/products/docs/pages/component-library/default-components/overview.mdx index 8e04b2f6..575f7e33 100644 --- a/fern/products/docs/pages/component-library/default-components/overview.mdx +++ b/fern/products/docs/pages/component-library/default-components/overview.mdx @@ -3,7 +3,7 @@ title: 'Components overview' description: 'Built-in components for creating interactive documentation' --- -Fern includes 20 built-in components for creating interactive documentation. Select a component below to view usage examples and configuration options. +Fern includes 21 built-in components for creating interactive documentation. Select a component below to view usage examples and configuration options. Code examples with syntax highlighting and interactive features + + Make text copyable with a click-to-copy button +