+
+
+ Primary button
+ Success button
+ Warning button
+ Danger button
-
-
- ```jsx
-
-
- Primary Button
- Success Button
- Warning Button
- Danger Button
-
-
-
- Outlined Button
- Minimal Button
-
-
-
- Small Button
- Normal Button
- Large Button
-
-
-
- Download
- Continue
- Favorite
-
-
-
- Link Button
- Disabled Button
-
+
+ Plain button
- ```
-
-
+
+
+
+```jsx Markdown
+
Primary button
+
Success button
+
Warning button
+
Danger button
+
Plain button
+```
+### Styles
+
+
+
+ Large, outlined, rounded
+ Minimal
+ Monospaced
+
+
+
+```jsx Markdown
+
Large, outlined, rounded
+
Minimal
+
Monospaced
+```
+
+### Sizes
+
+
+
+ Small Button
+ Normal Button
+ Large Button
+
+
+
+```jsx Markdown
+
Small Button
+
Normal Button
+
Large Button
+```
+
+### With icons
+
+
+
+ Download
+ Continue
+ Favorite
+
+
+
+```jsx Markdown
+
Download
+
Continue
+
Favorite
+```
+
+### Link and disabled states
+
+
+
+ Link Button
+ Disabled Button
+
+
+
+```jsx Markdown
+
Link Button
+
Disabled Button
+```
## Properties
@@ -140,4 +173,4 @@ The `Button` component provides a flexible way to create interactive buttons wit
Additional CSS classes
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/fern/products/docs/pages/component-library/default-components/callouts.mdx b/fern/products/docs/pages/component-library/default-components/callouts.mdx
index 2cefb24ff..e9fe869be 100644
--- a/fern/products/docs/pages/component-library/default-components/callouts.mdx
+++ b/fern/products/docs/pages/component-library/default-components/callouts.mdx
@@ -1,93 +1,72 @@
---
-title: 'Callouts'
+title: 'Callout'
description: 'Highlight important information, warnings, or tips in your documentation.'
---
-Callouts help highlight important information, warnings, or tips in your documentation. They provide visual emphasis through distinct styling and icons to make key messages stand out to readers.
+The `
` component highlights important information, warnings, or tips in your documentation. Use callouts to emphasize critical details that readers shouldn't miss, such as breaking changes, prerequisites, or helpful best practices.
-To display very short pieces of information like status indicators and version numbers, use the [Badges component](/docs/writing-content/components/badges)
+To display very short pieces of information like status indicators and version numbers, use [badges](/docs/writing-content/components/badges).
-## Callout varieties
+## Usage
-### Note callouts
+
+This adds a note in your documentation.
+
-This adds a note in the content
-
-```jsx
-This adds a note in the content
+```jsx Markdown
+This adds a note in your documentation.
```
-### Warning callouts
+## Variants
-This raises a warning to watch out for
+### Intents
-```jsx
+
This raises a warning to watch out for
-```
-
-### Success callouts
-
This indicates a successful operation or positive outcome
-
-```jsx
-This indicates a successful operation or positive outcome
-```
-
-### Error callouts
-
-This indicates a potential error
-
-```jsx
This indicates a potential error
-```
-
-### Info callouts
-
-This draws attention to important information
-
-```jsx
This draws attention to important information
-```
-
-### Launch callouts
-
-This celebrates an announcement, styled using the primary accent of the docs site
-
-```jsx
This celebrates an announcement, styled using the primary accent of the docs site
-```
-
-
-### Tip callouts
-
This suggests a helpful tip
+This shows a checked status
+
-```jsx
+```jsx Markdown
+This raises a warning to watch out for
+This indicates a successful operation or positive outcome
+This indicates a potential error
+This draws attention to important information
+This celebrates an announcement, styled using the primary accent of the docs site
This suggests a helpful tip
+This shows a checked status
```
-### Check callouts
+### Custom icon
-This brings us a checked status
+
+
+This callout uses a title and a custom Font Awesome icon.
+
+
-```jsx
-This brings us a checked status
+```jsx Markdown
+
+This callout uses a title and a custom Font Awesome icon.
+
```
## Properties
-Customize your Callouts using the following properties:
-
The type of callout. Available options: `info`, `warning`, `success`, `error`, `note`, `launch`, `tip`, `check`
- The title of your Callout
+ The title of your callout
- The icon of your Callout. Can be:
+ The icon of your callout. Can be:
- A [Font Awesome](https://fontawesome.com/icons) icon name
- A React element
- If not specified, uses a default icon based on the intent:
@@ -101,20 +80,3 @@ Customize your Callouts using the following properties:
- check: Check
-
-
-
-This Callout uses a title and a custom icon.
-
-
-
-```markdown
-
-This Callout uses a title and a custom icon.
-
-```
-
-
-
diff --git a/fern/products/docs/pages/component-library/default-components/card-groups.mdx b/fern/products/docs/pages/component-library/default-components/card-groups.mdx
deleted file mode 100644
index cb30305d5..000000000
--- a/fern/products/docs/pages/component-library/default-components/card-groups.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: 'Card Groups'
-description: 'Show cards side by side in a grid format'
----
-
-The `CardGroup` component lets you organize multiple [`Card` components](/docs/writing-content/components/cards) in a responsive grid layout. You can use this component to organize related content like feature lists, navigation options, or step-by-step guides.
-
-
-
-
-
- Generate a Python SDK and publish to PyPi
-
-
- Generate a PHP SDK and publish to Packagist
-
-
- Generate a Java SDK and publish to Maven Central
-
-
- Generate a Go SDK and publish as a module
-
-
-
-
- ```jsx
-
-
- Generate a Python SDK and publish to PyPi
-
-
- Generate a PHP SDK and publish to Packagist
-
-
- Generate a Java SDK and publish to Maven Central
-
-
- Generate a Go SDK and publish as a module
-
-
- ```
-
-
-
-## Properties
-
-
- The number of columns to display in the grid
-
diff --git a/fern/products/docs/pages/component-library/default-components/cards.mdx b/fern/products/docs/pages/component-library/default-components/cards.mdx
index c37b19711..78444af2e 100644
--- a/fern/products/docs/pages/component-library/default-components/cards.mdx
+++ b/fern/products/docs/pages/component-library/default-components/cards.mdx
@@ -1,61 +1,129 @@
---
-title: 'Cards'
+title: 'Card'
description: 'Use cards to display content in a box'
---
-Cards are container components that group related content and actions together. They provide a flexible way to present information with optional elements like icons, titles, and links in a visually distinct box.
+The `` component groups related content and actions in a visually distinct box. Optional elements include icons, titles, and links.
-You can use individual cards or [use the `CardGroup` component](/docs/writing-content/components/card-groups) to arrange multiple cards in a responsive grid layout.
+You can use individual cards or arrange multiple cards in a responsive grid layout using the `` component. Card groups are useful for organizing feature lists, navigation options, or step-by-step guides.
+## Usage
-
-
-
- The icon field references a Font Awesome icon.
-
-
-
-```jsx
+
+
+ The icon field references a Font Awesome icon.
+
+
+
+```jsx Markdown
The icon field references a Font Awesome icon.
```
-
-
-
-
+## Variants
+
+### Group of cards
+
+
+
+
+ Learn how to water your plants
+
+
+ Understand sunlight requirements for different plants
+
+
+ Choose the right soil for optimal plant growth
+
+
+ Apply fertilizer to keep your plants healthy
+
+
+
+
+```jsx Markdown
+
+
+ Learn how to water your plants
+
+
+ Understand sunlight requirements for different plants
+
+
+ Choose the right soil for optimal plant growth
+
+
+ Apply fertilizer to keep your plants healthy
+
+
+```
+
+### Custom icon
+
+
}
- href="https://github.com/fern-api/fern/tree/main/generators/python"
+ title="Plant care"
+ icon={
}
+ href="/learn/docs/writing-content/components/cards"
>
Pass in an image tag to use a custom icon.
-
-
-```jsx
+
+
+```jsx Markdown
```
-
-
-
-
+### Custom icon position
+
+
You can set the icon position as `left` or `top`.
-
-
-```jsx
+
+
+```jsx Markdown
```
-
-
-## Adding images to cards
+### Images
Cards support displaying images alongside content. The image automatically resizes to fit the card dimensions, so you typically don't need to specify `imageWidth` or `imageHeight` unless you want to override the default behavior.
-
-
+
Display an image alongside your card content. The image automatically scales to fit the card.
-
-
-```jsx
+
+
+```jsx Markdown
Display an image alongside your card content. The image automatically scales to fit the card.
```
-
-
-
-
-
+
Position the image at the top of the card for a banner-style layout.
-
-
-```jsx
-
+
+```jsx Markdown
+
Position the image at the top of the card for a banner-style layout.
```
-
-
## Properties
+### `
` properties
+
+
+ The number of columns to display in the grid
+
+
+### `` properties
+
The title text to display in the card
diff --git a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx
index 90efb4d18..e14ce4df8 100644
--- a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx
+++ b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx
@@ -1,160 +1,103 @@
---
-title: 'Code Blocks'
+title: 'Code block'
description: 'Learn how to enhance your documentation with customizable code blocks featuring syntax highlighting, line highlighting, focusing, and more.'
max-toc-depth: 2
---
-Fern uses [Shiki](https://shiki.matsu.io/) for syntax highlighting in code blocks.
-It's reliable and performant. Below are examples of how you can configure syntax highlighting in code snippets.
+The `` component displays code examples with syntax highlighting powered by [Shiki](https://shiki.matsu.io/). Code blocks support line highlighting, focusing, titles, and deep linking to make your code examples more readable and interactive.
-## Basic
+## Usage
-To create a code snippet, you need to wrap your code in three backticks.
-You can also specify the language for syntax highlighting after the opening backticks.
-
-
-
- ```js
- console.log("hello world")
- ```
-
-
- ````mdx
- ```js
- console.log("hello world")
- ```
- ````
-
-
+Use three backticks with an optional language identifier.
+
+ ```js
+ console.log("hello world")
+ ```
+
-## Titles
+````mdx Markdown
+```js
+console.log("hello world")
+```
+````
-You can add a title to your code snippet by adding a title after the language identifier.
+## Variants
-
-
- ```js Hello World Snippet
- console.log("hello world")
- ```
-
-
- ````mdx
- ```js Hello World Snippet
- console.log("hello world")
- ```
- ````
+### Titles
-
- You may also use a `title` prop or `filename` prop to achieve the same result.
-
- For example, `title="Hello World Snippet"` or `filename="Hello World Snippet"`.
-
-
-
+Add a title to your code snippet by adding a title after the language identifier. Alternatively, use a `title` prop (`title="Snippet with title"`) or `filename` prop (`filename="Snippet with title"`) to achieve the same result.
-## Line highlighting
+
+```js Snippet with title
+console.log("hello world")
+```
+
-You can highlight specific lines in your code snippet by placing a numeric range inside `{}`
-after the language identifier.
+````mdx Markdown
+```js Snippet with title
+console.log("hello world")
+```
+````
-
-
- ```js {2-4}
- console.log("Line 1");
- console.log("Line 2");
- console.log("Line 3");
- console.log("Line 4");
- console.log("Line 5");
- ```
-
-
- ````markdown
- ```javascript {2-4}
- console.log("Line 1");
- console.log("Line 2");
- console.log("Line 3");
- console.log("Line 4");
- console.log("Line 5");
- ```
- ````
+### Line highlighting
-
- The range is inclusive and can be a single number, a comma-separated list of numbers, or ranges.
+Highlight specific lines in your code snippet by placing a numeric range inside `{}`
+after the language identifier. The range is inclusive and can be a single number, a comma-separated list of numbers, or ranges.
- For example, `{1,3,5-7}` will highlight lines 1, 3, 5, 6, and 7.
-
-
-
+
+```js {2-4, 6}
+console.log("Line 1");
+console.log("Line 2");
+console.log("Line 3");
+console.log("Line 4");
+console.log("Line 5");
+console.log("Line 6");
+```
+
+
+````markdown Markdown
+```javascript {2-4, 6}
+console.log("Line 1");
+console.log("Line 2");
+console.log("Line 3");
+console.log("Line 4");
+console.log("Line 5");
+console.log("Line 6");
+```
+````
-## Line focusing
+### Line focusing
-Instead of highlighting lines, you can focus on specific lines by adding a comment `[!code focus]` or by adding a
+Focus on specific lines by adding a comment `[!code focus]` or by adding a
`focus` attribute after the language identifier. The `focus` attribute works the same way as the `highlight` attribute.
-
-
- ```javascript focus={2-4}
- console.log("Line 1");
- console.log("Line 2");
- console.log("Line 3");
- console.log("Line 4");
- console.log("Line 5");
- ```
-
-
- ````markdown
- ```javascript focus={2-4}
- console.log("Line 1");
- console.log("Line 2");
- console.log("Line 3");
- console.log("Line 4");
- console.log("Line 5");
- ```
- ````
-
-
+
+```javascript focus={2-4}
+console.log("Line 1");
+console.log("Line 2");
+console.log("Line 3");
+console.log("Line 4");
+console.log("Line 5");
+```
+
+
+````markdown Markdown
+```javascript focus={2-4}
+console.log("Line 1");
+console.log("Line 2");
+console.log("Line 3");
+console.log("Line 4");
+console.log("Line 5");
+```
+````
-## Start line
+### Start line
-You can control which line appears first in your code block by adding a `startLine` attribute after the language identifier. This is particularly useful for longer code snippets where you want to highlight the main logic while still providing the complete context.
+Control which line appears first in your code block by adding a `startLine` attribute after the language identifier. This is useful for longer code snippets where you want to highlight the main logic while still providing the complete context.
-
-
- ```javascript startLine={6}
- console.log("Line 1");
- console.log("Line 2");
- console.log("Line 3");
- console.log("Line 4");
- console.log("Line 5");
- console.log("Line 6");
- console.log("Line 7");
- console.log("Line 8");
- console.log("Line 9");
- console.log("Line 10");
- console.log("Line 11");
- console.log("Line 12");
- console.log("Line 13");
- console.log("Line 14");
- console.log("Line 15");
- console.log("Line 16");
- console.log("Line 17");
- console.log("Line 18");
- console.log("Line 19");
- console.log("Line 20");
- console.log("Line 21");
- console.log("Line 22");
- console.log("Line 23");
- console.log("Line 24");
- console.log("Line 25");
- console.log("Line 26");
- console.log("Line 27");
- console.log("Line 28")
- ```
-
-
- ````markdown
- ```javascript startLine={6}
+
+```javascript startLine={6}
console.log("Line 1");
console.log("Line 2");
console.log("Line 3");
@@ -184,79 +127,109 @@ You can control which line appears first in your code block by adding a `startLi
console.log("Line 27");
console.log("Line 28")
```
- ````
-
-
+
+
+````markdown Markdown
+```javascript startLine={6}
+console.log("Line 1");
+console.log("Line 2");
+console.log("Line 3");
+console.log("Line 4");
+console.log("Line 5");
+console.log("Line 6");
+console.log("Line 7");
+console.log("Line 8");
+console.log("Line 9");
+console.log("Line 10");
+console.log("Line 11");
+console.log("Line 12");
+console.log("Line 13");
+console.log("Line 14");
+console.log("Line 15");
+console.log("Line 16");
+console.log("Line 17");
+console.log("Line 18");
+console.log("Line 19");
+console.log("Line 20");
+console.log("Line 21");
+console.log("Line 22");
+console.log("Line 23");
+console.log("Line 24");
+console.log("Line 25");
+console.log("Line 26");
+console.log("Line 27");
+console.log("Line 28")
+```
+````
-## Max height
+### Max height
-You can control the max height of the code block by adding
+Control the max height of the code block by adding
a `maxLines` attribute after the language identifier. The
`maxLines` attribute should be a number representing the maximum
number of lines to display. By default, the code block will display up to 20 lines.
When you use `maxLines`, an expand button automatically appears on hover in the top-right corner, allowing users to view the full code content in an expanded overlay that displays over the page.
-
-
- ```python maxLines=10
- def is_prime(num):
- """Check if a number is prime."""
- if num <= 1:
+
+```python maxLines=10
+def is_prime(num):
+ """Check if a number is prime."""
+ if num <= 1:
+ return False
+ for i in range(2, num):
+ if num % i == 0:
return False
- for i in range(2, num):
- if num % i == 0:
- return False
- return True
+ return True
- start = 10
- end = 50
+start = 10
+end = 50
- print(f"Prime numbers between {start} and {end} are:")
+print(f"Prime numbers between {start} and {end} are:")
- prime_numbers = []
+prime_numbers = []
- for num in range(start, end+1):
- if is_prime(num):
- prime_numbers.append(num)
+for num in range(start, end+1):
+ if is_prime(num):
+ prime_numbers.append(num)
- for prime in prime_numbers:
- print(prime)
- ```
-
-
- ````markdown maxLines=10
- ```python maxLines=10
- def is_prime(num):
- """Check if a number is prime."""
- if num <= 1:
+for prime in prime_numbers:
+ print(prime)
+```
+
+
+````markdown Markdown maxLines=10
+```python maxLines=10
+def is_prime(num):
+ """Check if a number is prime."""
+ if num <= 1:
+ return False
+ for i in range(2, num):
+ if num % i == 0:
return False
- for i in range(2, num):
- if num % i == 0:
- return False
- return True
+ return True
- start = 10
- end = 50
+start = 10
+end = 50
- print(f"Prime numbers between {start} and {end} are:")
+print(f"Prime numbers between {start} and {end} are:")
- prime_numbers = []
+prime_numbers = []
- for num in range(start, end+1):
- if is_prime(num):
- prime_numbers.append(num)
+for num in range(start, end+1):
+ if is_prime(num):
+ prime_numbers.append(num)
- for prime in prime_numbers:
- print(prime)
- ```
- ````
+for prime in prime_numbers:
+ print(prime)
+```
+````
-
- To disable the default 20 lines limit, you can set `maxLines` to `0`.
-
-
-
+
+ To disable the default 20 lines limit, you can set `maxLines` to `0`.
+
+
+#### Custom styling
To hide the expand button or add custom styling, target the `.fern-expand-button` selector:
@@ -267,89 +240,80 @@ To hide the expand button or add custom styling, target the `.fern-expand-button
}
```
-## Wrap overflow
+### Wrap overflow
By default, long lines that exceed the width of the code block become scrollable:
-
-
- ```txt title="Without wordWrap"
- A very very very long line of text that may cause the code block to overflow and scroll as a result.
- ```
-
-
- ````markdown
- ```txt title="Without wordWrap"
- A very very very long line of text that may cause the code block to overflow and scroll as a result.
- ```
- ````
-
-
+
+```txt title="Without wordWrap"
+A very very very long line of text that may cause the code block to overflow and scroll as a result.
+```
+
+
+````markdown Markdown
+```txt title="Without wordWrap"
+A very very very long line of text that may cause the code block to overflow and scroll as a result.
+```
+````
To disable scrolling and wrap overflow onto the next line, use the `wordWrap` prop:
-
-
- ```txt title="With wordWrap" wordWrap
- A very very very long line of text that may cause the code block to overflow and scroll as a result.
- ```
-
-
- ````markdown
- ```txt title="With wordWrap" wordWrap
- A very very very long line of text that may cause the code block to overflow and scroll as a result.
- ```
- ````
-
-
+
+```txt title="With wordWrap" wordWrap
+A very very very long line of text that may cause the code block to overflow and scroll as a result.
+```
+
+
+````markdown Markdown
+```txt title="With wordWrap" wordWrap
+A very very very long line of text that may cause the code block to overflow and scroll as a result.
+```
+````
## Deep linking
-You can make specific text within code blocks clickable by defining a `links` map. This is useful for linking to documentation, API references, or related resources directly from your code examples.
+Make specific text within code blocks clickable by defining a `links` map. This is useful for linking to documentation, API references, or related resources directly from your code examples.
The `links` property accepts a map where keys are matching patterns (exact strings or regex) and values are the URLs to link to.
### Exact string matching
-
-
-
- ```typescript
- import { PlantClient } from "@plantstore/sdk";
-
- const client = new PlantClient({ apiKey: "YOUR_API_KEY" });
- const plant = await client.createPlant({
- name: "Monstera",
- species: "Monstera deliciosa"
- });
- ```
-
-
-
- ````markdown
-
- ```typescript
- import { PlantClient } from "@plantstore/sdk";
-
- const client = new PlantClient({ apiKey: "YOUR_API_KEY" });
- const plant = await client.createPlant({
- name: "Monstera",
- species: "Monstera deliciosa"
- });
- ```
-
- ````
-
-
+
+
+```typescript
+import { PlantClient } from "@plantstore/sdk";
+
+const client = new PlantClient({ apiKey: "YOUR_API_KEY" });
+const plant = await client.createPlant({
+ name: "Monstera",
+ species: "Monstera deliciosa"
+});
+```
+
+
+
+````markdown Markdown
+
+```typescript
+import { PlantClient } from "@plantstore/sdk";
+
+const client = new PlantClient({ apiKey: "YOUR_API_KEY" });
+const plant = await client.createPlant({
+ name: "Monstera",
+ species: "Monstera deliciosa"
+});
+```
+
+````
- The `links` property uses JSON format. Each key in the map is matched exactly against text in the Code Block, and matching text becomes a clickable link to the corresponding URL.
-
+ The `links` property uses JSON format. Each key in the map is matched exactly against text in the code block, and matching text becomes a clickable link to the corresponding URL.
+
### Regex pattern matching
@@ -357,143 +321,134 @@ You can use regex patterns for more flexible matching. This is useful when you w
In the example below, the pattern `/get\\w+/` matches both `getPlant` and `getGarden`, while `/Plant(Store|Client)/` matches both `PlantStore` and `PlantClient`.
-
-
-
- ```python
- from plantstore import PlantStore, PlantClient
+
+
+```python
+from plantstore import PlantStore, PlantClient
- store = PlantStore(api_key="YOUR_API_KEY")
- client = PlantClient(store)
+store = PlantStore(api_key="YOUR_API_KEY")
+client = PlantClient(store)
- plant = store.getPlant(plant_id="123")
- garden = store.getGarden(garden_id="456")
- ```
-
-
-
- ````markdown
-
- ```python
- from plantstore import PlantStore, PlantClient
-
- store = PlantStore(api_key="YOUR_API_KEY")
- client = PlantClient(store)
-
- plant = store.getPlant(plant_id="123")
- garden = store.getGarden(garden_id="456")
- ```
-
- ````
-
-
+plant = store.getPlant(plant_id="123")
+garden = store.getGarden(garden_id="456")
+```
+
+
+
+````markdown Markdown
+
+```python
+from plantstore import PlantStore, PlantClient
+
+store = PlantStore(api_key="YOUR_API_KEY")
+client = PlantClient(store)
+
+plant = store.getPlant(plant_id="123")
+garden = store.getGarden(garden_id="456")
+```
+
+````
- When using regex patterns, remember to escape special characters with double backslashes (e.g., `\\w+`, `\\d+`) in the JSON string.
-
+ When using regex patterns, remember to escape special characters with double backslashes (e.g., `\\w+`, `\\d+`) in the JSON string.
+
-## Combining props
+### Combining props
You can combine the `title`, `highlight`, `focus`, `startLine`, `maxLines`, `wordWrap`, and `links`
props to create a code block with a title, highlighted lines, specific starting line,
a maximum height, and clickable links.
-
-
- ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}}
- console.log("Line 1");
- console.log("Line 2");
- console.log("Line 3");
- console.log("Line 4");
- console.log("Line 5");
- console.log("Line 6");
- console.log("Line 7");
- console.log("Line 8");
- console.log("Line 9");
- console.log("Line 10");
- ```
-
-
- ````markdown
- ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}}
- console.log("Line 1");
- console.log("Line 2");
- console.log("Line 3");
- console.log("Line 4");
- console.log("Line 5");
- console.log("Line 6");
- console.log("Line 7");
- console.log("Line 8");
- console.log("Line 9");
- console.log("Line 10");
- ```
- ````
-
-
-
-
-## Code Blocks with Tabs
-
-The `CodeBlocks` component allows you to display multiple code blocks in a tabbed interface.
-
-
-
-
- ```ruby title="hello_world.rb"
- puts "Hello World"
- ```
-
- ```php title="hello_world.php"
-
- ```
-
- ```rust title="hello_world.rs"
- fn main() {
- println!("Hello World");
- }
- ```
-
-
-
- ````jsx maxLines=0
-
- ```ruby title="hello_world.rb"
- puts "Hello World"
- ```
-
- ```php title="hello_world.php"
-
- ```
-
- ```rust title="hello_world.rs"
- fn main() {
- println!("Hello World");
- }
- ```
-
- ````
-
-
+
+```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}}
+console.log("Line 1");
+console.log("Line 2");
+console.log("Line 3");
+console.log("Line 4");
+console.log("Line 5");
+console.log("Line 6");
+console.log("Line 7");
+console.log("Line 8");
+console.log("Line 9");
+console.log("Line 10");
+```
+
+
+````markdown Markdown
+```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}}
+console.log("Line 1");
+console.log("Line 2");
+console.log("Line 3");
+console.log("Line 4");
+console.log("Line 5");
+console.log("Line 6");
+console.log("Line 7");
+console.log("Line 8");
+console.log("Line 9");
+console.log("Line 10");
+```
+````
+
+## Code blocks with tabs
+
+You can display multiple code blocks in a tabbed interface.
+
+
+
+ ```ruby title="hello_world.rb"
+ puts "Hello World"
+ ```
+
+ ```php title="hello_world.php"
+
+ ```
+
+ ```rust title="hello_world.rs"
+ fn main() {
+ println!("Hello World");
+ }
+ ```
+
+
+
+````jsx Markdown
+
+ ```ruby title="hello_world.rb"
+ puts "Hello World"
+ ```
+
+ ```php title="hello_world.php"
+
+ ```
+
+ ```rust title="hello_world.rs"
+ fn main() {
+ println!("Hello World");
+ }
+ ```
+
+````
## Language synchronization
-Multiple `CodeBlocks` on a documentation site automatically synchronize. This
-means when a user selects a `CodeBlock` with a specific language, all other
-`CodeBlocks` across your documentation site with the same language will
+Multiple `` components on a documentation site automatically synchronize. This
+means when a user selects a `` with a specific language, all other
+`` components across your documentation site with the same language will
automatically sync and switch to match. Language preferences are stored in
client-side local storage and persist across browser sessions.
The example below demonstrates language sync in action – choosing a language in
-either set of `CodeBlocks` will automatically update both sets to match:
+either set of `` components will automatically update both sets to match:
+
```python title="Python"
print("First code block!")
@@ -545,6 +500,7 @@ either set of `CodeBlocks` will automatically update both sets to match:
puts "Second code block - syncs with the one above!"
```
+
`CodeBlocks` automatically synchronize with [`` components that have a `language` property](/docs/writing-content/components/tabs#language-synchronization).
@@ -558,82 +514,70 @@ either set of `CodeBlocks` will automatically update both sets to match:
You can override the synchronization of code blocks by setting the `for` prop.
-
-
-
- ```bash title="Install using npm" for="npm"
- npm install plantstore
- ```
- ```bash title="Install using pnpm" for="pnpm"
- pnpm add plantstore
- ```
- ```bash title="Install using yarn" for="yarn"
- yarn add plantstore
- ```
-
-
-
- ```bash title="Uninstall using npm" for="npm"
- npm uninstall plantstore
- ```
- ```bash title="Uninstall using pnpm" for="pnpm"
- pnpm remove plantstore
- ```
- ```bash title="Uninstall using yarn" for="yarn"
- yarn remove plantstore
- ```
-
-
-
- ````md
-
- ```bash title="Install using npm" for="npm"
- npm install plantstore
- ```
- ```bash title="Install using pnpm" for="pnpm"
- pnpm add plantstore
- ```
- ```bash title="Install using yarn" for="yarn"
- yarn add plantstore
- ```
-
-
-
- ```bash title="Uninstall using npm" for="npm"
- npm uninstall plantstore
- ```
- ```bash title="Uninstall using pnpm" for="pnpm"
- pnpm remove plantstore
- ```
- ```bash title="Uninstall using yarn" for="yarn"
- yarn remove plantstore
- ```
-
- ````
-
-
-
-## Embed local code files
-
-
-
- Option A
- ```js
-
-
- Option A
-
-
+
+
+ ```bash title="Install using npm" for="npm"
+ npm install plantstore
+ ```
+ ```bash title="Install using pnpm" for="pnpm"
+ pnpm add plantstore
+ ```
+ ```bash title="Install using yarn" for="yarn"
+ yarn add plantstore
+ ```
+
+
+
+ ```bash title="Uninstall using npm" for="npm"
+ npm uninstall plantstore
+ ```
+ ```bash title="Uninstall using pnpm" for="pnpm"
+ pnpm remove plantstore
+ ```
+ ```bash title="Uninstall using yarn" for="yarn"
+ yarn remove plantstore
+ ```
+
+
+
+````md Markdown
+
+ ```bash title="Install using npm" for="npm"
+ npm install plantstore
+ ```
+ ```bash title="Install using pnpm" for="pnpm"
+ pnpm add plantstore
+ ```
+ ```bash title="Install using yarn" for="yarn"
+ yarn add plantstore
+ ```
+
+
+
+ ```bash title="Uninstall using npm" for="npm"
+ npm uninstall plantstore
+ ```
+ ```bash title="Uninstall using pnpm" for="pnpm"
+ pnpm remove plantstore
+ ```
+ ```bash title="Uninstall using yarn" for="yarn"
+ yarn remove plantstore
+ ```
+
+````
+
+### Embed local code files
+
+
+```js
+
+
+`````tsx Markdown
+```js
+
+ Fern supports using the `
-Fern also implements a custom component for embedding downloadable assets:
-- `
- Path to your local asset (relative to current MDX file)
-
+
+
-
- MIME type of the asset (e.g. 'video/mp4', 'application/pdf')
-
-
-```jsx
-
-
-
- Videos with audio will automatically play when the page loads. If you want to prevent this behavior, consider using the [`` component](/learn/docs/content/write-markdown#embedding-videos) instead, which provides more control over playback.
-
-
-
-
-
-
+
+ Videos with audio will automatically play when the page loads. Using [`` component](/learn/docs/content/write-markdown#embedding-videos) disables this behavior and provides more control over playback.
+
- ```jsx
-
-
- ```
+
+
+
+
-
-
+```jsx Markdown
+
+
+```
### PDF document
+
-```jsx
+```jsx Markdown
+
+ Download PDF
+
+
-
- The supported file types and behavior may vary depending on the browser and the type of content being embedded. For
- video files, consider using MP4 format for maximum compatibility.
-
+```jsx Markdown
+
+ Download PDF
+
+```
-## Downloadable assets
+## Properties
+
+
+ Path to your local asset (relative to current MDX file)
+
+
+
+ MIME type of the asset (e.g. 'video/mp4', 'application/pdf')
+
+
+
+ | File Type | MIME Type |
+ | ---------- | ----------------- |
+ | PDF | `application/pdf` |
+ | MP4 Video | `video/mp4` |
+ | WebM Video | `video/webm` |
+ | SVG Image | `image/svg+xml` |
+ | PNG Image | `image/png` |
+ | JPEG Image | `image/jpeg` |
+
+
+ The supported file types and behavior may vary depending on the browser and the type of content being embedded. For
+ video files, consider using MP4 format for maximum compatibility.
+
+
+
+
+### Downloadable asset properties
Enable users to download assets from within your documentation, instead of linking to them, by using the `` component.
@@ -100,12 +110,4 @@ Enable users to download assets from within your documentation, instead of linki
- Download PDF
-
-```jsx
-
- Download PDF
-
-```
diff --git a/fern/products/docs/pages/component-library/default-components/endpoint-request-snippet.mdx b/fern/products/docs/pages/component-library/default-components/endpoint-request-snippet.mdx
index caa9f3366..eec7d46d4 100644
--- a/fern/products/docs/pages/component-library/default-components/endpoint-request-snippet.mdx
+++ b/fern/products/docs/pages/component-library/default-components/endpoint-request-snippet.mdx
@@ -1,31 +1,26 @@
---
-title: 'Endpoint Request Snippet'
+title: 'Endpoint request snippet'
description: 'Reference an endpoint request from your API Reference'
---
-The `EndpointRequestSnippet` component is used to reference an endpoint request from
-your API Reference. Below is an example of referencing the request for the `POST /chat/{domain}` endpoint.
+Use the `` components to reference an endpoint request from
+your API Reference.
-
- ```jsx
-
-
-will be rendered as:
+## Usage
+
-### Reference particular examples
+```jsx Markdown
+
- ### Define named examples
+ ### Set the example name in your spec
- The highlighted lines show how to set the example name.
-
```yaml openapi.yml {12}
@@ -66,10 +61,7 @@ to the name of the example. See the steps below:
- ### Reference the example
-
- In the API Definition, the example had a name `ExampleWithMarkley`. You can reference
- the example directly:
+ ### Directly reference the example
```jsx Markdown {3}
` component to reference an endpoint response from
+your API Reference.
-
-```jsx
-
-
-will be rendered as
-
-
+
-### Reference particular examples
+```jsx Markdown
+
- ### Define named examples
-
- The highlighted lines show how to set the example name.
+ ### Set the example name in your spec
@@ -72,10 +65,7 @@ to the name of the example. See the steps below:
- ### Reference the example
-
- In the API Definition, the example had a name `ExampleWithMarkley`. You can reference
- the example directly:
+ ### Directly reference the example
```jsx Markdown {3}
-
-
-
-
- Full Request
-
-
-
-
- Request Path
-
-
-
-
- Request Query
-
-
-
-
- Request Body
-
-
-
-
-
-
-
-
-
- Full Response
-
-
-
-
- Response Body
-
-
-
-
-
-
-
- Full Schema
-
-
-
-
-
- The EndpointSchemaSnippet component does not yet support rendering markdown-rich field descriptions.
-
- See [request.endpoint.path](/learn/docs/writing-content/components/schema-snippet#request.endpoint.path) above for an example of a markdown-rich description that does not yet render as markdown.
-
+The `` component displays endpoint schemas from your API Reference. By default, it renders the complete schema, or you can use the `selector` prop to display specific parts like request body, response, path parameters, or query parameters.
+
+
+ Markdown-rich field descriptions aren't yet supported and will display as plain text. See the [Request path](#request-path) example below.
+
+
+## Usage
+
+
+
+
+```jsx Markdown
+
+
+
+```jsx Markdown
+
+
+
+```jsx Markdown
+
+
+
+```jsx Markdown
+
+
+
+```jsx Markdown
+
+
+
+```jsx Markdown
+
+
+
+```jsx Markdown
+
-
-
-
- ```jsx
-
-
-
-
-
-
-
- ```jsx
-
-
+The `
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
- ```jsx
-
-
+The `` component displays [Font Awesome](https://fontawesome.com/) icons in your documentation with support for all Font Awesome Pro styles.
+
+## Usage
+
+
+
+```jsx Markdown
+
+```
+
+### Font Awesome styles
+
+
+
+
+
+
+
+
+
+
+
+
Size in 0.25rem increments (e.g., 4 = 1rem)
-
-## Font Awesome styles
-
-You can use any Font Awesome style by using either:
-- Short syntax: `icon="heart"` (defaults to solid)
-- Full syntax: `icon="fa-regular fa-heart"` (specific style)
-
-
-
-
-
-
-
-
-
-
-
-
-
- ```jsx
-
-
-
-## Best practices
-
-- Use icons consistently throughout your documentation
-- Keep icon sizes appropriate for their context (16-24px for inline, larger for featured items)
-- Ensure sufficient color contrast for accessibility
-- Use semantic icons that reinforce your message (e.g., warning icon for cautions)
-- Avoid using too many different icons which can create visual noise
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 210e86f76..b71c659fa 100644
--- a/fern/products/docs/pages/component-library/default-components/overview.mdx
+++ b/fern/products/docs/pages/component-library/default-components/overview.mdx
@@ -1,44 +1,149 @@
---
title: 'Components overview'
-description: 'Enhance your docs with our built-in component library. Use components to create interactive and engaging documentation.'
+description: 'Built-in components for creating interactive documentation'
---
-Fern provides a library of 15+ built-in-components to make your documentation more interactive and engaging. Components are building blocks that you can add to any MDX page.
-
-## Usage
-
-Specify a component in your MDX file while writing content. For example, to add a `Card` component, use the following syntax:
-
-
-````mdx
-
- Give us a star! Fern's CLI & docs source code is available on GitHub.
-
-````
-
-This will automatically render a card with the title, icon, and content you specified.
-
-
- Give us a star! The source code to Fern's CLI is available on GitHub.
-
-
-## Bring your own components
-
-Want to bring your own UI components, such as a custom header and footer? You can on the Enterprise plan. [Contact us](https://buildwithfern.com/contact) to learn more.
-
-For styling and functionality customizations, see [Custom CSS & JavaScript](/docs/customization/custom-css-js).
-
-## Requests for new components
-
-Have a component in mind that you'd like to see in Fern? Let us know by filing a [GitHub Issue](https://github.com/fern-api/fern/issues/new?assignees=&labels=&projects=&template=feature-request.md&title=%5BFeature%5D).
-
-
+Fern includes 20 built-in components for creating interactive documentation. Select a component below to view usage examples and configuration options.
+
+
+ Expandable sections for FAQs and collapsible content
+
+
+ Linkable anchors for paragraphs, tables, and other content
+
+
+ Sticky container for content positioned to the right of the page
+
+
+ Small labels for status, versions, and metadata
+
+
+ Interactive button component with multiple variants and intents
+
+
+ Highlighted boxes for important information, warnings, and tips
+
+
+ Visually distinct box with optional icons and links
+
+
+ Code examples with syntax highlighting and interactive features
+
+
+ Embedded local assets like PDFs, videos, and other media
+
+
+ Endpoint request snippets from your API Reference
+
+
+ Endpoint response snippets from your API Reference
+
+
+ Endpoint schema snippets from your API Reference
+
+
+ Container for images with optional captions and backgrounds
+
+
+ Font Awesome icons for visual elements
+
+
+ API parameter documentation with consistent formatting
+
+
+ Interactive request builder for testing API endpoints
+
+
+ Sequenced instructions with automatic numbering and anchor links
+
+
+ Tables with sticky headers that remain visible while scrolling
+
+
+ Tabbed interface for organizing related content
+
+
+ Additional information displayed on hover
+
+
\ No newline at end of file
diff --git a/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx b/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx
index 6117582b0..4eaa0ba04 100644
--- a/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx
+++ b/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx
@@ -1,49 +1,61 @@
---
-title: 'Parameters'
+title: 'Parameter field'
description: 'Display API parameter information with metadata like type, requirements, and descriptions'
---
-The `ParamField` component documents API parameters and properties with consistent formatting. It displays the parameter name, type, requirements, and description in a structured layout.
+The ParamField component documents API parameters and properties with consistent formatting for type, requirements, default values, and descriptions.
+## Usage
-
-
-
- The user's display name
-
+
+
+ The user's display name
+
+
+
+ Maximum number of items to return
+
+
+ The user's display name
+
+
+
+ Maximum number of items to return
+
+```
-
- Maximum number of items to return
-
+## Variants
-
- Use OAuth authentication instead
-
+### Deprecated parameter
-
- The current status of the user account
-
-
-
- ```jsx
-
- The user's display name
-
+
+
+ Use OAuth authentication instead
+
+
- Maximum number of items to return
-
+```jsx Markdown
+
+ Use OAuth authentication instead
+
+```
-
- Use OAuth authentication instead
-
+### Union types
-
- The current status of the user account
-
- ```
-
-
+
+
+ The current status of the user account
+
+
+ The current status of the user account
+
+```
## Properties
@@ -66,3 +78,7 @@ The `ParamField` component documents API parameters and properties with consiste
Marks the parameter as deprecated.
+
+
+ Whether to include the parameter in the table of contents. Defaults to `false`.
+
diff --git a/fern/products/docs/pages/component-library/default-components/runnable-endpoint.mdx b/fern/products/docs/pages/component-library/default-components/runnable-endpoint.mdx
index 86416ca7b..4f1735d39 100644
--- a/fern/products/docs/pages/component-library/default-components/runnable-endpoint.mdx
+++ b/fern/products/docs/pages/component-library/default-components/runnable-endpoint.mdx
@@ -1,29 +1,26 @@
---
-title: Runnable Endpoint
+title: Runnable endpoint
description: Test API endpoints directly from your documentation with an interactive request builder.
---
-The `` component enables users to make real HTTP requests to your APIs directly in the API Reference. It auto-detects endpoint definitions from your API specification and provides a request builder with inputs for headers, path parameters, query parameters, and request bodies.
+The `` component lets users make real HTTP requests to your APIs directly in the API Reference. It auto-detects endpoint definitions from your API specification and provides a request builder with inputs for headers, path parameters, query parameters, and request bodies.
-
-
+## Usage
+
+
-
-
-````jsx
+```jsx Markdown
-
+```
## Features
-The Runnable Endpoint supports:
+The component supports:
- **Multiple examples** – When your endpoint has multiple pre-configured examples, the component displays a dropdown selector in the header so users can switch between different examples
- **Multiple environments** – If your API defines multiple environments (production, staging, development), the component automatically displays an environment selector so users can test against different base URLs
-- **API Reference integration** – Each Runnable Endpoint includes a button that links users to the full API reference documentation for the endpoint
+- **API Reference integration** – Each `` includes a button that links users to the full API Reference documentation for the endpoint
- **Real-time response preview** – Users can view response status, headers, body, and response time immediately after sending requests
- **Form persistence** – Form inputs are automatically persisted in the browser's local storage, so users' test data is preserved even when navigating between pages or refreshing the browser
diff --git a/fern/products/docs/pages/component-library/default-components/snippets/example-code.js b/fern/products/docs/pages/component-library/default-components/snippets/example-code.js
index 116035184..0367caee2 100644
--- a/fern/products/docs/pages/component-library/default-components/snippets/example-code.js
+++ b/fern/products/docs/pages/component-library/default-components/snippets/example-code.js
@@ -1 +1 @@
-console.log("I love Fern!");
\ No newline at end of file
+console.log("I also love Fern!");
\ No newline at end of file
diff --git a/fern/products/docs/pages/component-library/default-components/steps.mdx b/fern/products/docs/pages/component-library/default-components/steps.mdx
index 60156a695..224cfbea9 100644
--- a/fern/products/docs/pages/component-library/default-components/steps.mdx
+++ b/fern/products/docs/pages/component-library/default-components/steps.mdx
@@ -1,73 +1,43 @@
---
-title: 'Steps'
+title: 'Step'
description: 'Display a sequence of instructions or tasks with automatic numbering and anchor links.'
---
-The Steps component helps organize sequential content with automatic numbering, anchor links, and clickable step numbers that copy direct URLs to that step with visual feedback. Hover interactions reveal helpful link icons, making it ideal for tutorials, walkthroughs, or any content that needs to be followed in order.
-
-
-
-
-
- Log in to your account and navigate to Settings.
-
-
-
-
- ```jsx
-
-
- Log in to your account and navigate to Settings.
-
-
- ```
-
-
-
-
-
-
-
- Initial instructions.
-
-
-
- More instructions.
-
-
-
- Final Instructions
-
-
-
-
- ```jsx
-
-
- Initial instructions.
-
-
-
- More instructions.
-
-
-
- Final Instructions
-
-
- ```
-
-
+The `` component organizes sequential content with automatic numbering and anchor links. Use steps for tutorials, walkthroughs, setup guides, or any content that needs to be followed in order.
+
+## Usage
+
+
+
+
+ Log in to your account and navigate to **Settings**.
+
+
+ Select **Change password** and enter a new password.
+
+
+
+
+```jsx Markdown
+
+
+ Log in to your account and navigate to **Settings**.
+
+
+ Select **Change password** and enter a new password.
+
+
+```
## Properties
-### Steps Properties
+### `` properties
Whether to include the steps in the table of contents. Defaults to `false`.
-### Step Properties
+### `` properties
Optional title for the step
diff --git a/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx
index 40b31b18b..9dc538cb5 100644
--- a/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx
+++ b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx
@@ -1,33 +1,35 @@
---
-title: Sticky tables
+title: Sticky table
description: Display tables with sticky headers that remain visible while scrolling through table data.
---
-The `StickyTable` component provides a way to display tabular data with a fixed header that remains visible while scrolling through table rows. This is particularly useful for longer tables where users need to reference column headers while viewing data further down the table.
-
-Below is an example of a **normal Markdown table**. As you scroll down the page, the entire table, including the header, scrolls out of view.
-
-| Plant | Light Requirements | Water |
-|-------|-------------------|-------|
-| Fern | Partial shade | Weekly |
-| Snake Plant | Low to bright indirect | Bi-weekly |
-| Monstera | Bright indirect | Weekly |
-| Pothos | Low to bright indirect | Weekly |
-| Fiddle Leaf Fig | Bright indirect | Weekly |
-| Peace Lily | Low to medium indirect | Weekly |
-| Rubber Plant | Bright indirect | Weekly |
-| ZZ Plant | Low to bright indirect | Bi-weekly |
-| Philodendron | Medium to bright indirect | Weekly |
-| Aloe Vera | Bright direct | Bi-weekly |
-| Boston Fern | Partial shade | 2-3x weekly |
-| Spider Plant | Medium to bright indirect | Weekly |
-| Dracaena | Medium indirect | Weekly |
-| Bird of Paradise | Bright indirect to direct | Weekly |
-| Calathea | Medium indirect | Weekly |
-
-
-Below is an example of a **sticky table**. As you scroll down the page, the header row remains frozen at the top of the table.
-
+The `` component displays tabular data with a fixed header that remains visible while scrolling. Use sticky tables for longer datasets where users need to reference column headers throughout the table.
+
+## Usage
+
+
+
+ | Plant | Light Requirements | Water |
+ |-------|-------------------|-------|
+ | Fern | Partial shade | Weekly |
+ | Snake Plant | Low to bright indirect | Bi-weekly |
+ | Monstera | Bright indirect | Weekly |
+ | Pothos | Low to bright indirect | Weekly |
+ | Fiddle Leaf Fig | Bright indirect | Weekly |
+ | Peace Lily | Low to medium indirect | Weekly |
+ | Rubber Plant | Bright indirect | Weekly |
+ | ZZ Plant | Low to bright indirect | Bi-weekly |
+ | Philodendron | Medium to bright indirect | Weekly |
+ | Aloe Vera | Bright direct | Bi-weekly |
+ | Boston Fern | Partial shade | 2-3x weekly |
+ | Spider Plant | Medium to bright indirect | Weekly |
+ | Dracaena | Medium indirect | Weekly |
+ | Bird of Paradise | Bright indirect to direct | Weekly |
+ | Calathea | Medium indirect | Weekly |
+
+
+
+```jsx Markdown maxLines=10
| Plant | Light Requirements | Water |
|-------|-------------------|-------|
@@ -46,45 +48,16 @@ Below is an example of a **sticky table**. As you scroll down the page, the head
| Dracaena | Medium indirect | Weekly |
| Bird of Paradise | Bright indirect to direct | Weekly |
| Calathea | Medium indirect | Weekly |
-
-
-## Create a sticky table
-
-### Using Markdown
-
-Simply wrap any Markdown table with `` tags to make the header sticky. No changes to your table syntax are needed.
-
-
-
-
-```markdown
-
-
-| Plant | Light Requirements | Water |
-|-------|-------------------|-------|
-| Fern | Partial shade | Weekly |
-| Snake Plant | Low to bright indirect | Bi-weekly |
-
```
-
-
-
-| Plant | Light Requirements | Water |
-|-------|-------------------|-------|
-| Fern | Partial shade | Weekly |
-| Snake Plant | Low to bright indirect | Bi-weekly |
-
-
+
+## Variants
### Using HTML
-Simply add the `sticky` attribute to the opening `` tag. No further changes to your table syntax are needed.
+Add the `sticky` attribute to the opening `` tag. No further changes to your table syntax are needed.
-
-
-
-```markdown
+
@@ -106,10 +79,9 @@ Simply add the `sticky` attribute to the opening `
-```
-
-
-
+
+
+```jsx Markdown maxLines=10
@@ -131,10 +103,9 @@ Simply add the `sticky` attribute to the opening `
-
-
+```
-## Style a sticky table
+## Custom styling
Sticky tables can be styled independently from regular tables. To add custom styling, target the `.fern-table.sticky` selector:
diff --git a/fern/products/docs/pages/component-library/default-components/tabs.mdx b/fern/products/docs/pages/component-library/default-components/tabs.mdx
index d48c12c4c..f287a3d75 100644
--- a/fern/products/docs/pages/component-library/default-components/tabs.mdx
+++ b/fern/products/docs/pages/component-library/default-components/tabs.mdx
@@ -1,57 +1,45 @@
---
-title: Tabs
+title: Tab
description: The Tabs component allows you to display related content in a tabbed view with support for language synchronization.
---
-The Tabs component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples, code snippets, or documentation sections.
-
+The `` component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples, code snippets, or documentation sections.
+
+## Usage
+
+
+
+
+ ☝️ Welcome to the content that you can only see inside the first tab.
+
+
+ ✌️ Here's content that's only inside the second tab.
+
+
+ 💪 Here's content that's only inside the third tab.
+
+
+
+
+```jsx Markdown
-
- ☝️ Welcome to the content that you can only see inside the first Tab.
-
-
- ✌️ Here's content that's only inside the second Tab.
+
+ ☝️ Welcome to the content that you can only see inside the first tab.
-
- 💪 Here's content that's only inside the third Tab.
+
+ ✌️ Here's content that's only inside the second tab.
-
-
-
-```jsx
-
-
- ☝️ Welcome to the content that you can only see inside the first Tab.
+
+ 💪 Here's content that's only inside the third tab.
-
- ✌️ Here's content that's only inside the second Tab.
-
-
- 💪 Here's content that's only inside the third Tab.
-
-
+
```
-
-## Properties
+## Variants
-
- The title displayed in the tab header
-
-
-
- The language associated with the code block. Any arbitrary string may be used.
-
- When specified, enables global language synchronization across all tabs and code blocks with the same language value.
-
+### Language synchronization
-
- The content to be displayed when the tab is selected. Can include text, markdown, and components.
-
-
-## Language synchronization
-
-Multiple `Tabs` with a `language` property automatically synchronize. This means
+Multiple tabs with a `language` property automatically synchronize. This means
when a user selects a tab with a specific language, all other tabs across your
documentation site with the same language will automatically sync and switch to
match. Language preferences are stored in client-side local storage and persist
@@ -59,6 +47,7 @@ across browser sessions.
In the example below, choosing a language in either set of tabs will automatically update both sets to match:
+
```typescript
@@ -94,6 +83,7 @@ In the example below, choosing a language in either set of tabs will automatical
```
+
````jsx
@@ -118,7 +108,7 @@ In the example below, choosing a language in either set of tabs will automatical
- Language-enabled `Tabs` automatically synchronize with [`CodeBlocks` in that same language](/docs/writing-content/components/code-blocks#language-synchronization).
+ Language-enabled tabs automatically synchronize with [code blocks in that same language](/docs/writing-content/components/code-blocks#language-synchronization).
@@ -126,6 +116,7 @@ In the example below, choosing a language in either set of tabs will automatical
Tabs **without** the `language` property don't stay in sync with other tabs on your site. In the below example, choosing a language in
either set of tabs doesn't affect the other set of tabs:
+
```typescript
@@ -161,6 +152,7 @@ either set of tabs doesn't affect the other set of tabs:
```
+
````jsx
@@ -190,3 +182,19 @@ either set of tabs doesn't affect the other set of tabs:
+ The title displayed in the tab header
+
+
+
+ The language associated with the code block. Any arbitrary string may be used.
+
+ When specified, enables global language synchronization across all tabs and code blocks with the same language value.
+
+
+
+ The content to be displayed when the tab is selected. Can include text, markdown, and components.
+
+
diff --git a/fern/products/docs/pages/component-library/default-components/tooltips.mdx b/fern/products/docs/pages/component-library/default-components/tooltips.mdx
index f94de698b..499e248dc 100644
--- a/fern/products/docs/pages/component-library/default-components/tooltips.mdx
+++ b/fern/products/docs/pages/component-library/default-components/tooltips.mdx
@@ -1,19 +1,46 @@
---
-title: Tooltips
+title: Tooltip
description: Add interactive tooltips to your documentation.
---
-The Tooltips component provides a way to display additional information when users hover over an element. This is particularly useful for providing context or explanations without cluttering the interface.
+The `` component displays additional information when users hover over text or code elements. Use tooltips to provide context, definitions, or explanations without cluttering your documentation.
-## Tooltips in code
+## Usage
-The code tooltip component allows you to provide contextual information for variables and
-values within your code examples. When users hover over highlighted code, they
-can see explanations, documentation links, or additional context without leaving
-the code example.
+
+ Documentation becomes more interactive when you add tooltips to key terms.
+
-
-
+```tsx Markdown
+Documentation becomes more interactive when you add tooltips to key terms.
+```
+
+## Variants
+
+### Rich content
+
+
+You can include
Rich Content external links , and inline code with custom positioning for more detailed explanations
+
+
+````tsx Markdown
+You can include
+ Rich Content
+ external links , and inline code
+
+ }
+ side="right"
+>rich content with custom positioning for more detailed explanations.
+````
+
+### Code tooltips
+
+The code tooltip component allows you to provide contextual information for variables and values within your code examples. When users hover over highlighted code, they can see explanations, documentation links, or additional context without leaving the code example.
+
+
-
-
-`````tsx
+
+
+`````tsx Markdown
`````
-
-
-
-
+### Multiple code tooltips
+
+
-
-
-`````tsx
+
+
+`````tsx Markdown
`````
-
-
-### Properties
+## Properties
+
+### Text tooltip properties
+
+
+ The content to display in the tooltip. Can be a simple string or React component for more complex content.
+
+
+
+ Controls which side of the element the tooltip appears on.
+
+
+
+ The distance between the tooltip and the trigger element (px).
+
+
+### Code tooltip properties
Key-value pairs where the values are displayed in your code blocks.
@@ -140,6 +181,8 @@ const api = axios.create({
Key-value pairs where the values are displayed in the tooltips. The Key for `tooltips` must match the Key for `data`.
+
+
### Style a code tooltip
To customize code tooltips, target the `.fern-mdx-tooltip-content` selector. You can override CSS variables or add any custom styles:
@@ -151,47 +194,6 @@ To customize code tooltips, target the `.fern-mdx-tooltip-content` selector. You
}
```
-## Tooltips for text
-
-The text tooltip component allows you to provide contextual information for any text element in your documentation. When users hover over them, they can see definitions or additional context without leaving the current page.
-
-
-
-Documentation becomes more interactive when you add tooltips to key terms. You can include Rich Content external links , and inline code} side="right">rich content
-
-```tsx
-Documentation becomes more interactive when you add tooltips to key terms.
-
-You can include
- Rich Content
- external links , and inline code
-
- }
- side="right"
->rich content with custom positioning for more detailed explanations.
-```
-
-
-
-### Properties
-
-
- The content to display in the tooltip. Can be a simple string or React component for more complex content.
-
-
-
- Controls which side of the element the tooltip appears on.
-
-
-
- The distance in pixels between the tooltip and the trigger element.
-
-
-
### Style a text tooltip
To customize text tooltips, target the `.fern-mdx-tooltip-trigger` selector. You can override CSS variables for common customizations or add any custom styles:
@@ -205,4 +207,5 @@ To customize text tooltips, target the `.fern-mdx-tooltip-trigger` selector. You
--tooltip-transition-duration: 0.10s; /* Hover transition speed */
/* Add custom styles here */
}
-```
\ No newline at end of file
+```
+
-
-