Skip to navigation
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
.fern-background-image {
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

Primary page heading (h1).

Default CSS
.fern-page-heading {
  margin-top: 0;
  margin-bottom: 0;
  display: inline-block;
  leading-tight: 1.25;
  text-wrap: balance;
  word-wrap: break-word;
}

Page layout container.

Default CSS
.fern-layout-page {
  max-width: var(--page-width-padded);
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  flex: 1 1 0%;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}

Guide page layout.

Default CSS
.fern-layout-guide {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  min-width: 0;
  flex-shrink: 1;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}

API Reference layout with two-column grid.

Default CSS
.fern-layout-reference {
  padding-left: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  flex-shrink: 1;
  padding-right: calc(var(--page-padding) + var(--aside-offset));
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}
.fern-layout-reference-content {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .fern-layout-reference-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .fern-layout-reference-content {
    gap: 3rem;
  }
}

Overview page layout.

Default CSS
.fern-layout-overview {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  min-width: 0;
  flex-shrink: 1;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}

Changelog page layout.

Default CSS
.fern-layout-changelog[data-aside-state="hidden"] {
  max-width: var(--page-width-padded);
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}
.fern-layout-changelog[data-aside-state="visible"] {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  min-width: 0;
  flex-shrink: 1;
}

Header components

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

Site header container.

Default CSS
#fern-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  pointer-events: auto;
  border-bottom: 1px solid var(--border-concealed);
  background-color: var(--header-background);
  backdrop-filter: blur(16px);
}

Header navigation tabs (desktop only).

