Customization

CSS selectors reference

View as MarkdownOpen in Claude

Fern selectors use Tailwind CSS utilities and CSS custom properties. This page is a reference of all .fern-* selectors for customizing your documentation site.

Layout and structure

Selectors for page layout, backgrounds, and headings.

Fixed background image.

Default CSS
1.fern-background-image {
2  background-attachment: fixed;
3  background-size: cover;
4  background-repeat: no-repeat;
5  background-position-x: center;
6  background-position-y: center;
7}

Primary page heading (h1).

Default CSS
1.fern-page-heading {
2  margin-top: 0;
3  margin-bottom: 0;
4  display: inline-block;
5  leading-tight: 1.25;
6  text-wrap: balance;
7  word-wrap: break-word;
8}

Page layout container.

Default CSS
1.fern-layout-page {
2  max-width: var(--page-width-padded);
3  padding-left: var(--page-padding);
4  padding-right: var(--page-padding);
5  margin-left: auto;
6  margin-right: auto;
7  min-width: 0;
8  flex: 1 1 0%;
9  min-height: calc(100vh - var(--header-height));
10  display: flex;
11  flex-direction: column;
12}

Guide page layout.

Default CSS
1.fern-layout-guide {
2  padding-left: var(--page-padding);
3  padding-right: var(--page-padding);
4  margin-left: auto;
5  margin-right: auto;
6  margin-bottom: 3rem;
7  min-width: 0;
8  flex-shrink: 1;
9  min-height: calc(100vh - var(--header-height));
10  display: flex;
11  flex-direction: column;
12}

API Reference layout with two-column grid.

Default CSS
1.fern-layout-reference {
2  padding-left: var(--page-padding);
3  margin-left: auto;
4  margin-right: auto;
5  min-width: 0;
6  flex-shrink: 1;
7  padding-right: calc(var(--page-padding) + var(--aside-offset));
8  min-height: calc(100vh - var(--header-height));
9  display: flex;
10  flex-direction: column;
11}
12
13.fern-layout-reference-content {
14  margin-top: 1.5rem;
15  margin-bottom: 1.5rem;
16}
17
18@media (min-width: 768px) {
19  .fern-layout-reference-content {
20    display: grid;
21    grid-template-columns: repeat(2, 1fr);
22    gap: 2rem;
23  }
24}
25
26@media (min-width: 1024px) {
27  .fern-layout-reference-content {
28    gap: 3rem;
29  }
30}

Overview page layout.

Default CSS
1.fern-layout-overview {
2  padding-left: var(--page-padding);
3  padding-right: var(--page-padding);
4  margin-left: auto;
5  margin-right: auto;
6  margin-bottom: 3rem;
7  min-width: 0;
8  flex-shrink: 1;
9  min-height: calc(100vh - var(--header-height));
10  display: flex;
11  flex-direction: column;
12}

Changelog page layout.

Default CSS
1.fern-layout-changelog[data-aside-state="hidden"] {
2  max-width: var(--page-width-padded);
3  padding-left: var(--page-padding);
4  padding-right: var(--page-padding);
5  margin-left: auto;
6  margin-right: auto;
7  min-width: 0;
8}
9
10.fern-layout-changelog[data-aside-state="visible"] {
11  padding-left: var(--page-padding);
12  padding-right: var(--page-padding);
13  margin-left: auto;
14  margin-right: auto;
15  margin-bottom: 3rem;
16  min-width: 0;
17  flex-shrink: 1;
18}

Header components

Selectors for the site header, tabs, and mobile menu.

Site header container.

Default CSS
1.fern-header {
2  backdrop-filter: blur(0.5rem);
3  background-color: transparent;
4}

Header navigation tabs (desktop only).

Default CSS
1.fern-header-tabs {
2  backdrop-filter: blur(0.5rem);
3  background-color: transparent;
4  display: none;
5  max-width: 100%;
6  user-select: none;
7}
8
9@media (min-width: 1024px) {
10  .fern-header-tabs {
11    display: flex;
12    align-items: center;
13    justify-content: space-between;
14  }
15}

Header logo container.

Default CSS
1.fern-header-logo-container {
2  position: relative;
3  display: flex;
4  height: 100%;
5  min-width: fit-content;
6  flex: 1 1 0%;
7  flex-shrink: 0;
8  gap: 0.5rem;
9  padding-top: 0.25rem;
10  padding-bottom: 0.25rem;
11}

Mobile menu toggle button.

Default CSS
1.fern-header-mobile-menu-button {
2  display: flex;
3  flex: 1 1 0%;
4  align-items: center;
5  justify-content: flex-end;
6}

Selectors for sidebar navigation and tabs.

Top of sidebar.

Default CSS
1.fern-sidebar-header {
2  height: var(--header-height);
3  margin-left: 0.75rem;
4  margin-right: 0.75rem;
5  display: none;
6  border-bottom: 1px solid transparent;
7}
8
9@media (min-width: 1024px) {
10  .fern-sidebar-header {
11    display: flex;
12    align-items: center;
13    justify-content: space-between;
14  }
15}

Sidebar section heading.

Default CSS
1.fern-sidebar-heading {
2  margin-bottom: 0.25rem;
3  display: flex;
4  min-height: 32px;
5  align-items: center;
6  padding-left: 1rem;
7  padding-right: 1rem;
8}
9
10@media (min-width: 1024px) {
11  .fern-sidebar-heading {
12    min-height: 36px;
13    padding-left: 0.5rem;
14    padding-right: 0.5rem;
15  }
16}

