Customization

CSS selectors reference

View as Markdown

Complete reference of all .fern-* selectors available for customizing your documentation site.

Fern selectors use Tailwind CSS utilities and CSS custom properties. Write custom styles that complement existing styles rather than override them completely.

Layout and structure

Selectors for controlling the overall page layout, background styling, and page heading appearance.

Applies a fixed background image to the documentation layout that won’t scroll with page content.

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}

Styles the primary heading (h1) on documentation pages with balanced text wrapping and automatic word breaking to prevent overflow.

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}

Header components

Selectors for customizing the site header, including the logo container, search bar, navigation tabs, and mobile menu button.

Container for the documentation site header with a frosted glass backdrop blur effect.

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

Container for navigation tabs in the header, hidden on mobile and visible on desktop (1024px+) with matching blur effect.

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}

Container for the site logo in the header.

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}

Button to toggle mobile navigation menu.

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 styling the sidebar navigation, including headers, links, groups, and tabs.

Header section at the top of the 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}

Heading for sidebar navigation sections.

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}

Text content of sidebar section headings.

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}

Container for grouped sidebar navigation 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}

Container for tab navigation in the sidebar.

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 elements and separators.

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

Individual link or text in breadcrumb navigation.

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}

Separator icon between breadcrumb items.

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 styling buttons with various variants, sizes, and states.

Styled button element with multiple variants (minimal, filled, outlined, primary, success, warning, danger), size modifiers (small, large, square), and support for rounded and multiline styles.

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

Wrapper for button content including icons and text.

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}

Text element inside button.

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}

Container for grouping multiple buttons together.

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}

Button for copying code snippets or text, appears on hover over code blocks.

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

Button for expanding code blocks or collapsible content, appears on code blocks with maxLines set.

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

Card components

Selectors for card-style content blocks with interactive and elevated variants.

Container for card-style content blocks with interactive and elevated variants, automatically styling nested lists and adapting to dark mode.

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, text areas, checkboxes, radio buttons, and other form controls.

Styled text input element with hidden number spinners and increased font size on mobile for better usability.

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}

Container for input with additional elements (icons, buttons), with focus ring and error state styling.

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}

Icon element within input group.

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}

Element positioned on the right side of input (e.g., clear button).

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}

Multi-line text input element.

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}

Container for textarea with additional styling.

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}

Label element wrapping checkbox input.

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

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

Visual indicator when checkbox is checked.

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}

Container for grouped radio buttons.

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}

Label element wrapping radio input.

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

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

Visual indicator when radio button is selected.

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}

Toggle control with multiple options.

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}

Number input with increment/decrement 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}

Increment/decrement button in numeric input.

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 dropdown menus, selection items, and product selector components.

Container for dropdown menu content.

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}

Individual selectable item in dropdown.

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}

Icon showing selected state in dropdown item.

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}

Large selectable item with icon and title, used in product selector.

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}

Icon container in selection item.

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}

Title text in selection item.

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}

Icon at the end of selection item (e.g., arrow).

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

Container for product selection dropdown applied to the FernDropdown component wrapper. Custom styling can be applied for specific layouts. See the fern-api/docs repo styles.css file for advanced customization 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}

Radio button group within the product selector dropdown. Can be customized with CSS grid for multi-column layouts. See the fern-api/docs repo styles.css file for examples.

Accordion components

Selectors for expandable accordion containers, items, triggers, and animations.

Container for accordion component.

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}

Single expandable item in accordion.

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}

Clickable trigger to expand/collapse accordion item.

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}

Arrow icon indicating expand/collapse state.

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}

Title text in accordion trigger.

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 custom scrollable areas with styled scrollbars and viewports.

Container for custom scrollable area.

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}

Viewport element containing scrollable content.

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}

Styled scrollbar element.

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}

Draggable thumb element in scrollbar. The ::before pseudo-element increases touch target size for accessibility.

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}

Corner element where horizontal and vertical scrollbars meet.

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

Badge components

Selectors for small labels and status indicators, including HTTP method and status code badges.

Small badge for labels, status indicators, HTTP methods, etc. HTTP method badges use monospace font and support color variants based on HTTP method or status code.

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 content elements within MDX documentation, including links, callouts, steps, and tables.

Highlighted callout box for important information. Each intent has matching background, border, and text colors, and icons within callouts are automatically colored.

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

Container for step-by-step instructions.

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 in steps component.

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

Anchor link for deep linking to sections. Positioned absolutely within step components and includes a .fern-anchor-icon child element with hover and copied states.

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}

Root container for table component with card-style styling. Used for custom table implementations and provides base styling for table layouts.

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}

Styled table element with consistent spacing and borders. Supports a .sticky modifier for sticky table headers that remain visible during scrolling.

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}

API Reference components

Selectors for API Reference documentation, including property names, metadata, and containers.

Container for API property documentation.

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}

Header section of API property.

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

Property name in API documentation.

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}

Metadata for API property (type, required, etc.).

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}

Utility components

Selectors for miscellaneous utility elements like highlights, icons, tooltips, and footer.

Highlighted/emphasized text element.

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

