Customization

CSS selectors reference

View as Markdown

Fern selectors use Tailwind CSS utilities and CSS custom properties. This page is a reference of the stable 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  position: fixed;
3  top: 0;
4  left: 0;
5  right: 0;
6  z-index: 30;
7  pointer-events: auto;
8  border-bottom: 1px solid var(--border-concealed);
9  background-color: var(--header-background);
10  backdrop-filter: blur(16px);
11}

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}

“Optional” label on non-required properties. Inherits styles from .fern-api-property-meta.

Example: Hide the "Optional" label
1.fern-api-property-optional {
2  display: none;
3}

“Required” label on required properties.

Default CSS
1.fern-api-property-required {
2  color: var(--red-a11);
3}

API property type label (e.g. “string”, “integer”). Inherits styles from .fern-api-property-meta.

Example: Customize type label color
1.fern-api-property-type {
2  color: var(--accent-a11);
3}

Default value display for a property.

Example: Style default value
1.fern-api-property-default code {
2  color: var(--accent-a11);
3}

“Read only” label on read-only properties. Inherits styles from .fern-api-property-meta.

Example: Hide the "Read only" label
1.fern-api-property-readonly {
2  display: none;
3}

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. The changelog overview renders a feed: a control bar (search and tag filters) above a vertical timeline of entry cards grouped by day. The page layout container is .fern-layout-changelog (documented under Layout and structure).

Centered column that holds the changelog header, control bar, and timeline.

Default CSS
1.fern-changelog-feed {
2  width: var(--content-wide-width);
3  max-width: 100%;
4  margin-left: auto;
5  margin-right: auto;
6  display: flex;
7  flex-direction: column;
8  gap: 2rem;
9}

Control bar with the full-text search and tag filter. Inner elements: .fern-changelog-controls-row and .fern-changelog-search.

Default CSS
1.fern-changelog-controls {
2  display: flex;
3  flex-direction: column;
4  gap: 0.75rem;
5  padding-top: 0.5rem;
6  padding-bottom: 1rem;
7  border-bottom: 1px solid var(--grayscale-a4);
8}
9
10.fern-changelog-controls-row {
11  display: flex;
12  flex-wrap: wrap;
13  align-items: center;
14  gap: 0.5rem;
15}
16
17.fern-changelog-search {
18  min-width: 0;
19  flex: 1 1 0%;
20}

Vertical timeline: a left date gutter beside a rail of entry cards. Entries are grouped per day into .fern-changelog-day-group, with the date in .fern-changelog-day and that day’s cards in .fern-changelog-day-entries.

Default CSS
1.fern-changelog-timeline {
2  display: flex;
3  flex-direction: column;
4}
5
6.fern-changelog-day-group {
7  display: flex;
8  gap: 1rem;
9}
10
11.fern-changelog-day {
12  color: var(--grayscale-a11);
13  width: 6rem;
14  flex-shrink: 0;
15  align-self: flex-start;
16  padding-top: 1.25rem;
17  font-size: 0.75rem;
18  line-height: 1.5rem;
19  font-weight: 600;
20  text-transform: uppercase;
21  letter-spacing: 0.025em;
22  position: sticky;
23  top: calc(var(--fern-changelog-sticky-top, var(--spacing-header-height-padded)) + 0.5rem);
24}
25
26.fern-changelog-day-entries {
27  display: flex;
28  min-width: 0;
29  flex: 1 1 0%;
30  flex-direction: column;
31  border-left: 1px solid var(--grayscale-a4);
32}

A single clickable changelog entry card in the timeline. Inner elements: .fern-changelog-card-marker (timeline dot), .fern-changelog-card-body, .fern-changelog-card-title, .fern-changelog-card-link, .fern-changelog-card-excerpt, .fern-changelog-card-preview (rich MDX preview), and .fern-changelog-card-tags.