Sidebar heading text.

Default CSS
1.fern-sidebar-heading-content {
2  margin: 0;
3  font-size: 1rem;
4  font-weight: 600;
5  line-height: 1.5rem;
6}
7
8@media (min-width: 1024px) {
9  .fern-sidebar-heading-content {
10    font-size: 0.875rem;
11    line-height: 1.25rem;
12  }
13}

Grouped sidebar items.

Default CSS
1.fern-sidebar-group {
2  list-style: none;
3  margin-left: -1rem;
4  margin-right: -1rem;
5}
6
7@media (min-width: 1024px) {
8  .fern-sidebar-group {
9    margin-left: 0;
10    margin-right: 0;
11  }
12}
13
14.fern-sidebar-group .fern-sidebar-group {
15  margin-left: 0;
16  margin-right: 0;
17}

Sidebar tab navigation.

Default CSS
1.fern-sidebar-tabs {
2  margin-top: 1.25rem;
3  margin-bottom: 1.5rem;
4  display: flex;
5  flex-direction: column;
6  list-style: none;
7}

Selectors for breadcrumb navigation.

Breadcrumb navigation.

Default CSS
1.fern-breadcrumb {
2  display: inline-flex;
3  height: fit-content;
4  max-width: 100%;
5  flex-wrap: wrap;
6  align-items: baseline;
7  font-weight: 500;
8}

Breadcrumb link or text.

Default CSS
1.fern-breadcrumb-item {
2  color: var(--accent-a11);
3  min-width: 0;
4  flex-shrink: 1;
5  font-size: 0.875rem;
6}

Breadcrumb separator.

Default CSS
1.fern-breadcrumb-arrow {
2  color: var(--grayscale-a9);
3  margin-left: 0.125rem;
4  margin-right: 0.125rem;
5  width: 1rem;
6  height: 1rem;
7  align-self: center;
8}

Button components

Selectors for buttons.

Button with variants.

Default CSS
1.fern-button {
2  transition-property: color, background-color;
3  display: inline-flex;
4  align-items: center;
5  justify-content: center;
6  border-radius: var(--radius-2);
7  height: 2.5rem;
8  padding: 0.25rem 0.75rem;
9  font-size: 0.875rem;
10  cursor: pointer;
11}
12
13@media (min-width: 640px) {
14  .fern-button {
15    height: 2rem;
16  }
17}
18
19.fern-button:hover {
20  transition: none;
21}

Variants:

  • .minimal - Transparent background with subtle hover
  • .filled - Solid background color
  • .outlined - Border with transparent background
  • .primary - Accent color variant
  • .success - Green color variant
  • .warning - Amber color variant
  • .danger - Red color variant

Size modifiers:

  • .small - Smaller button (height: 1.75rem on desktop, 1.5rem on mobile)
  • .large - Larger button (height: 2.75rem on desktop, 2.5rem on mobile)
  • .square - Square button with equal width and height

Button content wrapper.

Default CSS
1.fern-button-content {
2  display: inline-flex;
3  min-width: 0;
4  flex-shrink: 1;
5  align-items: center;
6  height: 1.5rem;
7  gap: 0.375rem;
8}

Button text.

Default CSS
1.fern-button-text {
2  min-width: 0;
3  flex-shrink: 1;
4  font-weight: 500;
5}
6
7.fern-button:not(.multiline) .fern-button-text {
8  overflow: hidden;
9  text-overflow: ellipsis;
10  white-space: nowrap;
11}

Button group.

Default CSS
1.fern-button-group {
2  display: inline-flex;
3  align-items: center;
4}
5
6.fern-button-group > .fern-button:has(+ .fern-button.outlined, + .fern-button.filled),
7.fern-button-group > .fern-button.outlined:has(+ .fern-button.minimal),
8.fern-button-group > .fern-button.filled:has(+ .fern-button.minimal) {
9  margin-right: 0.5rem;
10}

Copy button for code blocks.

Default CSS
1.fern-copy-button {
2  width: fit-content;
3  height: fit-content;
4  backdrop-filter: blur(8px);
5}

Expand button for maxLines code blocks.

Default CSS
1.fern-expand-button {
2  width: fit-content;
3  height: fit-content;
4  backdrop-filter: blur(8px);
5}

Page action buttons (edit, feedback, share).

Default CSS
1.fern-page-actions {
2  display: flex;
3  border-radius: var(--radius-2);
4  border: 1px solid var(--border-default);
5}
6
7.fern-page-actions > *:not(:last-child) {
8  border-right: 1px solid var(--border-default);
9  margin-right: -1px;
10}

Variants:

  • .fern-toolbar - Removes the border styling for a toolbar-style appearance

Card components

Selectors for cards.

Card container.

Default CSS
1.fern-card {
2  color: var(--text-body);
3  background-color: var(--card-background);
4  border: 1px solid var(--border-default);
5  box-shadow: 0 2px 4px var(--grayscale-a3);
6  transition-property: all;
7}
8
9.fern-card:hover {
10  color: var(--text-body);
11  transition: none;
12}
13
14.fern-card.interactive:hover {
15  box-shadow: 0 4px 8px var(--grayscale-a4);
16  border-color: var(--accent-a9);
17}
18
19.fern-card.elevated {
20  border-color: var(--accent-a9);
21  box-shadow: 0 4px 12px var(--accent-a4);
22}

