Skip to content

docs: Add documentation for hiding docs components using CSS #385

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 8, 2025
Merged

docs: Add documentation for hiding docs components using CSS #385

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6c46435
Documentation updates from Promptless
promptless[bot] Aug 7, 2025
fd35de5
restructure page, add specific hiding examples
devalog Aug 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 71 additions & 47 deletions fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,75 @@ Adding Custom Components is available on the Pro plan.

You can add custom CSS to your docs to further customize the look and feel. The defined class names are applied across all MDX files.

Here's an example of what you can do with custom CSS:
<Steps>
### Create `styles.css`

Add a `styles.css` file and include it in your `fern/` project:

<CodeBlock title="Add the styles.css file">
```bash {5}
fern/
├─ openapi/
├─ pages/
├─ images/
├─ styles.css
├─ docs.yml
└─ fern.config.json
```
</CodeBlock>

### Edit `docs.yml`

In `docs.yml`, specify the path to the `styles.css` file:

<CodeBlock title="docs.yml">
```yaml
css: ./styles.css
```
</CodeBlock>

### Add multiple custom CSS files (optional)

You can specify any number of custom CSS files:

<CodeBlock title="docs.yml">
```yaml
css:
- ./css/header-styles.css
- ./css/footer-styles.css
```
</CodeBlock>

</Steps>

<Note>
For customizing the background, logo, font, and layout of your Docs via Fern's built-in styling,
check out the [Global Configuration](/learn/docs/getting-started/global-configuration).
</Note>

### Common use cases

<AccordionGroup>
<Accordion title="Hiding page elements">

You can use custom CSS to hide specific Fern docs components that you don't want
to display.

<CodeBlock title="styles.css">
```css
.fern-page-actions {
display: none !important;
}
```
</CodeBlock>

Commonly hidden components include `.fern-page-actions` (**Open in
ChatGPT**, **Open in Claude**, and **Copy Page** buttons) and `.fern-layout-footer-toolbar`
(Fern feedback widget). You can target other Fern UI components using their CSS class names. Use your browser's developer tools to inspect elements and find their class names.
</Accordion>
<Accordion title="Adding custom styling">

You can use custom CSS to create brand-specific styling for tables, components, and other elements in your documentation.

<CodeBlock title="styles.css">
```css maxLines=10
Expand Down Expand Up @@ -71,52 +139,8 @@ Here's an example of what you can do with custom CSS:
}
```
</CodeBlock>

<Steps>
### Create `styles.css`

Add a `styles.css` file and include it in your `fern/` project:

<CodeBlock title="Add the styles.css file">
```bash {5}
fern/
├─ openapi/
├─ pages/
├─ images/
├─ styles.css
├─ docs.yml
└─ fern.config.json
```
</CodeBlock>

### Edit `docs.yml`

In `docs.yml`, specify the path to the `styles.css` file:

<CodeBlock title="docs.yml">
```yaml
css: ./styles.css
```
</CodeBlock>

### Add multiple custom CSS files (optional)

You can specify any number of custom CSS files:

<CodeBlock title="docs.yml">
```yaml
css:
- ./css/header-styles.css
- ./css/footer-styles.css
```
</CodeBlock>

</Steps>

<Note>
For customizing the background, logo, font, and layout of your Docs via Fern's built-in styling,
check out the [Global Configuration](/learn/docs/getting-started/global-configuration).
</Note>
</Accordion>
</AccordionGroup>

## Custom JavaScript

Expand Down