diff --git a/fern/docs.yml b/fern/docs.yml
index bdded70ded7..cf0c290188f 100644
--- a/fern/docs.yml
+++ b/fern/docs.yml
@@ -239,25 +239,38 @@ navigation:
contents:
- page: Accordion
path: ./pages/docs/components/accordions.mdx
+ icon: 'square-caret-down'
- page: Accordion Groups
path: ./pages/docs/components/accordion-groups.mdx
+ icon: table-rows
- page: Callouts
path: ./pages/docs/components/callouts.mdx
+ icon: 'circle-exclamation'
- page: Cards
path: ./pages/docs/components/cards.mdx
+ icon: "rectangle"
- page: Card Groups
path: ./pages/docs/components/card-groups.mdx
+ icon: 'rectangles-mixed'
- page: Code Blocks
path: ./pages/docs/components/code-blocks.mdx
slug: code-blocks
+ icon: "rectangle-code"
- page: Steps
path: ./pages/docs/components/steps.mdx
+ icon: 'arrow-progress'
+ - page: Frames
+ path: ./pages/docs/components/frames.mdx
+ icon: 'frame'
- page: Tabs
path: ./pages/docs/components/tabs.mdx
- - page: Endpoint Snippets
- path: ./pages/fern-docs/components/endpoint-snippets.mdx
- - page: Icon
- path: ./pages/fern-docs/components/icon.mdx
+ icon: 'window-restore'
+ - page: Endpoint Request Snippet
+ path: ./pages/docs/components/endpoint-request-snippet.mdx
+ icon: 'turn-up'
+ - page: Endpoint Response Snippet
+ path: ./pages/docs/components/endpoint-response-snippet.mdx
+ icon: 'turn-down'
- tab: api
layout:
- api: API Reference
diff --git a/fern/pages/docs/components/endpoint-request-snippet.mdx b/fern/pages/docs/components/endpoint-request-snippet.mdx
new file mode 100644
index 00000000000..1855dc748f2
--- /dev/null
+++ b/fern/pages/docs/components/endpoint-request-snippet.mdx
@@ -0,0 +1,20 @@
+---
+title: Endpoint Request Snippet
+excerpt: 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 /snippets` endpoint.
+
+<EndpointRequestSnippet endpoint='POST /snippets' />
+
+<Aside>
+
+<CodeBlock title="Markdown">
+```jsx
+<EndpointRequestSnippet endpoint='POST /snippets' />
+```
+</CodeBlock>
+
+</Aside>
\ No newline at end of file
diff --git a/fern/pages/docs/components/endpoint-response-snippet.mdx b/fern/pages/docs/components/endpoint-response-snippet.mdx
new file mode 100644
index 00000000000..abb7d1f9ed1
--- /dev/null
+++ b/fern/pages/docs/components/endpoint-response-snippet.mdx
@@ -0,0 +1,20 @@
+---
+title: Endpoint Response Snippet
+excerpt: Reference an endpoint response from your API Reference
+---
+
+The `EndpointResponseSnippet` component is used to reference an endpoint
+request from your API Reference. Below is an example of referencing the
+response for the `POST /snippets` endpoint.
+
+<EndpointResponseSnippet endpoint='POST /snippets' />
+
+<Aside>
+
+<CodeBlock title="Markdown">
+```jsx
+<EndpointResponseSnippet endpoint='POST /snippets' />
+```
+</CodeBlock>
+
+</Aside>
\ No newline at end of file
diff --git a/fern/pages/docs/components/frames.mdx b/fern/pages/docs/components/frames.mdx
index e69de29bb2d..517ccb6a71f 100644
--- a/fern/pages/docs/components/frames.mdx
+++ b/fern/pages/docs/components/frames.mdx
@@ -0,0 +1,21 @@
+---
+title: 'Frames'
+excerpt: 'Wrap images in a container with the frame component'
+---
+
+<Frame caption="Beautiful mountains">
+ <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" />
+</Frame>
+
+<Aside>
+
+<CodeBlocks>
+ ```jsx title="Markdown"
+ <Frame caption="Beautiful mountains">
+ // Or a relative path to an image in the project
+ <img src="https://images.pexels.com/photos/1867601.jpeg" />
+ </Frame>
+ ```
+</CodeBlocks>
+
+</Aside>
\ No newline at end of file
diff --git a/fern/pages/fern-docs/components/accordion.mdx b/fern/pages/fern-docs/components/accordion.mdx
deleted file mode 100644
index 94230fed839..00000000000
--- a/fern/pages/fern-docs/components/accordion.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: Collapse content using Accordion
-description: Use the Accordion and AccordionGroup components to show or collapse content from view.
----
-
-The `Accordion` component is used to collapse content until the user chooses to view it. You can group related `Accordion` components together using the `AccordionGroup` component.
-
-## Props
-
-| prop | type | description | default |
-|------------|--------|-----------------------------------------|---------|
-| *title* | string | Displayed title for the Accordion | none |
-
-All props are optional. However, generally you should always include a title for an `Accordion`, as otherwise it renders without text like this:
-
-<Accordion>Content for an Accordion with no title</Accordion>
-
-## Usage
-
-### Single Accordion
-
-<CodeBlock>
-```mdx
-<Accordion title='Single Accordion'>
- Standalone content
-</Accordion>
-```
-</CodeBlock>
-
-This renders as:
-
-<Accordion title='Single Accordion'>Standalone content</Accordion>
-
-### Grouped Accordions
-
-<CodeBlock>
-```mdx
-<AccordionGroup>
- <Accordion title='Grouped Accordion 1'>Grouped content 1</Accordion>
- <Accordion title='Grouped Accordion 2'>Grouped content 2</Accordion>
-</AccordionGroup>
-```
-</CodeBlock>
-
-This renders as:
-
-<AccordionGroup>
- <Accordion title='Grouped Accordion 1'>Grouped content 1</Accordion>
- <Accordion title='Grouped Accordion 2'>Grouped content 2</Accordion>
-</AccordionGroup>
\ No newline at end of file
diff --git a/fern/pages/fern-docs/components/availability.mdx b/fern/pages/fern-docs/components/availability.mdx
deleted file mode 100644
index d6598d58c03..00000000000
--- a/fern/pages/fern-docs/components/availability.mdx
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: Show the Availability of endpoints
-description: Indicate the status of a feature using the Availability component. Display a tag of beta, generally available, or deprecated.
----
-
-The `Availability` component is used to indicate the availability status of a feature, such as an endpoint. This component renders as a tag within your documentation.
-
-Within the API reference documentation generated using Fern Docs, use the [Fern Definition `availability`](/learn/overview/define-your-api/ferndef/availability) property or the [OpenAPI extension `x-fern-availability`](/learn/overview/define-your-api/openapi/extensions) to indicate availability.
-
-In the Markdown/MDX pages that make up the rest of your documentation site, use the `Availability` component as shown below to render the tag.
-
-## Props
-
-| prop | type | description | default |
-| ------ | ------ | -------------------------------- | ------- |
-| _type_ | string | `'beta' ｜ 'GA' ｜ 'deprecated'` | `'GA'` |
-
-All props are optional.
-
-## Usage
-
-### Beta availability
-
-Indicates that a feature is in <Availability type='beta' />. This means that the feature is still in development and may change before it is released to the public.
-
-Example:
-
-<CodeBlock title="Beta example">
- ```mdx
- <Availability type="beta" />
- ```
-</CodeBlock>
-
-This renders as:
-
-<Availability type="beta" />
-
-### General availability
-
-Indicates that a feature is <Availability type='GA' /> (Generally Available). This means that the feature is ready for use in production.
-
-Example:
-
-<CodeBlock title="GA example 1">
- ```mdx
- <Availability type="GA" />
- ```
-</CodeBlock>
-
-`'GA'` is the default value for the `type` prop. Thus, you can also use:
-
-<CodeBlock title="GA example 2">
- ```mdx
- <Availability />
- ```
-</CodeBlock>
-
-Either of the above two examples renders as:
-
-<Availability />
-
-### Deprecated availability
-
-Indicates that a feature is <Availability type='deprecated' />. This means that the feature is no longer supported and will be removed in a future release.
-
-Example:
-
-<CodeBlock title="Deprecated example">
- ```mdx
- <Availability type="deprecated" />
- ```
-</CodeBlock>
-
-This renders as:
-
-<Availability type="deprecated" />
diff --git a/fern/pages/fern-docs/components/callout.mdx b/fern/pages/fern-docs/components/callout.mdx
deleted file mode 100644
index 3c3d1bf6bc4..00000000000
--- a/fern/pages/fern-docs/components/callout.mdx
+++ /dev/null
@@ -1,200 +0,0 @@
----
-title: Highlight content with Callout
-description: Use the Callout component to visually highlight important content within your documentation. Configure the 'intent' as 'info', 'success', or 'warn'.
----
-
-The `Callout` component is used when you want to visually highlight important content for the user.
-
-<Tip>
-It is helpful to add a `<br />` tag after the `Callout` component to ensure that the next component is not too close to the callout.
-</Tip>
-
-## Props
-
-| prop | type | description | default |
-|----------|--------|---------------------------------------------------------------------------------------------|---------|
-| *intent* | string | `'info'｜ 'success'｜ 'warning' ｜ 'error' ｜`<br />`'note' ｜ 'launch' ｜ 'tip' ｜ 'check'` | `info` |
-| *title* | string | Displayed title for the callout | none |
-
-All props are optional.
-
-The `Callout` component's `intent` prop alters its color and icon.
-
-Alternatively, you can use each of the `intent` prop values as its own component, such as `<Info>` and `<Success>`. These components take an optional `title` prop.
-
-## Usage
-
-### Info
-
-<CodeBlocks>
- <CodeBlock title='Callout component with intent'>
- ```mdx
- <Callout intent='info' title='Info example'>
- This is an info callout.
- </Callout>
- ```
- </CodeBlock>
- <CodeBlock title='Info component'>
- ```mdx
- <Info title='Info example'>
- This is an info callout.
- </Info>
- ```
- </CodeBlock>
-</CodeBlocks>
-
-Either version of the code above renders as:
-
-<Info title='Info example'>
- This is an info callout.
-</Info>
-
-### Success
-
-<CodeBlocks>
- <CodeBlock title='Callout component with intent'>
- ```mdx
- <Callout intent='success' title='Success example'>
- This is a success callout.
- </Callout>
- ```
- </CodeBlock>
- <CodeBlock title='Success component'>
- ```mdx
- <Success title='Success example'>
- This is a success callout.
- </Success>
- ```
- </CodeBlock>
-</CodeBlocks>
-
-Either version of the code above renders as:
-
-<Success title='Success example'>
- This is a success callout.
-</Success>
-
-### Warning
-
-<CodeBlocks>
- <CodeBlock title='Callout component with intent'>
- ```mdx
- <Callout intent='warning' title='Warning example'>
- This is a warning callout.
- </Callout>
- ```
- </CodeBlock>
- <CodeBlock title='Warning component'>
- ```mdx
- <Warning title='Warning example'>
- This is a warning callout.
- </Warning>
- ```
- </CodeBlock>
-</CodeBlocks>
-
-Either version of the code above renders as:
-
-<Warning title='Warning example'>
- This is a warning callout.
-</Warning>
-
-### Error
-
-<CodeBlocks>
- <CodeBlock title='Callout component with intent'>
- ```mdx
- <Callout intent='error' title='Error example'>
- This is an error callout.
- </Callout>
- ```
- </CodeBlock>
- <CodeBlock title='Error component'>
- ```mdx
- <Error title='Error example'>
- This is an error callout.
- </Error>
- ```
- </CodeBlock>
-</CodeBlocks>
-
-Either version of the code above renders as:
-
-<Error title='Error example'>
- This is an error callout.
-</Error>
-
-### Note
-
-<CodeBlocks>
- <CodeBlock title='Callout component with intent'>
- ```mdx
- <Callout intent='note' title='Note example'>
- This is a note callout.
- </Callout>
- ```
- </CodeBlock>
- <CodeBlock title='Note component'>
- ```mdx
- <Note title='Note example'>
- This is a note callout.
- </Note>
- ```
- </CodeBlock>
-</CodeBlocks>
-
-Either version of the code above renders as:
-
-<Note title='Note example'>
- This is a note callout.
-</Note>
-
-### Launch / LaunchNote
-
-<CodeBlocks>
- <CodeBlock title='Callout component with intent'>
- ```mdx
- <Callout intent='launch' title='Launch example'>
- This is a launch callout.
- </Callout>
- ```
- </CodeBlock>
- <CodeBlock title='LaunchNote component'>
- ```mdx
- <LaunchNote title='Launch example'>
- This is a launch callout.
- </LaunchNote>
- ```
- </CodeBlock>
-</CodeBlocks>
-
-Either version of the code above renders as:
-
-<LaunchNote title='Launch example'>
- This is a launch callout.
-</LaunchNote>
-
-### Tip
-
-<CodeBlocks>
- <CodeBlock title='Callout component with intent'>
- ```mdx
- <Callout intent='tip' title='Tip example'>
- This is a tip callout.
- </Callout>
- ```
- </CodeBlock>
- <CodeBlock title='Tip component'>
- ```mdx
- <Tip title='Tip example'>
- This is a tip callout.
- </Tip>
- ```
- </CodeBlock>
-</CodeBlocks>
-
-Either version of the code above renders as:
-
-<Tip title='Tip example'>
- This is a tip callout.
-</Tip>
\ No newline at end of file
diff --git a/fern/pages/fern-docs/components/card.mdx b/fern/pages/fern-docs/components/card.mdx
deleted file mode 100644
index c7655ee9a45..00000000000
--- a/fern/pages/fern-docs/components/card.mdx
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: Use Card to display content in a box
-description: The Card component displays content in a box, with an optional title, icon, href (link), and content. Create a grid of boxes using the Cards component.
----
-
-Use the `Card` component to display content in a rectangular box.
-
-## Props
-
-| prop | type | description | default |
-|---------------|---------|-------------------------------|----------|
-| *title* | string | Displayed title for the card | none |
-| *icon* | string | Font Awesome icon | none |
-| *href* | string | A link to another page | none |
-
-All props are optional.
-
-### The `icon` prop
-The usage for the `icon` prop for this component is identical to the `icon` prop for the `Icon` component. See [Icons](/learn/docs/components/icons#set-icon-and-style) for more information about setting this prop.
-
-## Usage
-
-### Single `Card` without content
-
-For a `Card` that does not contain content, use a single self-closing `<Card />` tag, as shown below:
-
-<CodeBlock title='Single card without content'>
-```mdx
-<Card
- title='Python'
- icon='brands python'
- href='https://github.com/fern-api/fern/tree/main/generators/python'
-/>
-```
-</CodeBlock>
-
-This renders as:
-
-<Card
- title='Python'
- icon='brands python'
- href='https://github.com/fern-api/fern/tree/main/generators/python'
-/>
-
-This `Card` shows the `title` and `icon` passed in via props, but otherwise does not contain any content. When clicked, it will open the link provided to its `href` prop.
-
-### Single `Card` with content
-
-For a `Card` that contains content, use both the opening and closing tags (`<Card>` and `</Card>`) around the content, as shown below:
-
-<CodeBlock title='Single card with content'>
-```mdx
-<Card
- title='Python'
- icon='brands python'
- href='https://github.com/fern-api/fern/tree/main/generators/python'
->
- View the source code for Fern's Python SDK generator.
-</Card>
-```
-</CodeBlock>
-
-This renders as:
-
-<Card
- title='Python'
- icon='brands python'
- href='https://github.com/fern-api/fern/tree/main/generators/python'
->
- View the source code for Fern's Python SDK generator.
-</Card>
-
-### Multiple `Cards`
-
-Use the `Cards` component to display multiple `Card` components in a grid view. Wrap the `<Card>` and `</Card>` tags around the `Card` components as shown below:
-
-<CodeBlock title='The Cards component'>
-```mdx
-<Cards>
- <Card
- title='Python'
- icon='brands python'
- href='https://github.com/fern-api/fern/tree/main/generators/python'
- />
- <Card
- title='Java'
- icon='brands java'
- href='https://github.com/fern-api/fern/tree/main/generators/java'
- />
- <Card
- title='Go'
- icon='brands golang'
- href='https://github.com/fern-api/fern/tree/main/generators/go'
- />
-</Cards>
-```
-</CodeBlock>
-
-This renders as:
-
-<Cards>
- <Card
- title='Python'
- icon='brands python'
- href='https://github.com/fern-api/fern/tree/main/generators/python'
- />
- <Card
- title='Java'
- icon='brands java'
- href='https://github.com/fern-api/fern/tree/main/generators/java'
- />
- <Card
- title='Go'
- icon='brands golang'
- href='https://github.com/fern-api/fern/tree/main/generators/go'
- />
-</Cards>
\ No newline at end of file
diff --git a/fern/pages/fern-docs/components/codeblocks.mdx b/fern/pages/fern-docs/components/codeblocks.mdx
deleted file mode 100644
index 06aa7e8329c..00000000000
--- a/fern/pages/fern-docs/components/codeblocks.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Display code in tabs with CodeBlocks
-description: Use the CodeBlocks component to show multiple code snippets in a tabbed view.
----
-
-The `CodeBlocks` component is used to display multiple code snippets in a tabbed view. It does not take any props.
-
-Within the `CodeBlocks` component, use [Markdown fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) along with a title and optional [syntax highlighting](https://www.markdownguide.org/extended-syntax/#syntax-highlighting). Please refer to Fern's [Code snippets](/learn/docs/content/code-snippets) guide for a full list of highlighting features.
-
-<Note>
-The `CodeBlock` component (singular) is deprecated in favor of using Markdown fenced code blocks. The `CodeBlock` component was previously used to add a title to a fenced code block, but Fern now supports setting the title directly on the code block instead. If you used `CodeBlock` in your docs before, it will continue to work, but we recommend that you phase out its use.
-</Note>
-
-## Usage
-
-<Warning>
- For fenced code blocks inside a `CodeBlocks` component, be sure to set their `title` to give descriptive titles to the tabs. Otherwise, the tabs by default display `Untitled`.
-</Warning>
-
-Example:
-
-````mdx
-<CodeBlocks>
-
-```bash title="Install the Fern CLI tool for a single project"
-npm install fern-api
-```
-
-```bash title="Install the Fern CLI tool globally"
-npm install -g fern-api
-```
-
-</CodeBlocks>
-````
-
-This renders as:
-
-<CodeBlocks>
-
-```bash title="Install the Fern CLI tool for a single project"
-npm install fern-api
-```
-
-```bash title="Install the Fern CLI tool globally"
-npm install -g fern-api
-```
-
-</CodeBlocks>
diff --git a/fern/pages/fern-docs/components/custom-react-components.mdx b/fern/pages/fern-docs/components/custom-react-components.mdx
deleted file mode 100644
index ba7297da1a4..00000000000
--- a/fern/pages/fern-docs/components/custom-react-components.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Custom React components
-description: Use React to create custom components for your Fern Docs site, such as header and footer components.
----
-{/* This is a starter page for documenting custom React components. It has not yet been added to docs.yml. Please remove this comment once it has been added to docs.yml.*/}
-
-Using a custom React app, Fern makes it possible to create custom components to insert into your Fern Docs.
-
-<Note title="Note">
-The approach demonstrated on this page is subject to change as we make improvements to the plugin architecture.
-</Note>
-
-## Try out the custom-app example on GitHub
-
-This example builds custom `NavHeader` and `NavFooter` components on top of Fern's [docs-starter-openapi](https://github.com/fern-api/docs-starter-openapi/) GitHub template.
-
-[View these components in action.](https://custom-js-example.docs.buildwithfern.com/get-started/welcome)
-
-## Requirements
-- Node 18 or above
-- Yarn
-- [Fern CLI](/learn/overview/cli/overview)
-
-## Steps
-<Steps>
-
-### Step 1: Clone the example repository
-
-Clone the [example repository](https://github.com/fern-api/docs-custom-js-example/tree/main).
-
-### Step 2: Update site configuration files
-
-In the `fern/` folder:
-- Update the organization name in `fern.config.json` to your own.
-- Set a unique testing `url` in `docs.yml`. Example:
-
-```yaml
-instances:
- - url: YOUR_NAME-custom-app-example.docs.buildwithfern.com
-```
-
-### Step 3: Install dependencies
-
-In your cloned repository, enter the `custom-app/` folder and install the project dependencies with Yarn:
-
-```shell
-cd custom-app
-yarn
-```
-
-### Step 4: Build the app and generate docs
-
-From the `custom-app/` folder, run:
-
-```shell
-yarn build
-fern generate --docs
-```
-
-### Step 5: View the docs site
-
-Visit the generated docs site URL and view the `NavHeader` and `NavFooter` components.
-
-</Steps>
-
-## Important notes
-
-If you build your own custom React components based on this example, note that:
-
-- `ReactDOM.render()` may need to be called multiple times to prevent it from unmounting. This side-effect will be removed in the future.
-- `yarn build` or `npm build` must output `dist` files with deterministic names. This example uses this vite config to accomplish it. Then, reference the js/css files in `docs.yml` to get picked up by Fern Docs.
-- You may need to update your CD steps to include building the React app.
-- If you use Tailwind, make sure to prefix the Tailwind classes and disable preflight to prevent conflicts with Fern's stylesheet.
\ No newline at end of file
diff --git a/fern/pages/fern-docs/components/endpoint-snippets.mdx b/fern/pages/fern-docs/components/endpoint-snippets.mdx
deleted file mode 100644
index 461e6c33621..00000000000
--- a/fern/pages/fern-docs/components/endpoint-snippets.mdx
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Endpoint request & response snippets
-description: The EndpointRequestSnippet and EndpointResponseSnippet components display response and request snippets for endpoints in your API, within your Markdown pages.
----
-
-The `EndpointRequestSnippet` and `EndpointResponseSnippet` components allow you to generate endpoint request and response examples from your API definition and use them inline within your Markdown pages.
-
-## Props
-
-| prop | type | description | default |
-| ---------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| _endpoint_ | string | The endpoint, including the HTTP method and path.<br />Use the format `"METHOD /PATH"`. Examples:<br />`"POST /pet"`<br />`"GET /store/order/:id"`<br />`"PUT /user/:username"` | none |
-
-The `endpoint` prop is required.
-
-## Usage
-
-You can only use endpoints that [you have defined](/learn/overview/define-your-api), using OpenAPI or Fern Definition. If you have [generated an API Reference](/learn/docs/api-references/generate-api-ref) in your Fern Docs site, you can view it to verify the endpoints available for use as the `endpoint` prop. For example, see the endpoint inside the red box below:
-
-
-
-### EndpointRequestSnippet
-
-This example is from the Petstore API used in our [Docs Quickstarts](/learn/overview/get-started#fern-docs-quickstarts).
-
-<CodeBlock title='EndpointRequestSnippet example'>
-```mdx
-<EndpointRequestSnippet endpoint='POST /pet' />
-```
-</CodeBlock>
-
-This renders as:
-
-
-
-### EndpointResponseSnippet
-
-<CodeBlock title='EndpointResponseSnippet example'>
-```mdx
-<EndpointResponseSnippet endpoint='GET /store/order/:id' />
-```
-</CodeBlock>
-
-This renders as:
-
-
\ No newline at end of file
diff --git a/fern/pages/fern-docs/components/icon.mdx b/fern/pages/fern-docs/components/icon.mdx
deleted file mode 100644
index ae1d911e322..00000000000
--- a/fern/pages/fern-docs/components/icon.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: Use Font Awesome or custom icons
-description: Use and style the 26,000+ icons available in the Font Awesome icon library in your Fern Docs. Fern also supports custom icons on its Business plan.
----
-
-The `Icon` component is used to display and style an icon. We use Font Awesome to power the icons within Fern Docs.
-
-## Props
-
-| prop | type | description | default |
-| ------- | ------- | ----------------------------------------------- | ------------- |
-| _icon_ | string | Font Awesome icon (e.g., `'check'`) | none |
-| _color_ | string | icon CSS color (e.g., `'red'` or `'#00641e80'`) | `'#0000009b'` |
-| _size_ | integer | icon size inside curly braces (e.g., `{8}`) | `{4}` |
-
-The `icon` prop is required. The `color` and `size` props are optional.
-
-## Usage
-
-### Basic example
-
-<CodeBlock title="Example">
- ```mdx
- <Icon icon="check" color="green" size={6} />
- ```
-</CodeBlock>
-
-This renders as:
-
-<Icon icon="check" color="green" size={6} />
-
-### Set icon and style
-
-[Font Awesome](https://fontawesome.com/) is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. Fern Docs gives you access to all the icons available under the Font Awesome Pro plan.
-
-<Warning>Fern does not support the `SVG+JS` method.</Warning>
-
-To set the `icon` type and style, you can use the Font Awesome syntax:
-
-<CodeBlock title="Example with Font Awesome syntax">
- ```mdx
- <Icon icon="fa-solid fa-check" color="green" size={6} />
- ```
-</CodeBlock>
-
-This renders as:
-
-<Icon icon="fa-solid fa-check" color="green" size={6} />
-
-You can omit the `fa-` prefix, and the default icon style is `fa-solid`. Thus, you can simplify the prop like this:
-
-<CodeBlock title="Simplified example with default style">
- ```mdx
- <Icon icon="check" color="green" size={6} />
- ```
-</CodeBlock>
-
-You can use other Font Awesome icon styles:
-
-<CodeBlock title="Simplified example with light style">
- ```mdx
- <Icon icon="light check" color="green" size={6} />
- ```
-</CodeBlock>
-
-This renders as:
-
-<Icon icon="light check" color="green" size={6} />
-
-View the sidebar at [Font Awesome's icon search page](https://fontawesome.com/search) for available styles.
-
-### Set icon size
-
-For the size prop, the value of 1 is equal to 0.25rem, which translates to 4px by default in common browsers. The default size value is 4, which translates to 16x16px.
-
-For example, to display an icon that's double the default size (36x36px), use `size={8}`:
-
-<CodeBlock title="Size example">
- ```mdx
- <Icon icon="check" color="green" size={8} />
- ```
-</CodeBlock>
-
-This renders as:
-
-<Icon icon="check" color="green" size={8} />
-
-## Custom icons
-
-If you'd like to B.Y.O.I. (Bring Your Own Icons), reach out to us at [support@buildwithfern.com](mailto:support@buildwithfern.com). This is a paid feature available on our `Business plan`.
diff --git a/fern/pages/fern-docs/components/steps.mdx b/fern/pages/fern-docs/components/steps.mdx
deleted file mode 100644
index 2e200c6aef8..00000000000
--- a/fern/pages/fern-docs/components/steps.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Use Steps to display instructions
-description: The Steps component helps you display a set of instructions to the user.
----
-
-The `Steps` component is used when you want to display a set of instructions for the user to follow.
-
-## Usage
-
-Within the `<Steps>` component, preface each step heading with `###` as shown below:
-
-<CodeBlock title="Steps example">
-```mdx
-<Steps>
- ### Step 1
- Initial instructions.
-
- ### Step 2
- More instructions.
-
- ### Step 3
- More instructions.
-</Steps>
-```
-</CodeBlock>
-
-This renders as:
-
-<Steps>
- ### Step 1
- Initial instructions.
-
- ### Step 2
- More instructions.
-
- ### Step 3
- More instructions.
-</Steps>
-
-You can use your choice of text for each step's heading. For example:
-
-<Steps>
- ### 1: Do something.
- Initial instructions.
-
- ### Next: Do something else.
- More instructions.
-
- ### Three.
- More instructions.
-</Steps>
\ No newline at end of file
diff --git a/fern/pages/fern-docs/components/tabs.mdx b/fern/pages/fern-docs/components/tabs.mdx
deleted file mode 100644
index bf5d6cd1a74..00000000000
--- a/fern/pages/fern-docs/components/tabs.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: Display related content with Tabs
-description: The Tabs and Tab components allow you to display related content in a tabbed view.
----
-
-The `Tabs` and `Tab` components are used when you want to display related content in a tabbed view. Use the `Tabs` component as the outer wrapper around multiple `Tab` components.
-
-## Props
-
-| prop | type | description | default |
-|------------|--------|-----------------------------------------|---------|
-| *title* | string | Displayed title for the Tab | none |
-
-The `title` prop is required for the tabbed view to render correctly.
-
-## Usage
-
-<CodeBlock title='Tabs example'>
-```mdx
-<Tabs>
- <Tab title='Tab 1'>Content in Tab 1.</Tab>
- <Tab title='Tab 2'>
- Related content in Tab 2.
- </Tab>
-</Tabs>
-```
-</CodeBlock>
-
-This renders as:
-
-<Tabs>
- <Tab title='Tab 1'>Content in Tab 1.</Tab>
- <Tab title='Tab 2'>
- Related content in Tab 2.
- </Tab>
-</Tabs>