Variants:

  • .interactive - Adds hover effects
  • .elevated - Elevated appearance with accent border
  • .active - Active state styling

Form components

Selectors for form inputs and controls.

Text input.

Default CSS
1.fern-input {
2  width: 100%;
3  border: none;
4  background-color: transparent;
5  outline: none;
6  caret-color: var(--accent);
7  padding: 0.5rem 0.625rem;
8  font-size: 0.875rem;
9}
10
11@media (max-width: 640px) {
12  .fern-input {
13    font-size: 1rem;
14  }
15}
16
17input.fern-input::-webkit-outer-spin-button,
18input.fern-input::-webkit-inner-spin-button {
19  appearance: none;
20  margin: 0;
21}
22
23input.fern-input[type="number"] {
24  appearance: textfield;
25}

Input container with focus ring.

Default CSS
1.fern-input-group {
2  display: flex;
3  align-items: center;
4  overflow: hidden;
5  border-radius: var(--radius-2);
6  background-color: white;
7  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8  border: 1px solid var(--border-default);
9  height: 2.5rem;
10}
11
12@media (prefers-color-scheme: dark) {
13  .fern-input-group {
14    background-color: var(--grayscale-a2);
15  }
16}
17
18@media (min-width: 640px) {
19  .fern-input-group {
20    height: 2rem;
21  }
22}
23
24.fern-input-group:focus-within {
25  outline: none;
26  border-color: var(--accent-a5);
27  box-shadow: 0 0 0 2px var(--accent-a5);
28}
29
30.fern-input-group.error {
31  background: rgba(252, 100, 100, 0.63);
32}

Input icon.

Default CSS
1.fern-input-icon {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  height: 100%;
6  width: 2rem;
7  flex-shrink: 0;
8}
9
10.fern-input-icon + .fern-input {
11  margin-left: -2rem;
12  padding-left: 2rem;
13}

Right-side input element.

Default CSS
1.fern-input-right-element {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  margin-left: -0.5rem;
6  height: 100%;
7  min-width: 2rem;
8  flex-shrink: 0;
9  padding-left: 0;
10  padding-right: 0;
11}

Input clear button.

Default CSS
1.fern-input-clear-button {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  color: var(--grayscale-a9);
6  width: 1.5rem;
7  height: 1.5rem;
8  flex-shrink: 0;
9  margin-right: 0.25rem;
10  cursor: pointer;
11  border: none;
12  background-color: transparent;
13  transition: color 0.15s;
14}
15
16.fern-input-clear-button:hover {
17  color: var(--grayscale-a11);
18}

Multi-line text input.

Default CSS
1.fern-textarea {
2  width: 100%;
3  resize: none;
4  border: none;
5  background-color: transparent;
6  outline: none;
7  caret-color: var(--accent);
8  padding: 0.5rem 0.625rem;
9  font-size: 0.875rem;
10}
11
12@media (max-width: 640px) {
13  .fern-textarea {
14    font-size: 1rem;
15  }
16}

Textarea container.

Default CSS
1.fern-textarea-group {
2  display: flex;
3  align-items: center;
4  overflow: hidden;
5  border-radius: var(--radius-2);
6  background-color: white;
7  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8  border: 1px solid var(--border-default);
9}
10
11@media (prefers-color-scheme: dark) {
12  .fern-textarea-group {
13    background-color: var(--grayscale-a2);
14  }
15}
16
17.fern-textarea-group:focus-within {
18  outline: none;
19  border-color: var(--accent-a5);
20  box-shadow: 0 0 0 2px var(--accent-a5);
21}

Checkbox label.

Default CSS
1.fern-checkbox-label {
2  display: flex;
3  cursor: pointer;
4}

Checkbox input.

Default CSS
1.fern-checkbox-item {
2  border-radius: var(--radius-1);
3  position: relative;
4  margin-top: 0.125rem;
5  display: inline-block;
6  width: 1rem;
7  height: 1rem;
8  border: 1px solid var(--border-default);
9}
10
11.fern-checkbox-item:hover {
12  background-color: var(--accent-a3);
13}
14
15.fern-checkbox-item:focus {
16  outline: 4px solid var(--accent-a3);
17  outline-offset: 0;
18}

Checked indicator.

Default CSS
1.fern-checkbox-indicator {
2  background-color: var(--accent);
3  color: var(--accent-contrast);
4  border-radius: var(--radius-1);
5  display: flex;
6  width: 1rem;
7  height: 1rem;
8  align-items: center;
9  justify-content: center;
10}

Radio button group.

Default CSS
1.fern-radio-group {
2  display: flex;
3  flex-direction: column;
4  gap: 1rem;
5}
6
7.fern-radio-group.compact {
8  gap: 0.5rem;
9  font-size: 0.875rem;
10}

Radio label.

Default CSS
1.fern-radio-label {
2  display: flex;
3  cursor: pointer;
4}

Radio button input.