Default CSS
.fern-header-tabs {
  backdrop-filter: blur(0.5rem);
  background-color: transparent;
  display: none;
  max-width: 100%;
  user-select: none;
}
@media (min-width: 1024px) {
  .fern-header-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

Header logo container.

Default CSS
.fern-header-logo-container {
  position: relative;
  display: flex;
  height: 100%;
  min-width: fit-content;
  flex: 1 1 0%;
  flex-shrink: 0;
  gap: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

Mobile menu toggle button.

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

Selectors for sidebar navigation and tabs.

Top of sidebar.

Default CSS
.fern-sidebar-header {
  height: var(--header-height);
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  display: none;
  border-bottom: 1px solid transparent;
}
@media (min-width: 1024px) {
  .fern-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

Sidebar section heading.

Default CSS
.fern-sidebar-heading {
  margin-bottom: 0.25rem;
  display: flex;
  min-height: 32px;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 1024px) {
  .fern-sidebar-heading {
    min-height: 36px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

Sidebar heading text.

Default CSS
.fern-sidebar-heading-content {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}
@media (min-width: 1024px) {
  .fern-sidebar-heading-content {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

Grouped sidebar items.

Default CSS
.fern-sidebar-group {
  list-style: none;
  margin-left: -1rem;
  margin-right: -1rem;
}
@media (min-width: 1024px) {
  .fern-sidebar-group {
    margin-left: 0;
    margin-right: 0;
  }
}
.fern-sidebar-group .fern-sidebar-group {
  margin-left: 0;
  margin-right: 0;
}

Sidebar tab navigation.

Default CSS
.fern-sidebar-tabs {
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  list-style: none;
}

Selectors for breadcrumb navigation.

Breadcrumb navigation.

Default CSS
.fern-breadcrumb {
  display: inline-flex;
  height: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  font-weight: 500;
}

Breadcrumb link or text.

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

Breadcrumb separator.

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

Button components

Selectors for buttons.

Button with variants.

Default CSS
.fern-button {
  transition-property: color, background-color;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-2);
  height: 2.5rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}
@media (min-width: 640px) {
  .fern-button {
    height: 2rem;
  }
}
.fern-button:hover {
  transition: none;
}

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
.fern-button-content {
  display: inline-flex;
  min-width: 0;
  flex-shrink: 1;
  align-items: center;
  height: 1.5rem;
  gap: 0.375rem;
}

Button text.

Default CSS
.fern-button-text {
  min-width: 0;
  flex-shrink: 1;
  font-weight: 500;
}
.fern-button:not(.multiline) .fern-button-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Button group.

Default CSS
.fern-button-group {
  display: inline-flex;
  align-items: center;
}
.fern-button-group > .fern-button:has(+ .fern-button.outlined, + .fern-button.filled),
.fern-button-group > .fern-button.outlined:has(+ .fern-button.minimal),
.fern-button-group > .fern-button.filled:has(+ .fern-button.minimal) {
  margin-right: 0.5rem;
}

Copy button for code blocks.

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

Expand button for maxLines code blocks.

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

Page action buttons (edit, feedback, share).

Default CSS
.fern-page-actions {
  display: flex;
  border-radius: var(--radius-2);
  border: 1px solid var(--border-default);
}
.fern-page-actions > *:not(:last-child) {
  border-right: 1px solid var(--border-default);
  margin-right: -1px;
}

Variants:

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

Card components

Selectors for cards.

Card container.

Default CSS
.fern-card {
  color: var(--text-body);
  background-color: var(--card-background);
  border: 1px solid var(--border-default);
  box-shadow: 0 2px 4px var(--grayscale-a3);
  transition-property: all;
}
.fern-card:hover {
  color: var(--text-body);
  transition: none;
}
.fern-card.interactive:hover {
  box-shadow: 0 4px 8px var(--grayscale-a4);
  border-color: var(--accent-a9);
}
.fern-card.elevated {
  border-color: var(--accent-a9);
  box-shadow: 0 4px 12px var(--accent-a4);
}

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
.fern-input {
  width: 100%;
  border: none;
  background-color: transparent;
  outline: none;
  caret-color: var(--accent);
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
}
@media (max-width: 640px) {
  .fern-input {
    font-size: 1rem;
  }
}
input.fern-input::-webkit-outer-spin-button,
input.fern-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
input.fern-input[type="number"] {
  appearance: textfield;
}

Input container with focus ring.

Default CSS
.fern-input-group {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-2);
  background-color: white;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-default);
  height: 2.5rem;
}
@media (prefers-color-scheme: dark) {
  .fern-input-group {
    background-color: var(--grayscale-a2);
  }
}
@media (min-width: 640px) {
  .fern-input-group {
    height: 2rem;
  }
}
.fern-input-group:focus-within {
  outline: none;
  border-color: var(--accent-a5);
  box-shadow: 0 0 0 2px var(--accent-a5);
}
.fern-input-group.error {
  background: rgba(252, 100, 100, 0.63);
}

Input icon.

Default CSS
.fern-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 2rem;
  flex-shrink: 0;
}
.fern-input-icon + .fern-input {
  margin-left: -2rem;
  padding-left: 2rem;
}

Right-side input element.

Default CSS
.fern-input-right-element {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -0.5rem;
  height: 100%;
  min-width: 2rem;
  flex-shrink: 0;
  padding-left: 0;
  padding-right: 0;
}

Input clear button.

Default CSS
.fern-input-clear-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grayscale-a9);
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin-right: 0.25rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  transition: color 0.15s;
}
.fern-input-clear-button:hover {
  color: var(--grayscale-a11);
}

Multi-line text input.

Default CSS
.fern-textarea {
  width: 100%;
  resize: none;
  border: none;
  background-color: transparent;
  outline: none;
  caret-color: var(--accent);
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
}
@media (max-width: 640px) {
  .fern-textarea {
    font-size: 1rem;
  }
}

Textarea container.

Default CSS
.fern-textarea-group {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-2);
  background-color: white;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-default);
}
@media (prefers-color-scheme: dark) {
  .fern-textarea-group {
    background-color: var(--grayscale-a2);
  }
}
.fern-textarea-group:focus-within {
  outline: none;
  border-color: var(--accent-a5);
  box-shadow: 0 0 0 2px var(--accent-a5);
}

Checkbox label.

Default CSS
.fern-checkbox-label {
  display: flex;
  cursor: pointer;
}

Checkbox input.

Default CSS
.fern-checkbox-item {
  border-radius: var(--radius-1);
  position: relative;
  margin-top: 0.125rem;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--border-default);
}
.fern-checkbox-item:hover {
  background-color: var(--accent-a3);
}
.fern-checkbox-item:focus {
  outline: 4px solid var(--accent-a3);
  outline-offset: 0;
}

Checked indicator.

Default CSS
.fern-checkbox-indicator {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-1);
  display: flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
}

Radio button group.