Icon element in documentation content for inline icons in text. Automatically adapts to light and dark mode using CSS variables.

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}

Element that triggers tooltip on hover for inline tooltips. Provides CSS custom properties (--tooltip-underline-color, --tooltip-underline-hover-color, etc.) for customizing underline appearance.

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}

Content displayed in tooltip, positioned absolutely relative to trigger. Provides a --tooltip-padding-x CSS custom property for customizing horizontal padding.

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}

Icon representing a file type used in selection items and file browsers. Automatically scales to 1.2× on hover when used within .fern-selection-item.

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}

Child element within collapsible content for nested collapsible sections. Automatically animates with slide-down and slide-up effects when parent collapsible opens or closes.

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}

Interactive API endpoint that can be executed in API playground features. Provides special styling for lists, buttons, and disabled inputs within the component.

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}

Button for subscribing to RSS feeds.

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

Light and dark mode customization

Techniques for creating styles that automatically adapt between light and dark themes using CSS variables.

Fern applies theme-specific CSS variables that automatically adapt to light and dark modes. Light mode uses the .light and :root selectors, while dark mode uses the .dark selector. Use Fern’s CSS custom properties so your styles automatically adapt across themes.

Fern provides the following CSS variables for theming:

Color scales:

  • --accent-1 through --accent-12 - Accent color scale
  • --accent-a1 through --accent-a12 - Accent color scale with alpha transparency
  • --grayscale-1 through --grayscale-12 - Grayscale color scale
  • --grayscale-a1 through --grayscale-a12 - Grayscale with alpha transparency

Theme variables:

  • --background - Page background color
  • --card-background - Card background color
  • --border - Border color
  • --sidebar-background - Sidebar background color
  • --header-background - Header background color
  • --accent - Primary accent color

Use CSS variables to create backgrounds that automatically adapt to the theme. Override with .dark selector only when you need theme-specific styling.

1/* Auto-adapts using Fern variables */
2.fern-background-image {
3  background-color: var(--background);
4  background-image: linear-gradient(
5    to bottom,
6    color-mix(in srgb, var(--accent-9), var(--background) 85%) 0%,
7    var(--background) 100%
8  );
9}
10
11/* Explicit dark mode override for different gradient direction */
12.dark .fern-background-image {
13  background-image: linear-gradient(
14    to bottom,
15    var(--background) 0%,
16    color-mix(in srgb, var(--accent-9), var(--background) 85%) 100%
17  );
18}

Cards automatically adapt to theme changes when using CSS variables. Add explicit dark mode overrides only for properties like shadows that need theme-specific values.

1/* Plant catalog card that adapts to theme */
2.fern-card.plant-card {
3  background-color: var(--card-background);
4  border-color: var(--border);
5  color: var(--grayscale-12);
6  box-shadow: 0 1px 2px var(--grayscale-a3);
7}
8
9.fern-card.plant-card.interactive:hover {
10  box-shadow: 0 4px 12px var(--accent-a6);
11}
12
13/* Dark mode shadow adjustment */
14.dark .fern-card.plant-card {
15  box-shadow: 0 2px 6px var(--grayscale-a4);
16}

Text colors automatically adapt when using Fern’s grayscale and accent variables. Use --grayscale-12 for primary text, --grayscale-a11 for secondary text, and --accent-11 for links.

1/* Plant species content */
2.plant-content {
3  color: var(--grayscale-12);
4}
5
6.plant-content .description {
7  color: var(--grayscale-a11);
8}
9
10.plant-content a {
11  color: var(--accent-11);
12  text-decoration-color: color-mix(in srgb, var(--accent-11), transparent 50%);
13}
14
15.plant-content a:hover {
16  color: var(--accent-12);
17}

There are multiple approaches for adapting images to light and dark modes.

SVG icons with currentColor (recommended):

HTML
1<svg class="plant-icon" width="24" height="24" fill="currentColor">
2  <!-- SVG paths -->
3</svg>
CSS
1.plant-icon {
2  color: var(--grayscale-11);
3}
4
5.plant-icon.accent {
6  color: var(--accent-11);
7}

Swapping background images:

CSS
1.hero-plant {
2  background-image: url('/assets/plants/hero-light.png');
3  background-size: cover;
4  background-position: center;
5}
6
7.dark .hero-plant {
8  background-image: url('/assets/plants/hero-dark.png');
9}

Using picture element with prefers-color-scheme:

HTML
1<picture>
2  <source srcset="/assets/plants/hero-dark.png" media="(prefers-color-scheme: dark)">
3  <img src="/assets/plants/hero-light.png" alt="Plant species">
4</picture>

The prefers-color-scheme media query follows the operating system theme preference and may not match a manual theme toggle on your site. For perfect alignment with Fern’s theme switcher, use the .dark selector approach instead.

Using CSS filters (last resort):

CSS
1.logo-monochrome {
2  filter: grayscale(1);
3}
4
5.dark .logo-monochrome {
6  filter: invert(1) grayscale(1);
7}

Avoid hardcoding hex colors in your custom CSS. Always use Fern’s CSS variables to maintain proper contrast and theme consistency.