Default CSS
1.fern-radio-item {
2  border: 1px solid var(--border-default);
3  position: relative;
4  margin-top: 0.125rem;
5  display: inline-block;
6  width: 1rem;
7  height: 1rem;
8  border-radius: 9999px;
9}
10
11.fern-radio-item:hover {
12  background-color: var(--accent-a3);
13}
14
15.fern-radio-item:focus {
16  outline: 4px solid var(--accent-a3);
17  outline-offset: 0;
18}

Selected indicator.

Default CSS
1.fern-radio-indicator {
2  background-color: var(--accent);
3  display: flex;
4  width: 1rem;
5  height: 1rem;
6  align-items: center;
7  justify-content: center;
8  border-radius: 9999px;
9}
10
11.fern-radio-indicator::after {
12  background-color: var(--background);
13  position: absolute;
14  width: 0.5rem;
15  height: 0.5rem;
16  border-radius: 9999px;
17  content: "";
18}

Segmented toggle control.

Default CSS
1.fern-segmented-control {
2  border-radius: var(--radius-3/2);
3  height: 2.25rem;
4  background-color: white;
5  display: flex;
6  align-items: center;
7  gap: 1px;
8  padding: 0.125rem;
9  border: 1px solid var(--border-default);
10}
11
12@media (prefers-color-scheme: dark) {
13  .fern-segmented-control {
14    background-color: rgba(255, 255, 255, 0.05);
15  }
16}
17
18.fern-segmented-control .fern-button {
19  border-radius: var(--radius-1);
20  min-width: 0;
21  flex-shrink: 1;
22}

Numeric input with stepper buttons.

Default CSS
1.fern-numeric-input-group {
2  display: flex;
3  align-items: center;
4  overflow: hidden;
5  border-radius: var(--radius-2);
6  background-color: white;
7  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8  border: 1px solid var(--border-default);
9  height: 2.5rem;
10}
11
12@media (min-width: 640px) {
13  .fern-numeric-input-group {
14    height: 2rem;
15  }
16}
17
18.fern-numeric-input-group:focus-within {
19  outline: none;
20  border-color: var(--accent-a5);
21  box-shadow: 0 0 0 2px var(--accent-a5);
22}

Numeric input stepper button.

Default CSS
1.fern-numeric-input-group .fern-numeric-input-step {
2  border-color: var(--border-default);
3  height: 100%;
4  border-radius: 0;
5}
6
7.fern-numeric-input-group .fern-numeric-input-step:first-child {
8  border-top-left-radius: var(--radius-3/2);
9  border-bottom-left-radius: var(--radius-3/2);
10  border-right: 1px solid;
11}
12
13.fern-numeric-input-group .fern-numeric-input-step:last-child {
14  border-top-right-radius: var(--radius-3/2);
15  border-bottom-right-radius: var(--radius-3/2);
16  border-left: 1px solid;
17}
18
19.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled) {
20  color: var(--accent-a11);
21  border-color: var(--accent-a5);
22}
23
24.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled):hover {
25  color: var(--accent-a11);
26  background-color: var(--accent-a3);
27}

Selectors for dropdowns and the product selector.

Dropdown menu container.

Default CSS
1.fern-dropdown {
2  position: relative;
3  z-index: 50;
4  animation: popover-in 150ms ease-out;
5  min-width: var(--radix-dropdown-menu-trigger-width);
6  background-color: var(--background);
7  border: 1px solid var(--border-default);
8  border-radius: var(--radius-2);
9  display: flex;
10  max-height: 300px;
11  flex-direction: column;
12  backdrop-filter: blur(8px);
13  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
14}

Dropdown menu item.

Default CSS
1.fern-dropdown-item {
2  border-radius: var(--radius-1);
3  display: flex;
4  width: 100%;
5  cursor: default;
6  align-items: center;
7  justify-content: flex-start;
8  padding: 0.25rem 0.5rem;
9  text-align: left;
10  font-size: 0.875rem;
11}
12
13.fern-dropdown-item[data-highlighted] {
14  color: var(--accent-contrast);
15  background-color: var(--accent);
16}

Dropdown selection indicator.

Default CSS
1.fern-dropdown-item-indicator {
2  margin-right: 0.25rem;
3  display: flex;
4  height: 100%;
5  width: 1rem;
6  flex: none;
7  align-items: center;
8  justify-content: center;
9}

Selection item.

Default CSS
1.fern-selection-item {
2  border-radius: var(--radius-3/2);
3  display: flex;
4  flex: 1 1 0%;
5  cursor: pointer;
6  align-items: center;
7  justify-content: space-between;
8  gap: 0.5rem;
9  border: 1px solid transparent;
10  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
11  width: 100%;
12  text-align: left;
13  transition: all 200ms ease-in-out;
14}
15
16.fern-selection-item:hover {
17  color: var(--accent);
18  background-color: var(--grayscale-a3);
19}

Selection item icon.

Default CSS
1.fern-selection-item-icon {
2  border-radius: var(--radius-2);
3  color: var(--grayscale-a11);
4  margin: 0.25rem;
5  display: flex;
6  height: 56px;
7  width: 56px;
8  flex-shrink: 0;
9  align-items: center;
10  justify-content: center;
11  overflow: hidden;
12}
13
14.fern-selection-item-icon.use-icon {
15  border: 1px solid var(--grayscale-a5);
16  padding: 0.25rem;
17}
18
19.fern-selection-item-icon svg,
20.fern-selection-item-icon .fern-file-icon {
21  display: block;
22  height: 50%;
23  width: 50%;
24  transition: all 300ms ease-in-out;
25}
26
27.fern-selection-item:hover .fern-selection-item-icon svg,
28.fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
29  transform: scale(1.2);
30}
31
32.fern-selection-item.dense .fern-selection-item-icon {
33  margin: 0.125rem;
34  height: 36px;
35  width: 36px;
36  padding: 0.125rem;
37}