Default CSS
.fern-radio-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fern-radio-group.compact {
  gap: 0.5rem;
  font-size: 0.875rem;
}

Radio label.

Default CSS
.fern-radio-label {
  display: flex;
  cursor: pointer;
}

Radio button input.

Default CSS
.fern-radio-item {
  border: 1px solid var(--border-default);
  position: relative;
  margin-top: 0.125rem;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
}
.fern-radio-item:hover {
  background-color: var(--accent-a3);
}
.fern-radio-item:focus {
  outline: 4px solid var(--accent-a3);
  outline-offset: 0;
}

Selected indicator.

Default CSS
.fern-radio-indicator {
  background-color: var(--accent);
  display: flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}
.fern-radio-indicator::after {
  background-color: var(--background);
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  content: "";
}

Segmented toggle control.

Default CSS
.fern-segmented-control {
  border-radius: var(--radius-3/2);
  height: 2.25rem;
  background-color: white;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0.125rem;
  border: 1px solid var(--border-default);
}
@media (prefers-color-scheme: dark) {
  .fern-segmented-control {
    background-color: rgba(255, 255, 255, 0.05);
  }
}
.fern-segmented-control .fern-button {
  border-radius: var(--radius-1);
  min-width: 0;
  flex-shrink: 1;
}

Numeric input with stepper buttons.

Default CSS
.fern-numeric-input-group {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-2);
  background-color: white;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-default);
  height: 2.5rem;
}
@media (min-width: 640px) {
  .fern-numeric-input-group {
    height: 2rem;
  }
}
.fern-numeric-input-group:focus-within {
  outline: none;
  border-color: var(--accent-a5);
  box-shadow: 0 0 0 2px var(--accent-a5);
}

Numeric input stepper button.

Default CSS
.fern-numeric-input-group .fern-numeric-input-step {
  border-color: var(--border-default);
  height: 100%;
  border-radius: 0;
}
.fern-numeric-input-group .fern-numeric-input-step:first-child {
  border-top-left-radius: var(--radius-3/2);
  border-bottom-left-radius: var(--radius-3/2);
  border-right: 1px solid;
}
.fern-numeric-input-group .fern-numeric-input-step:last-child {
  border-top-right-radius: var(--radius-3/2);
  border-bottom-right-radius: var(--radius-3/2);
  border-left: 1px solid;
}
.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled) {
  color: var(--accent-a11);
  border-color: var(--accent-a5);
}
.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled):hover {
  color: var(--accent-a11);
  background-color: var(--accent-a3);
}

Selectors for dropdowns and the product selector.

Dropdown menu container.

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

Dropdown menu item.

Default CSS
.fern-dropdown-item {
  border-radius: var(--radius-1);
  display: flex;
  width: 100%;
  cursor: default;
  align-items: center;
  justify-content: flex-start;
  padding: 0.25rem 0.5rem;
  text-align: left;
  font-size: 0.875rem;
}
.fern-dropdown-item[data-highlighted] {
  color: var(--accent-contrast);
  background-color: var(--accent);
}

Dropdown selection indicator.

Default CSS
.fern-dropdown-item-indicator {
  margin-right: 0.25rem;
  display: flex;
  height: 100%;
  width: 1rem;
  flex: none;
  align-items: center;
  justify-content: center;
}

Selection item.

Default CSS
.fern-selection-item {
  border-radius: var(--radius-3/2);
  display: flex;
  flex: 1 1 0%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid transparent;
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  width: 100%;
  text-align: left;
  transition: all 200ms ease-in-out;
}
.fern-selection-item:hover {
  color: var(--accent);
  background-color: var(--grayscale-a3);
}

Selection item icon.

Default CSS
.fern-selection-item-icon {
  border-radius: var(--radius-2);
  color: var(--grayscale-a11);
  margin: 0.25rem;
  display: flex;
  height: 56px;
  width: 56px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fern-selection-item-icon.use-icon {
  border: 1px solid var(--grayscale-a5);
  padding: 0.25rem;
}
.fern-selection-item-icon svg,
.fern-selection-item-icon .fern-file-icon {
  display: block;
  height: 50%;
  width: 50%;
  transition: all 300ms ease-in-out;
}
.fern-selection-item:hover .fern-selection-item-icon svg,
.fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
  transform: scale(1.2);
}
.fern-selection-item.dense .fern-selection-item-icon {
  margin: 0.125rem;
  height: 36px;
  width: 36px;
  padding: 0.125rem;
}