Default CSS
1.fern-changelog-card {
2  position: relative;
3  border-radius: var(--radius-3);
4  padding: 1.25rem 1rem 1.25rem 1.5rem;
5  transition: color, background-color;
6}
7
8.fern-changelog-card:hover {
9  background-color: var(--grayscale-a2);
10}
11
12.fern-changelog-card-marker {
13  position: absolute;
14  left: 0;
15  top: 2rem;
16  width: 0.625rem;
17  height: 0.625rem;
18  transform: translate(-50%, -50%);
19  border-radius: 9999px;
20  background-color: var(--grayscale-6);
21}
22
23.fern-changelog-card:hover .fern-changelog-card-marker {
24  background-color: var(--accent);
25}
26
27.fern-changelog-card-body {
28  display: flex;
29  flex-direction: column;
30  gap: 0.375rem;
31}
32
33.fern-changelog-card-title {
34  margin: 0;
35  color: var(--grayscale-a12);
36  font-size: 1rem;
37  font-weight: 600;
38}
39
40.fern-changelog-card-excerpt {
41  margin: 0;
42  color: var(--grayscale-a11);
43  font-size: 0.875rem;
44  line-height: 1.625;
45}

Tag chips as rendered inside a full changelog entry page. In the timeline cards the chips render in .fern-changelog-card-tags. Search matches are highlighted with .fern-changelog-highlight, and .fern-changelog-empty shows when no entries match the active filters.

Default CSS
1.fern-changelog-tags {
2  margin-bottom: 1rem;
3  display: flex;
4  flex-direction: row;
5  flex-wrap: wrap;
6  gap: 0.375rem;
7}
8
9.fern-changelog-highlight {
10  background-color: var(--accent-a3);
11  color: var(--accent-a11);
12  border-radius: var(--radius-1);
13}
14
15.fern-changelog-empty {
16  color: var(--grayscale-a11);
17  padding-top: 4rem;
18  padding-bottom: 4rem;
19  text-align: center;
20  font-size: 0.875rem;
21}

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-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}

Complete selector index

The sections of this page document the most commonly customized selectors in detail. The table below is the complete set of stable fern-* selectors present in the rendered docs, generated from the Fern docs source. Any fern-* selector not in the table doesn’t exist in the rendered site.