Selection item title.

Default CSS
1.fern-selection-item-title {
2  color: var(--grayscale-a12);
3  font-weight: 700;
4  line-height: 1.25;
5}
6
7@media (min-width: 1024px) {
8  .fern-selection-item-title {
9    font-size: 0.875rem;
10  }
11}

Selection item end icon.

Default CSS
1.fern-selection-item-end-icon {
2  color: var(--grayscale-a11);
3}

Product selector. See styles.css for examples.

Default CSS
1.fern-product-selector {
2  width: 100%;
3}
4
5@media (min-width: 1024px) {
6  .fern-product-selector {
7    width: auto;
8  }
9}

Product selector radio group. See styles.css for examples.

Accordion components

Selectors for accordions.

Accordion container.

Default CSS
1.fern-accordion {
2  border-radius: var(--radius-3);
3  border-top: 1px solid var(--border-default);
4}
5
6.fern-accordion li {
7  list-style-position: outside;
8}

Accordion item.

Default CSS
1.fern-accordion-item {
2  overflow: hidden;
3}
4
5.fern-accordion-item:first-child {
6  border-top-left-radius: inherit;
7  border-top-right-radius: inherit;
8}
9
10.fern-accordion-item:last-child {
11  border-bottom-left-radius: inherit;
12  border-bottom-right-radius: inherit;
13}

Expand/collapse trigger.

Default CSS
1.fern-accordion-trigger {
2  display: flex;
3  cursor: pointer;
4  align-items: center;
5  gap: 0.75rem;
6  border-radius: inherit;
7  padding: 1rem;
8  transition-property: background-color;
9  list-style: none;
10  overflow: auto;
11}
12
13.fern-accordion-trigger:hover {
14  background-color: var(--grayscale-a2);
15  transition: none;
16}
17
18.fern-accordion-trigger[data-state="open"] {
19  border-bottom-left-radius: 0;
20  border-bottom-right-radius: 0;
21}
22
23.fern-accordion-trigger::-webkit-details-marker {
24  display: none;
25}

Expand/collapse arrow.

Default CSS
1.fern-accordion-trigger-arrow {
2  color: var(--grayscale-a11);
3  width: 1rem;
4  height: 1rem;
5  flex-shrink: 0;
6  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
7}
8
9.fern-accordion-trigger[data-state="open"] .fern-accordion-trigger-arrow {
10  transform: rotate(90deg);
11}

Accordion trigger title.

Default CSS
1.fern-accordion-trigger-title {
2  color: var(--text-body);
3  margin: 0;
4  margin-bottom: -1px;
5  display: flex;
6  max-width: max-content;
7  text-align: left;
8  font-size: 1rem;
9  line-height: 1.5rem;
10}
11
12.fern-accordion-trigger-title p {
13  margin: 0 !important;
14  padding: 0 !important;
15  line-height: inherit !important;
16}

Scroll area components

Selectors for scrollable areas.

Scrollable area container.

Default CSS
1.fern-scroll-area {
2  z-index: 0;
3  display: flex;
4  height: 100%;
5  width: 100%;
6  flex-direction: column;
7  overflow: hidden;
8}

Scroll viewport.

Default CSS
1.fern-scroll-area-viewport {
2  display: flex;
3  height: 100%;
4  min-height: 0;
5  width: 100%;
6  flex-shrink: 1;
7  flex-direction: column;
8  border-radius: inherit;
9}
10
11.fern-scroll-area-viewport:has(.fern-scroll-area-scrollbar[data-orientation="horizontal"]) {
12  overscroll-behavior-x: contain;
13}
14
15.fern-scroll-area-viewport > div {
16  display: block !important;
17  flex-grow: 1;
18}
19
20.fern-scroll-area-viewport[data-scrollbars="vertical"] > div {
21  max-width: 100%;
22}

Scrollbar.

Default CSS
1.fern-scroll-area-scrollbar {
2  z-index: 10;
3  margin: 0.25rem;
4  display: flex;
5  touch-action: none;
6  user-select: none;
7  border-radius: 9999px;
8  transition: all 150ms ease-out;
9  background-color: var(--grayscale-a3);
10}
11
12.fern-scroll-area-scrollbar[data-state="hidden"] {
13  opacity: 0;
14}
15
16.fern-scroll-area-scrollbar[data-orientation="vertical"] {
17  margin-top: 5px;
18  margin-bottom: 5px;
19  width: 4px;
20}
21
22.fern-scroll-area-scrollbar[data-orientation="vertical"]:hover {
23  width: 6px;
24}
25
26.fern-scroll-area-scrollbar[data-orientation="horizontal"] {
27  margin-left: 5px;
28  margin-right: 5px;
29  height: 4px;
30  flex-direction: column;
31}
32
33.fern-scroll-area-scrollbar[data-orientation="horizontal"]:hover {
34  height: 6px;
35}

Scrollbar thumb.