Selection item title.

Default CSS
.fern-selection-item-title {
  color: var(--grayscale-a12);
  font-weight: 700;
  line-height: 1.25;
}
@media (min-width: 1024px) {
  .fern-selection-item-title {
    font-size: 0.875rem;
  }
}

Selection item end icon.

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

Product selector. See styles.css for examples.

Default CSS
.fern-product-selector {
  width: 100%;
}
@media (min-width: 1024px) {
  .fern-product-selector {
    width: auto;
  }
}

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

Accordion components

Selectors for accordions.

Accordion container.

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

Accordion item.

Default CSS
.fern-accordion-item {
  overflow: hidden;
}
.fern-accordion-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.fern-accordion-item:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

Expand/collapse trigger.

Default CSS
.fern-accordion-trigger {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  border-radius: inherit;
  padding: 1rem;
  transition-property: background-color;
  list-style: none;
  overflow: auto;
}
.fern-accordion-trigger:hover {
  background-color: var(--grayscale-a2);
  transition: none;
}
.fern-accordion-trigger[data-state="open"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.fern-accordion-trigger::-webkit-details-marker {
  display: none;
}

Expand/collapse arrow.

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

Accordion trigger title.

Default CSS
.fern-accordion-trigger-title {
  color: var(--text-body);
  margin: 0;
  margin-bottom: -1px;
  display: flex;
  max-width: max-content;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5rem;
}
.fern-accordion-trigger-title p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

Scroll area components

Selectors for scrollable areas.

Scrollable area container.

Default CSS
.fern-scroll-area {
  z-index: 0;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
}

Scroll viewport.

Default CSS
.fern-scroll-area-viewport {
  display: flex;
  height: 100%;
  min-height: 0;
  width: 100%;
  flex-shrink: 1;
  flex-direction: column;
  border-radius: inherit;
}
.fern-scroll-area-viewport:has(.fern-scroll-area-scrollbar[data-orientation="horizontal"]) {
  overscroll-behavior-x: contain;
}
.fern-scroll-area-viewport > div {
  display: block !important;
  flex-grow: 1;
}
.fern-scroll-area-viewport[data-scrollbars="vertical"] > div {
  max-width: 100%;
}

Scrollbar.

Default CSS
.fern-scroll-area-scrollbar {
  z-index: 10;
  margin: 0.25rem;
  display: flex;
  touch-action: none;
  user-select: none;
  border-radius: 9999px;
  transition: all 150ms ease-out;
  background-color: var(--grayscale-a3);
}
.fern-scroll-area-scrollbar[data-state="hidden"] {
  opacity: 0;
}
.fern-scroll-area-scrollbar[data-orientation="vertical"] {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 4px;
}
.fern-scroll-area-scrollbar[data-orientation="vertical"]:hover {
  width: 6px;
}
.fern-scroll-area-scrollbar[data-orientation="horizontal"] {
  margin-left: 5px;
  margin-right: 5px;
  height: 4px;
  flex-direction: column;
}
.fern-scroll-area-scrollbar[data-orientation="horizontal"]:hover {
  height: 6px;
}

Scrollbar thumb.

Default CSS
.fern-scroll-area-thumb {
  position: relative;
  z-index: auto;
  display: flex;
  background-color: var(--accent-track);
  flex: 1 1 0%;
  border-radius: 9999px;
}
.fern-scroll-area-thumb::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 28px;
  min-height: 28px;
}

Scrollbar corner.

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

Badge components

Selectors for badges and HTTP method tags.

Badge for labels, status, and HTTP methods.

Default CSS
.fern-docs-badge {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
  justify-content: center;
  line-height: 1rem;
  box-sizing: border-box;
  font-weight: 600;
  white-space: nowrap;
}
.fern-docs-badge.small {
  border-radius: var(--radius-1);
  font-size: 0.75rem;
  height: 1.25rem;
  padding: 0 0.375rem;
}
.fern-docs-badge.large {
  border-radius: var(--radius-3/2);
  font-size: 0.875rem;
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
}
.fern-docs-badge.rounded {
  border-radius: 9999px !important;
}
.fern-docs-badge:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fern-docs-badge[data-badge-type="http-method"],
.fern-docs-badge[data-badge-type="status-code"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-variant-numeric: slashed-zero;
  text-transform: uppercase;
}