SelectorType
.fern-accordionClass
.fern-accordion-itemClass
.fern-accordion-triggerClass
.fern-accordion-trigger-arrowClass
.fern-accordion-trigger-titleClass
.fern-airClass
.fern-analytics-gaClass
.fern-analytics-gtmClass
.fern-analytics-segmentClass
.fern-anchorClass
.fern-anchor-iconClass
#fern-announcementID
.fern-announcement-dismissedClass
.fern-api-propertyClass
.fern-api-property-constraintClass
.fern-api-property-defaultClass
.fern-api-property-headerClass
.fern-api-property-keyClass
.fern-api-property-metaClass
.fern-api-property-optionalClass
.fern-api-property-readonlyClass
.fern-api-property-requiredClass
.fern-api-property-typeClass
#fern-ask-ai-buttonID
#fern-ask-ai-button-iconID
#fern-ask-ai-panelID
#fern-ask-ai-panel-headerID
#fern-ask-ai-panel-header-iconID
#fern-ask-ai-panel-inputID
.fern-audio-playerClass
#fern-auth-buttonID
.fern-back-to-topClass
.fern-background-imageClass
.fern-bleedClass
.fern-breadcrumbClass
.fern-breadcrumb-arrowClass
.fern-breadcrumb-itemClass
.fern-buttonClass
.fern-button-contentClass
.fern-button-groupClass
.fern-button-textClass
.fern-calloutClass
.fern-cardClass
.fern-card-groupClass
.fern-changelog-cardClass
.fern-changelog-card-bodyClass
.fern-changelog-card-excerptClass
.fern-changelog-card-linkClass
.fern-changelog-card-markerClass
.fern-changelog-card-previewClass
.fern-changelog-card-tagsClass
.fern-changelog-card-titleClass
.fern-changelog-contentClass
.fern-changelog-controlsClass
.fern-changelog-controls-rowClass
.fern-changelog-dayClass
.fern-changelog-day-entriesClass
.fern-changelog-day-groupClass
.fern-changelog-emptyClass
.fern-changelog-feedClass
.fern-changelog-highlightClass
.fern-changelog-highlight-styleClass
.fern-changelog-labelClass
.fern-changelog-overviewClass
.fern-changelog-searchClass
.fern-changelog-tagsClass
.fern-changelog-timelineClass
.fern-checkbox-indicatorClass
.fern-checkbox-itemClass
.fern-checkbox-labelClass
.fern-codeClass
.fern-code-actionsClass
.fern-code-blockClass
.fern-code-block-actionsClass
.fern-code-block-contentClass
.fern-code-block-headerClass
.fern-code-block-header-innerClass
.fern-code-block-titleClass
.fern-code-block-title-labelClass
.fern-code-contentClass
.fern-code-groupClass
.fern-code-group-actionsClass
.fern-code-group-contentClass
.fern-code-group-headerClass
.fern-code-group-header-innerClass
.fern-code-group-tabClass
.fern-code-group-tab-labelClass
.fern-code-group-tabsClass
.fern-code-headerClass
.fern-code-header-innerClass
.fern-code-labelClass
.fern-code-linkClass
.fern-collapse-triggerClass
.fern-collapsibleClass
.fern-collapsible-cardClass
.fern-collapsible-card-nestedClass
.fern-collapsible-card-print-truncatedClass
.fern-collapsible-childClass
.fern-copy-buttonClass
.fern-copy-inlineClass
.fern-dashboardClass
.fern-docs-badgeClass
.fern-docs-feedbackClass
.fern-docs-staticClass
.fern-docs-track-analyticsClass
.fern-dropdownClass
.fern-dropdown-checkmarkClass
.fern-dropdown-itemClass
.fern-dropdown-item-indicatorClass
.fern-endpoint-code-snippetsClass
.fern-endpoint-request-snippetClass
.fern-endpoint-response-snippetClass
.fern-endpoint-section-authClass
.fern-endpoint-section-errorsClass
.fern-endpoint-section-headersClass
.fern-endpoint-section-path-parametersClass
.fern-endpoint-section-query-parametersClass
.fern-endpoint-section-request-bodyClass
.fern-endpoint-section-response-bodyClass
.fern-endpoint-section-response-headersClass
.fern-endpoint-selectorClass
.fern-env-switcherClass
.fern-expand-buttonClass
.fern-explorer-auth-formClass
.fern-explorer-clear-form-buttonClass
.fern-explorer-endpoint-formClass
.fern-explorer-example-selectorClass
.fern-explorer-formClass
.fern-explorer-form-buttonsClass
.fern-explorer-request-cardClass
.fern-explorer-request-headerClass
.fern-explorer-request-titleClass
.fern-explorer-response-cardClass
.fern-explorer-response-headerClass
.fern-explorer-response-titleClass
.fern-explorer-section-bodyClass
.fern-explorer-section-body-parametersClass
.fern-explorer-section-contentClass
.fern-explorer-section-headerClass
.fern-explorer-section-headersClass
.fern-explorer-section-multipart-formClass
.fern-explorer-section-parametersClass
.fern-explorer-section-path-parametersClass
.fern-explorer-section-query-parametersClass
.fern-explorer-send-request-buttonClass
.fern-feedback-buttonClass
.fern-file-iconClass
.fern-filter-badgeClass
.fern-filter-badge-selectedClass
.fern-filter-badge-unselectedClass
.fern-filter-dropdown-buttonClass
.fern-filter-dropdown-button-contentClass
.fern-filter-dropdown-button-iconClass
.fern-filter-dropdown-button-textClass
.fern-filter-dropdown-itemClass
#fern-footerID
.fern-footer-navClass
.fern-footer-nav—simpleClass
.fern-footer-nextClass
.fern-footer-prevClass
.fern-groundClass
#fern-headerID
.fern-header-contentClass
.fern-header-heightClass
.fern-header-logo-containerClass
.fern-header-mobile-menu-buttonClass
.fern-header-navbar-linksClass
.fern-header-search-barClass
.fern-header-selectorsClass
.fern-header-switchersClass
.fern-header-switchers-separatorClass
.fern-header-tabsClass
.fern-highlightClass
.fern-image-loaderClass
.fern-indentClass
.fern-inputClass
.fern-input-clear-buttonClass
.fern-input-groupClass
.fern-input-iconClass
.fern-input-right-elementClass
.fern-kbdClass
.fern-language-dropdown-contentClass
.fern-language-dropdown-itemClass
.fern-language-dropdown-item-labelClass
.fern-language-selectorClass
.fern-language-selector-radio-groupClass
.fern-layout-changelogClass
.fern-layout-changelog-entryClass
.fern-layout-content-wrapperClass
.fern-layout-footerClass
.fern-layout-footer-toolbarClass
.fern-layout-guideClass
.fern-layout-overviewClass
.fern-layout-pageClass
.fern-layout-referenceClass
.fern-layout-reference-asideClass
.fern-layout-reference-contentClass
.fern-logo-textClass
.fern-mainClass
.fern-mdx-iconClass
.fern-mdx-linkClass
.fern-mdx-tooltip-contentClass
.fern-mdx-tooltip-triggerClass
.fern-mermaidClass
.fern-navigation-storageClass
.fern-not-found-shellClass
.fern-numeric-input-groupClass
.fern-numeric-input-stepClass
.fern-page-actionsClass
.fern-page-headingClass
.fern-page-rolesClass
.fern-page-subtitleClass
.fern-pdf-cover-dateClass
.fern-pdf-cover-footerClass
.fern-pdf-cover-footer-brandClass
.fern-pdf-cover-rootClass
.fern-pdf-cover-subtitleClass
.fern-pdf-cover-titleClass
.fern-playground-fieldClass
.fern-playground-field-actionsClass
.fern-playground-field-blockClass
.fern-playground-field-controlClass
.fern-playground-field-countClass
.fern-playground-field-headerClass
.fern-playground-field-help-iconClass
.fern-playground-field-inlineClass
.fern-playground-field-itemClass
.fern-playground-field-keyClass
.fern-playground-field-labelClass
.fern-playground-field-listClass
.fern-playground-field-removeClass
.fern-playground-field-typeClass
.fern-playground-floating-buttonClass
.fern-playground-object-propertiesClass
.fern-product-itemClass
.fern-product-item-linkClass
.fern-product-selectorClass
.fern-product-selector-radio-groupClass
.fern-product-tabsClass
.fern-product-tabs-rowClass
.fern-programming-languageClass
.fern-promptClass
.fern-prompt-codeClass
.fern-prompt-code-wrapperClass
.fern-prompt-iconClass
.fern-prompt-icon-wrapperClass
.fern-proseClass
.fern-radio-groupClass
.fern-radio-indicatorClass
.fern-radio-itemClass
.fern-radio-labelClass
.fern-rss-feed-buttonClass
.fern-runnable-actionsClass
.fern-runnable-authClass
.fern-runnable-auth-contentClass
.fern-runnable-auth-fieldsClass
.fern-runnable-auth-titleClass
.fern-runnable-auth-toggleClass
.fern-runnable-cardClass
.fern-runnable-clear-buttonClass
.fern-runnable-endpointClass
.fern-runnable-endpoint-valuesClass
.fern-runnable-formClass
.fern-runnable-form-innerClass
.fern-runnable-headerClass
.fern-runnable-header-actionsClass
.fern-runnable-header-innerClass
.fern-runnable-responseClass
.fern-runnable-response-headerClass
.fern-runnable-response-labelClass
.fern-runnable-response-metaClass
.fern-runnable-response-sizeClass
.fern-runnable-response-statusClass
.fern-runnable-response-timeClass
.fern-runnable-section-contentClass
.fern-runnable-section-titleClass
.fern-runnable-send-buttonClass
.fern-scroll-areaClass
.fern-scroll-area-cornerClass
.fern-scroll-area-scrollbarClass
.fern-scroll-area-scrollbar-fade-inClass
.fern-scroll-area-scrollbar-fade-outClass
.fern-scroll-area-thumbClass
.fern-scroll-area-viewportClass
.fern-scroll-walkthroughClass
.fern-scroll-walkthrough-asideClass
.fern-scroll-walkthrough-aside-stickyClass
.fern-scroll-walkthrough-codeClass
.fern-scroll-walkthrough-mainClass
.fern-scroll-walkthrough-panelClass
.fern-scroll-walkthrough-panel-headerClass
.fern-scroll-walkthrough-panel-header-innerClass
.fern-scroll-walkthrough-spacerClass
.fern-scroll-walkthrough-step-bodyClass
.fern-scroll-walkthrough-step-descriptionClass
.fern-scroll-walkthrough-step-detailClass
.fern-scroll-walkthrough-step-headClass
.fern-scroll-walkthrough-step-itemClass
.fern-scroll-walkthrough-step-markerClass
.fern-scroll-walkthrough-step-titleClass
.fern-scroll-walkthrough-stepsClass
.fern-scroll-walkthrough-substepClass
.fern-scroll-walkthrough-substep-bodyClass
.fern-scroll-walkthrough-substep-codeClass
.fern-scroll-walkthrough-substep-contentClass
.fern-scroll-walkthrough-substep-markerClass
.fern-scroll-walkthrough-substep-titleClass
.fern-scroll-walkthrough-substepsClass
.fern-scroll-walkthrough-tabClass
.fern-scroll-walkthrough-tabsClass
#fern-search-buttonID
.fern-search-desktop-commandClass
#fern-search-dialogID
#fern-search-dialog-overlayID
.fern-search-hit-breadcrumbClass
.fern-search-hit-endpoint-pathClass
.fern-search-hit-highlightedClass
.fern-search-hit-non-highlightedClass
.fern-search-hit-snippetClass
.fern-search-hit-titleClass
#fern-search-mobile-commandID
.fern-segmented-controlClass
.fern-selection-itemClass
.fern-selection-item-end-iconClass
.fern-selection-item-iconClass
.fern-selection-item-subtitleClass
.fern-selection-item-titleClass
#fern-sidebarID
.fern-sidebar-desktopClass
.fern-sidebar-groupClass
.fern-sidebar-group-level-1Class
.fern-sidebar-group-rootClass
.fern-sidebar-headerClass
.fern-sidebar-headingClass
.fern-sidebar-heading-contentClass
.fern-sidebar-level-0Class
.fern-sidebar-linkClass
.fern-sidebar-link-inline-badgeClass
.fern-sidebar-link-titleClass
.fern-sidebar-link-title-innerClass
.fern-sidebar-marqueeClass
#fern-sidebar-overlayID
#fern-sidebar-scroll-areaID
.fern-sidebar-scroll-positionClass
#fern-sidebar-spacerID
.fern-sidebar-tabsClass
.fern-stepClass
.fern-stepsClass
.fern-streamClass
.fern-tableClass
.fern-table-collapseClass
.fern-table-paginationClass
.fern-table-pagination-controlsClass
.fern-table-pagination-labelClass
.fern-table-rootClass
.fern-table-searchClass
.fern-table-search-clearClass
.fern-table-search-iconClass
.fern-table-search-inputClass
.fern-table-show-allClass
.fern-textareaClass
.fern-textarea-groupClass
#fern-theme-colorID
#fern-theme-color-preferred-darkID
#fern-theme-color-preferred-lightID
#fern-tocID
.fern-tokenClass
.fern-toolbarClass
.fern-userClass
.fern-variant-selectorClass
.fern-variant-selector-dropdownClass
.fern-variant-selector-radio-groupClass
.fern-version-selectorClass
.fern-version-selector-radio-groupClass
.fern-walkthroughClass
.fern-walkthrough-asideClass
.fern-walkthrough-aside-stickyClass
.fern-walkthrough-closeClass
.fern-walkthrough-controlClass
.fern-walkthrough-controlsClass
.fern-walkthrough-frameClass
.fern-walkthrough-progressClass
.fern-walkthrough-stepClass
.fern-walkthrough-step-bodyClass
.fern-walkthrough-step-descriptionClass
.fern-walkthrough-step-itemClass
.fern-walkthrough-step-numberClass
.fern-walkthrough-step-titleClass
.fern-walkthrough-stepsClass
.fern-walkthrough-toolbarClass
.fern-web-socket-badgeClass
.fern-web-socket-chevronClass
.fern-web-socket-clientClass
.fern-web-socket-contentClass
.fern-web-socket-copyClass
.fern-web-socket-end-sampleClass
.fern-web-socket-serverClass
.fern-web-socket-triggerClass
.fern-web-socket-trigger-dataClass
.fern-web-socket-typeClass
.fern-x-overflowClass
No results