Default CSS
1.fern-scroll-area-thumb {
2  position: relative;
3  z-index: auto;
4  display: flex;
5  background-color: var(--accent-track);
6  flex: 1 1 0%;
7  border-radius: 9999px;
8}
9
10.fern-scroll-area-thumb::before {
11  content: "";
12  position: absolute;
13  top: 50%;
14  left: 50%;
15  transform: translate(-50%, -50%);
16  width: 100%;
17  height: 100%;
18  min-width: 28px;
19  min-height: 28px;
20}

Scrollbar corner.

Default CSS
1.fern-scroll-area-corner {
2  background-color: transparent;
3}

Badge components

Selectors for badges and HTTP method tags.

Badge for labels, status, and HTTP methods.

Default CSS
1.fern-docs-badge {
2  align-items: center;
3  display: inline-flex;
4  gap: 0.25rem;
5  justify-content: center;
6  line-height: 1rem;
7  box-sizing: border-box;
8  font-weight: 600;
9  white-space: nowrap;
10}
11
12.fern-docs-badge.small {
13  border-radius: var(--radius-1);
14  font-size: 0.75rem;
15  height: 1.25rem;
16  padding: 0 0.375rem;
17}
18
19.fern-docs-badge.large {
20  border-radius: var(--radius-3/2);
21  font-size: 0.875rem;
22  height: 1.5rem;
23  padding: 0.25rem 0.5rem;
24}
25
26.fern-docs-badge.rounded {
27  border-radius: 9999px !important;
28}
29
30.fern-docs-badge:disabled {
31  opacity: 0.5;
32  cursor: not-allowed;
33}
34
35.fern-docs-badge[data-badge-type="http-method"],
36.fern-docs-badge[data-badge-type="status-code"] {
37  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
38  font-variant-numeric: slashed-zero;
39  text-transform: uppercase;
40}

MDX content components

Selectors for links, callouts, steps, and tables.

Callout with intent-matched colors.

Default CSS
1.fern-callout {
2  border-radius: var(--radius-3);
3  margin-bottom: 1.5rem;
4  margin-top: 1rem;
5  border: 1px solid;
6  padding: 1rem;
7}
8
9.fern-callout:first-child {
10  margin-top: 0;
11}

Intent variants:

  • [data-intent="info"] - Gray/neutral (default)
  • [data-intent="warning"] - Amber/yellow
  • [data-intent="success"] - Green
  • [data-intent="error"] - Red
  • [data-intent="note"] - Blue
  • [data-intent="launch"] - Accent color
  • [data-intent="tip"] - Green
  • [data-intent="check"] - Green

Indent with vertical guide line.

Default CSS
1.fern-indent {
2  position: relative;
3  margin-left: 1rem;
4  padding-left: 1rem;
5}
6
7.fern-indent > * + * {
8  margin-top: 0.25rem;
9}
10
11.fern-indent::before {
12  content: '';
13  position: absolute;
14  left: 0;
15  top: 0.5rem;
16  bottom: 0.5rem;
17  border-left: 1px solid transparent;
18}

Steps container.

Default CSS
1.fern-steps {
2  border-left: 1px solid var(--border-default);
3  margin-bottom: 3rem;
4  margin-left: 0.75rem;
5  margin-top: 1rem;
6  padding-left: 1.75rem;
7}

Single step.

Default CSS
1.fern-step > .fern-anchor {
2  position: absolute;
3  margin-left: -40px;
4  margin-top: 0.25rem;
5}

Anchor for deep linking.

Default CSS
1a.fern-anchor {
2  border-radius: var(--radius-3/2);
3  position: relative;
4  display: flex;
5  width: 1.5rem;
6  height: 1.5rem;
7  align-items: center;
8  border: 0;
9}
10
11.fern-anchor-icon {
12  border-radius: var(--radius-3/2);
13  position: absolute;
14  left: 0;
15  display: flex;
16  width: 1.5rem;
17  height: 1.5rem;
18  align-items: center;
19  justify-content: center;
20}
21
22.fern-anchor-icon:not(.copied) {
23  color: var(--grayscale-a11);
24  background-color: var(--card-background);
25  border: 1px solid var(--card-border);
26  backdrop-filter: blur(8px);
27}
28
29.fern-anchor-icon.copied {
30  background-color: var(--accent-a3);
31  border: 1px solid var(--accent-a5);
32  backdrop-filter: blur(8px);
33}
34
35.fern-anchor-icon.copied > svg {
36  color: var(--accent-a11);
37}
38
39.fern-anchor-icon > svg {
40  width: 1rem;
41  height: 1rem;
42}

Table container.

Default CSS
1.fern-table-root {
2  border: 1px solid var(--card-border);
3  border-radius: var(--radius-3/2);
4  background-color: var(--card-background);
5  overflow: hidden;
6  font-size: 0.875rem;
7  backdrop-filter: blur(32px);
8  display: flex;
9  flex-direction: column;
10}

Table with .sticky support for sticky headers.

Default CSS
1.fern-table {
2  width: 100%;
3}
4
5.fern-table thead tr th {
6  background-color: var(--grayscale-a2);
7}
8
9.fern-table td,
10.fern-table th {
11  height: 2.25rem;
12  padding: 0.5rem;
13  text-align: left;
14  border-bottom: 1px solid var(--card-border);
15}
16
17.fern-table tbody > tr:last-child > td {
18  border-bottom: 0;
19}
20
21.fern-table.sticky {
22  font-size: 0.875rem;
23}
24
25.fern-table.sticky thead {
26  position: sticky;
27  top: var(--header-height, var(--spacing-header-height-real));
28}
29
30.fern-table.sticky thead tr th {
31  background-color: var(--grayscale-2);
32}
33
34.fern-table.sticky td,
35.fern-table.sticky th {
36  max-width: 0;
37}