MDX content components

Selectors for links, callouts, steps, and tables.

Callout with intent-matched colors.

Default CSS
.fern-callout {
  border-radius: var(--radius-3);
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  border: 1px solid;
  padding: 1rem;
}
.fern-callout:first-child {
  margin-top: 0;
}

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
.fern-indent {
  position: relative;
  margin-left: 1rem;
  padding-left: 1rem;
}
.fern-indent > * + * {
  margin-top: 0.25rem;
}
.fern-indent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  border-left: 1px solid transparent;
}

Steps container.

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

Single step.

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

Anchor for deep linking.

Default CSS
a.fern-anchor {
  border-radius: var(--radius-3/2);
  position: relative;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  border: 0;
}
.fern-anchor-icon {
  border-radius: var(--radius-3/2);
  position: absolute;
  left: 0;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
}
.fern-anchor-icon:not(.copied) {
  color: var(--grayscale-a11);
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
}
.fern-anchor-icon.copied {
  background-color: var(--accent-a3);
  border: 1px solid var(--accent-a5);
  backdrop-filter: blur(8px);
}
.fern-anchor-icon.copied > svg {
  color: var(--accent-a11);
}
.fern-anchor-icon > svg {
  width: 1rem;
  height: 1rem;
}

Table container.

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

Table with .sticky support for sticky headers.

Default CSS
.fern-table {
  width: 100%;
}
.fern-table thead tr th {
  background-color: var(--grayscale-a2);
}
.fern-table td,
.fern-table th {
  height: 2.25rem;
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
}
.fern-table tbody > tr:last-child > td {
  border-bottom: 0;
}
.fern-table.sticky {
  font-size: 0.875rem;
}
.fern-table.sticky thead {
  position: sticky;
  top: var(--header-height, var(--spacing-header-height-real));
}
.fern-table.sticky thead tr th {
  background-color: var(--grayscale-2);
}
.fern-table.sticky td,
.fern-table.sticky th {
  max-width: 0;
}

Changelog filter components

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

Filter dropdown trigger button.

Default CSS
.fern-filter-dropdown-button {
  /* Inherits from .fern-button with variant="outlined" */
}
Example: Customize the filter button appearance
/* Style the filter dropdown button */
.fern-filter-dropdown-button {
  border-color: var(--accent-a7);
  background-color: var(--accent-a2);
}
.fern-filter-dropdown-button:hover {
  border-color: var(--accent-a9);
  background-color: var(--accent-a3);
}

Filter button text.

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

Filter button chevron.

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

Filter dropdown item.

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

Filter badge base class.

Default CSS
.fern-filter-badge {
  display: inline;
  max-width: 100%;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

Selected filter badge.

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

Unselected filter badge.

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

Filter dropdown checkmark.

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

API Reference components

Selectors for API Reference components.

API property container.

Default CSS
.fern-api-property {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.fern-api-property p:last-child {
  margin-bottom: 0;
}

API property header.

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

API property name.

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

API property metadata (type, required).

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

API property constraint.

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

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

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

“Required” label on required properties.

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

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

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

Default value display for a property.

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

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

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

Utility components

Selectors for icons, tooltips, and other elements.

Highlighted text.

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

Inline icon (adapts to theme).

Default CSS
.fern-mdx-icon {
  color: var(--grayscale-a11);
  display: inline-block;
  vertical-align: baseline;
}
@variant dark {
  .fern-mdx-icon {
    color: var(--fa-icon-dark, var(--grayscale-a11));
  }
}

Tooltip trigger with underline.

Default CSS
.fern-mdx-tooltip-trigger {
  --tooltip-underline-color: var(--grayscale-a10);
  --tooltip-underline-hover-color: var(--grayscale-12);
  --tooltip-underline-thickness: 1px;
  --tooltip-underline-offset: 1px;
  --tooltip-transition-duration: 0.15s;
  display: inline-block;
  cursor: help;
  text-decoration: underline dashed var(--tooltip-underline-color) var(--tooltip-underline-thickness);
  text-underline-position: under;
  text-underline-offset: var(--tooltip-underline-offset);
  transition: text-decoration-color var(--tooltip-transition-duration) ease;
}
.fern-mdx-tooltip-trigger:hover {
  text-decoration-color: var(--tooltip-underline-hover-color);
}

Tooltip content.

Default CSS
.fern-mdx-tooltip-content {
  --tooltip-padding-x: 0.75rem;
  padding-left: var(--tooltip-padding-x) !important;
  padding-right: var(--tooltip-padding-x) !important;
}

File type icon.

Default CSS
.fern-selection-item-icon .fern-file-icon {
  display: block;
  height: 50%;
  width: 50%;
  transition: all 300ms ease-in-out;
}
.fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
  transform: scale(1.2);
}

Collapsible child element.

Default CSS
.fern-collapsible[data-state="open"] .fern-collapsible-child {
  animation: slide-down 0.18s var(--ease-collapse) none;
  width: var(--radix-collapsible-content-width);
}
.fern-collapsible[data-state="closed"] .fern-collapsible-child {
  animation: slide-up 0.18s var(--ease-collapse) none;
  width: var(--radix-collapsible-content-width);
}
@keyframes slide-down {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

Runnable endpoint.

Default CSS
.fern-runnable-endpoint ul {
  padding-left: 0 !important;
  margin-top: 0 !important;
}
.fern-runnable-endpoint button {
  margin-top: 0 !important;
}
.fern-runnable-endpoint .fern-input:disabled,
.fern-runnable-endpoint .fern-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.fern-runnable-endpoint .fern-input-group:has(.fern-input:disabled),
.fern-runnable-endpoint .fern-textarea-group:has(.fern-textarea:disabled),
.fern-runnable-endpoint .fern-numeric-input-group:has(.fern-input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--grayscale-a2);
  pointer-events: none;
}

RSS feed button.

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

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
.fern-changelog-feed {
  width: var(--content-wide-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

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

Default CSS
.fern-changelog-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--grayscale-a4);
}
.fern-changelog-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.fern-changelog-search {
  min-width: 0;
  flex: 1 1 0%;
}

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
.fern-changelog-timeline {
  display: flex;
  flex-direction: column;
}
.fern-changelog-day-group {
  display: flex;
  gap: 1rem;
}
.fern-changelog-day {
  color: var(--grayscale-a11);
  width: 6rem;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  position: sticky;
  top: calc(var(--fern-changelog-sticky-top, var(--spacing-header-height-padded)) + 0.5rem);
}
.fern-changelog-day-entries {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  border-left: 1px solid var(--grayscale-a4);
}

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
.fern-changelog-card {
  position: relative;
  border-radius: var(--radius-3);
  padding: 1.25rem 1rem 1.25rem 1.5rem;
  transition: color, background-color;
}
.fern-changelog-card:hover {
  background-color: var(--grayscale-a2);
}
.fern-changelog-card-marker {
  position: absolute;
  left: 0;
  top: 2rem;
  width: 0.625rem;
  height: 0.625rem;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background-color: var(--grayscale-6);
}
.fern-changelog-card:hover .fern-changelog-card-marker {
  background-color: var(--accent);
}
.fern-changelog-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.fern-changelog-card-title {
  margin: 0;
  color: var(--grayscale-a12);
  font-size: 1rem;
  font-weight: 600;
}
.fern-changelog-card-excerpt {
  margin: 0;
  color: var(--grayscale-a11);
  font-size: 0.875rem;
  line-height: 1.625;
}

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
.fern-changelog-tags {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.fern-changelog-highlight {
  background-color: var(--accent-a3);
  color: var(--accent-a11);
  border-radius: var(--radius-1);
}
.fern-changelog-empty {
  color: var(--grayscale-a11);
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
  font-size: 0.875rem;
}

Changelog content area.

Default CSS
.fern-changelog-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: var(--content-width);
  grid-template-columns: 1fr;
  gap: 1rem;
}

Changelog entry label.

Default CSS
.fern-changelog-label {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 0.5rem;
}
@media (min-width: 1280px) {
  .fern-changelog-label {
    flex-direction: column;
  }
}

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