Changelog filter components

Selectors for changelog filter UI. Only on changelog pages with tags.

Filter dropdown trigger button.

Default CSS
1.fern-filter-dropdown-button {
2  /* Inherits from .fern-button with variant="outlined" */
3}
Example: Customize the filter button appearance
1/* Style the filter dropdown button */
2.fern-filter-dropdown-button {
3  border-color: var(--accent-a7);
4  background-color: var(--accent-a2);
5}
6
7.fern-filter-dropdown-button:hover {
8  border-color: var(--accent-a9);
9  background-color: var(--accent-a3);
10}

Filter button text.

Default CSS
1.fern-filter-dropdown-button-text {
2  /* Inherits text styles from parent button */
3}
Example: Visually replace the default label text
1/* Replace "Select filters" with custom text using CSS */
2.fern-filter-dropdown-button-text {
3  font-size: 0;
4}
5
6.fern-filter-dropdown-button-text::after {
7  content: "Select product";
8  font-size: 0.875rem;
9}

Filter button chevron.

Default CSS
1.fern-filter-dropdown-button-icon {
2  width: 1rem;
3  height: 1rem;
4}
Example: Customize the chevron icon
1/* Change the chevron color */
2.fern-filter-dropdown-button-icon {
3  color: var(--accent-a11);
4}

Filter dropdown item.

Default CSS
1.fern-filter-dropdown-item {
2  /* Inherits from .fern-dropdown-item */
3}
Example: Style filter dropdown items
1/* Customize filter dropdown items */
2.fern-filter-dropdown-item {
3  padding: 0.5rem 0.75rem;
4}
5
6.fern-filter-dropdown-item[data-highlighted] {
7  background-color: var(--accent-a4);
8  color: var(--accent-a12);
9}

Filter badge base class.

Default CSS
1.fern-filter-badge {
2  display: inline;
3  max-width: 100%;
4  cursor: pointer;
5  overflow: hidden;
6  text-overflow: ellipsis;
7}

Selected filter badge.

Default CSS
1.fern-filter-badge-selected {
2  /* Inherits from .fern-docs-badge with variant="outlined" */
3}
Example: Style selected filter badges with your brand color
1/* Make selected badges use your accent color */
2.fern-filter-badge.fern-filter-badge-selected {
3  background-color: var(--accent-a9);
4  color: var(--accent-contrast);
5  border-color: var(--accent-a9);
6}

Unselected filter badge.

Default CSS
1.fern-filter-badge-unselected {
2  /* Inherits from .fern-docs-badge with variant="outlined-subtle" */
3}
Example: Mute unselected filter badges
1/* Style unselected badges with muted appearance */
2.fern-filter-badge.fern-filter-badge-unselected {
3  background-color: transparent;
4  color: var(--grayscale-a10);
5  border-color: var(--grayscale-a6);
6}

Filter dropdown checkmark.

Default CSS
1.fern-dropdown-checkmark {
2  width: 1rem;
3  height: 1rem;
4}
Example: Customize the checkmark color
1/* Change the checkmark color to match your brand */
2.fern-dropdown-checkmark {
3  color: var(--accent-a11);
4}
5
6/* Or target only changelog filter checkmarks */
7.fern-filter-dropdown-item .fern-dropdown-checkmark {
8  color: var(--accent-a11);
9}

API Reference components

Selectors for API Reference components.

API property container.

Default CSS
1.fern-api-property {
2  display: flex;
3  flex-direction: column;
4  gap: 1rem;
5  padding-top: 1rem;
6  padding-bottom: 1rem;
7}
8
9.fern-api-property p:last-child {
10  margin-bottom: 0;
11}

API property header.

Default CSS
1.fern-api-property-header {
2  display: flex;
3  align-items: baseline;
4  gap: 0.5rem;
5}

API property name.

Default CSS
1.fern-api-property-key {
2  color: var(--text-body);
3  font-family: var(--font-mono);
4  font-size: 0.875rem;
5  font-weight: 600;
6}

API property metadata (type, required).

Default CSS
1.fern-api-property-meta {
2  color: var(--grayscale-a11);
3  display: inline-flex;
4  align-items: baseline;
5  gap: 0.5rem;
6  font-size: 0.75rem;
7}

API property constraint.

Default CSS
1.fern-api-property-constraint {
2  display: inline-block;
3  max-width: 100%;
4  min-width: 0;
5}

Utility components

Selectors for icons, tooltips, and other elements.

Highlighted text.

Default CSS
1.fern-highlight {
2  color: var(--accent-a12);
3  background-color: transparent;
4  font-weight: 700;
5}

Inline icon (adapts to theme).

Default CSS
1.fern-mdx-icon {
2  color: var(--grayscale-a11);
3  display: inline-block;
4  vertical-align: baseline;
5}
6
7@variant dark {
8  .fern-mdx-icon {
9    color: var(--fa-icon-dark, var(--grayscale-a11));
10  }
11}

Tooltip trigger with underline.

Default CSS
1.fern-mdx-tooltip-trigger {
2  --tooltip-underline-color: var(--grayscale-a10);
3  --tooltip-underline-hover-color: var(--grayscale-12);
4  --tooltip-underline-thickness: 1px;
5  --tooltip-underline-offset: 1px;
6  --tooltip-transition-duration: 0.15s;
7
8  display: inline-block;
9  cursor: help;
10  text-decoration: underline dashed var(--tooltip-underline-color) var(--tooltip-underline-thickness);
11  text-underline-position: under;
12  text-underline-offset: var(--tooltip-underline-offset);
13  transition: text-decoration-color var(--tooltip-transition-duration) ease;
14}
15
16.fern-mdx-tooltip-trigger:hover {
17  text-decoration-color: var(--tooltip-underline-hover-color);
18}

Tooltip content.

Default CSS
1.fern-mdx-tooltip-content {
2  --tooltip-padding-x: 0.75rem;
3
4  padding-left: var(--tooltip-padding-x) !important;
5  padding-right: var(--tooltip-padding-x) !important;
6}

File type icon.

Default CSS
1.fern-selection-item-icon .fern-file-icon {
2  display: block;
3  height: 50%;
4  width: 50%;
5  transition: all 300ms ease-in-out;
6}
7
8.fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
9  transform: scale(1.2);
10}

Collapsible child element.

Default CSS
1.fern-collapsible[data-state="open"] .fern-collapsible-child {
2  animation: slide-down 0.18s var(--ease-collapse) none;
3  width: var(--radix-collapsible-content-width);
4}
5
6.fern-collapsible[data-state="closed"] .fern-collapsible-child {
7  animation: slide-up 0.18s var(--ease-collapse) none;
8  width: var(--radix-collapsible-content-width);
9}
10
11@keyframes slide-down {
12  0% {
13    transform: translateY(-100%);
14  }
15  100% {
16    transform: translateY(0);
17  }
18}
19
20@keyframes slide-up {
21  0% {
22    transform: translateY(0);
23  }
24  100% {
25    transform: translateY(-100%);
26  }
27}

Runnable endpoint.

Default CSS
1.fern-runnable-endpoint ul {
2  padding-left: 0 !important;
3  margin-top: 0 !important;
4}
5
6.fern-runnable-endpoint button {
7  margin-top: 0 !important;
8}
9
10.fern-runnable-endpoint .fern-input:disabled,
11.fern-runnable-endpoint .fern-textarea:disabled {
12  cursor: not-allowed;
13  opacity: 0.6;
14}
15
16.fern-runnable-endpoint .fern-input-group:has(.fern-input:disabled),
17.fern-runnable-endpoint .fern-textarea-group:has(.fern-textarea:disabled),
18.fern-runnable-endpoint .fern-numeric-input-group:has(.fern-input:disabled) {
19  opacity: 0.6;
20  cursor: not-allowed;
21  background-color: var(--grayscale-a2);
22  pointer-events: none;
23}

RSS feed button.

Default CSS
1.fern-rss-feed-button .fern-button-content {
2  gap: 0.5rem;
3}

Changelog components

Selectors for changelog pages.

Changelog page container.

Default CSS
1.fern-changelog {
2  display: flex;
3  justify-content: space-between;
4  padding-left: 1rem;
5  padding-right: 1rem;
6}
7
8@media (min-width: 768px) {
9  .fern-changelog {
10    padding-left: 1.5rem;
11    padding-right: 1.5rem;
12  }
13}
14
15@media (min-width: 1024px) {
16  .fern-changelog {
17    padding-left: 2rem;
18    padding-right: 2rem;
19  }
20}
21
22.fern-changelog > main {
23  margin-left: auto;
24  margin-right: auto;
25  width: 100%;
26  max-width: 1024px;
27  word-wrap: break-word;
28}

Variants:

  • .full-width - Full-width layout with sidebar date display

Changelog entry.

Default CSS
1.fern-changelog-entry {
2  display: flex;
3  align-items: stretch;
4}
5
6.fern-changelog-entry:is(article) {
7  padding-top: 2rem;
8  padding-bottom: 2rem;
9}
10
11@media (min-width: 1024px) {
12  .fern-changelog-entry:is(article) {
13    padding-top: 4rem;
14    padding-bottom: 4rem;
15  }
16}

Changelog date.

Default CSS
1.fern-changelog-date {
2  color: var(--grayscale-a11);
3  font-size: 1rem;
4  margin-bottom: 2rem;
5}
6
7@media (min-width: 1024px) {
8  .fern-changelog.full-width .fern-changelog-entry > aside .fern-changelog-date {
9    position: sticky;
10    top: calc(var(--header-height) + 1rem);
11  }
12}

Changelog content area.

Default CSS
1.fern-changelog-content {
2  position: relative;
3  margin-left: auto;
4  margin-right: auto;
5  display: grid;
6  width: 100%;
7  max-width: var(--content-wide-width);
8  grid-template-columns: 1fr;
9  gap: 1rem;
10}

Changelog entry label.

Default CSS
1.fern-changelog-label {
2  display: flex;
3  width: 100%;
4  flex-direction: row;
5  gap: 0.5rem;
6}
7
8@media (min-width: 1280px) {
9  .fern-changelog-label {
10    flex-direction: column;
11  }
12}