# CSS selectors reference

> Reference guide for all CSS selectors available in Fern docs. Customize layouts, navigation, buttons, forms, accordions, badges, API components, and more.

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

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

## Layout and structure

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

<AccordionGroup>
  <Accordion title=".fern-background-image">
    Applies a fixed background image to the documentation layout that won't scroll with page content.

    ```css Default CSS
    .fern-background-image {
      background-attachment: fixed;
      background-size: cover;
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: center;
    }
    ```
  </Accordion>

  <Accordion title=".fern-page-heading">
    Styles the primary heading (h1) on documentation pages with balanced text wrapping and automatic word breaking to prevent overflow.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-page">
    Main page layout container that provides consistent padding and minimum height.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-guide">
    Layout container for guide-style documentation pages with consistent spacing.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-reference">
    Layout container for API Reference pages with two-column grid support.

    ```css 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;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-overview">
    Layout container for overview pages with consistent spacing.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-changelog">
    Layout container for changelog pages with responsive aside positioning.

    ```css 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;
    }
    ```
  </Accordion>
</AccordionGroup>

## Header components

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

<AccordionGroup>
  <Accordion title=".fern-header">
    Container for the documentation site header with a frosted glass backdrop blur effect.

    ```css Default CSS
    .fern-header {
      backdrop-filter: blur(0.5rem);
      background-color: transparent;
    }
    ```
  </Accordion>

  <Accordion title=".fern-header-tabs">
    Container for navigation tabs in the header, hidden on mobile and visible on desktop (1024px+) with matching blur effect.

    ```css 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;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-header-logo-container">
    Container for the site logo in the header.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-header-search-bar">
    Container for the search input in the header, hidden on mobile and visible on desktop.

    ```css Default CSS
    .fern-header-search-bar {
      display: none;
      width: 100%;
      min-width: 0;
      flex-shrink: 1;
    }

    @media (min-width: 1024px) {
      .fern-header-search-bar {
        display: inline-flex;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-header-navbar-links">
    Container for navigation links in the header.

    ```css Default CSS
    .fern-header-navbar-links {
      display: none;
      flex: 1 1 0%;
    }

    @media (min-width: 1024px) {
      .fern-header-navbar-links {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-header-mobile-menu-button">
    Button to toggle mobile navigation menu.

    ```css Default CSS
    .fern-header-mobile-menu-button {
      display: flex;
      flex: 1 1 0%;
      align-items: center;
      justify-content: flex-end;
    }
    ```
  </Accordion>
</AccordionGroup>

## Sidebar components

Selectors for styling the sidebar navigation, including headers, links, groups, and tabs.

<AccordionGroup>
  <Accordion title=".fern-sidebar-header">
    Header section at the top of the sidebar.

    ```css 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;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-heading">
    Heading for sidebar navigation sections.

    ```css 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;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-heading-content">
    Text content of sidebar section headings.

    ```css 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;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-link">
    Individual navigation link in the sidebar with hover and active states using grayscale and accent colors.

    ```css Default CSS
    .fern-sidebar-link {
      color: var(--grayscale-a11);
      display: flex;
      width: 100%;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 1rem;
      text-align: left;
      font-size: 1rem;
      line-height: 1.25;
      transition-property: color, background-color;
    }

    @media (min-width: 1024px) {
      .fern-sidebar-link {
        border-radius: var(--radius-2);
        padding: 0.5rem;
        font-size: 0.875rem;
      }
    }

    .fern-sidebar-link:hover {
      color: var(--grayscale-a12);
      background-color: var(--grayscale-a3);
      transition: none;
    }

    .fern-sidebar-link[data-state="active"] {
      color: var(--accent-a11);
      background-color: var(--accent-a3);
      font-weight: 500;
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-link-title">
    Text content of sidebar navigation links, truncated with ellipsis by default with optional marquee animation or wrapping.

    ```css Default CSS
    .fern-sidebar-link-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .fern-sidebar-link-title.marquee-active {
      text-overflow: clip;
    }

    .fern-sidebar-link-title.wrap-mode {
      white-space: normal;
      overflow-wrap: anywhere;
      text-overflow: clip;
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-link-title-inner">
    Enables marquee animation for long sidebar link titles (disabled when `prefers-reduced-motion` is set).

    ```css Default CSS
    .fern-sidebar-link-title-inner {
      display: inline;
      will-change: transform;
      transform: translateX(0);
    }

    .fern-sidebar-link-title-inner.is-marquee {
      display: inline-block;
      animation: fern-sidebar-marquee var(--marquee-duration, 4s) linear forwards;
    }

    @keyframes fern-sidebar-marquee {
      to {
        transform: translateX(var(--marquee-translate, 0));
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-group">
    Container for grouped sidebar navigation items.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-tabs">
    Container for tab navigation in the sidebar.

    ```css Default CSS
    .fern-sidebar-tabs {
      margin-top: 1.25rem;
      margin-bottom: 1.5rem;
      display: flex;
      flex-direction: column;
      list-style: none;
    }
    ```
  </Accordion>
</AccordionGroup>

## Navigation components

Selectors for breadcrumb navigation elements and separators.

<AccordionGroup>
  <Accordion title=".fern-breadcrumb">
    Container for breadcrumb navigation.

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

  <Accordion title=".fern-breadcrumb-item">
    Individual link or text in breadcrumb navigation.

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

  <Accordion title=".fern-breadcrumb-arrow">
    Separator icon between breadcrumb items.

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

## Button components

Selectors for styling buttons with various variants, sizes, and states.

<AccordionGroup>
  <Accordion title=".fern-button">
    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.

    ```css 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
  </Accordion>

  <Accordion title=".fern-button-content">
    Wrapper for button content including icons and text.

    ```css Default CSS
    .fern-button-content {
      display: inline-flex;
      min-width: 0;
      flex-shrink: 1;
      align-items: center;
      height: 1.5rem;
      gap: 0.375rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-button-text">
    Text element inside button.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-button-group">
    Container for grouping multiple buttons together.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-copy-button">
    Button for copying code snippets or text, appears on hover over [code blocks](/learn/docs/writing-content/components/code-blocks).

    ```css Default CSS
    .fern-copy-button {
      width: fit-content;
      height: fit-content;
      backdrop-filter: blur(8px);
    }
    ```
  </Accordion>

  <Accordion title=".fern-expand-button">
    Button for expanding code blocks or collapsible content, appears on [code blocks with `maxLines` set](/learn/docs/writing-content/components/code-blocks#max-height).

    ```css Default CSS
    .fern-expand-button {
      width: fit-content;
      height: fit-content;
      backdrop-filter: blur(8px);
    }
    ```
  </Accordion>

  <Accordion title=".fern-page-actions">
    Container for page action buttons such as edit, feedback, and share buttons. Provides a grouped button appearance with borders between items.

    ```css 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
  </Accordion>
</AccordionGroup>

## Card components

Selectors for [card-style content blocks](/learn/docs/writing-content/components/cards) with interactive and elevated variants.

<AccordionGroup>
  <Accordion title=".fern-card">
    Container for card-style content blocks with interactive and elevated variants, automatically styling nested lists and adapting to dark mode.

    ```css 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
  </Accordion>
</AccordionGroup>

## Form components

Selectors for form inputs, text areas, checkboxes, radio buttons, and other form controls.

<AccordionGroup>
  <Accordion title=".fern-input">
    Styled text input element with hidden number spinners and increased font size on mobile for better usability.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-input-group">
    Container for input with additional elements (icons, buttons), with focus ring and error state styling.

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-input-icon">
    Icon element within input group.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-input-right-element">
    Element positioned on the right side of input (e.g., clear button).

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-input-clear-button">
    Clear button inside input fields that allows users to clear the input value.

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-textarea">
    Multi-line text input element.

    ```css 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;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-textarea-group">
    Container for textarea with additional styling.

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-checkbox-label">
    Label element wrapping checkbox input.

    ```css Default CSS
    .fern-checkbox-label {
      display: flex;
      cursor: pointer;
    }
    ```
  </Accordion>

  <Accordion title=".fern-checkbox-item">
    Styled checkbox input.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-checkbox-indicator">
    Visual indicator when checkbox is checked.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-radio-group">
    Container for grouped radio buttons.

    ```css Default CSS
    .fern-radio-group {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .fern-radio-group.compact {
      gap: 0.5rem;
      font-size: 0.875rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-radio-label">
    Label element wrapping radio input.

    ```css Default CSS
    .fern-radio-label {
      display: flex;
      cursor: pointer;
    }
    ```
  </Accordion>

  <Accordion title=".fern-radio-item">
    Styled radio button input.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-radio-indicator">
    Visual indicator when radio button is selected.

    ```css 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: "";
    }
    ```
  </Accordion>

  <Accordion title=".fern-segmented-control">
    Toggle control with multiple options.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-numeric-input-group">
    Number input with increment/decrement buttons.

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-numeric-input-step">
    Increment/decrement button in numeric input.

    ```css 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);
    }
    ```
  </Accordion>
</AccordionGroup>

## Dropdown and selection components

Selectors for dropdown menus, selection items, and [product selector components](/learn/docs/configuration/products).

<AccordionGroup>
  <Accordion title=".fern-dropdown">
    Container for dropdown menu content.

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-dropdown-item">
    Individual selectable item in dropdown.

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-dropdown-item-indicator">
    Icon showing selected state in dropdown item.

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

  <Accordion title=".fern-selection-item">
    Large selectable item with icon and title, used in product selector.

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-selection-item-icon">
    Icon container in selection item.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-selection-item-title">
    Title text in selection item.

    ```css 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;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-selection-item-end-icon">
    Icon at the end of selection item (e.g., arrow).

    ```css Default CSS
    .fern-selection-item-end-icon {
      color: var(--grayscale-a11);
    }
    ```
  </Accordion>

  <Accordion title=".fern-product-selector">
    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](https://github.com/fern-api/docs/blob/main/fern/assets/styles.css) for advanced customization examples.

    ```css Default CSS
    .fern-product-selector {
      width: 100%;
    }

    @media (min-width: 1024px) {
      .fern-product-selector {
        width: auto;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-product-selector-radio-group">
    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](https://github.com/fern-api/docs/blob/main/fern/assets/styles.css) for examples.
  </Accordion>
</AccordionGroup>

## Accordion components

Selectors for [expandable accordion containers](/learn/docs/writing-content/components/accordions), items, triggers, and animations.

<AccordionGroup>
  <Accordion title=".fern-accordion">
    Container for accordion component.

    ```css Default CSS
    .fern-accordion {
      border-radius: var(--radius-3);
      border-top: 1px solid var(--border-default);
    }

    .fern-accordion li {
      list-style-position: outside;
    }
    ```
  </Accordion>

  <Accordion title=".fern-accordion-item">
    Single expandable item in accordion.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-accordion-trigger">
    Clickable trigger to expand/collapse accordion item.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-accordion-trigger-arrow">
    Arrow icon indicating expand/collapse state.

    ```css 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>

  <Accordion title=".fern-accordion-trigger-title">
    Title text in accordion trigger.

    ```css 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;
    }
    ```
  </Accordion>
</AccordionGroup>

## Scroll area components

Selectors for custom scrollable areas with styled scrollbars and viewports.

<AccordionGroup>
  <Accordion title=".fern-scroll-area">
    Container for custom scrollable area.

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

  <Accordion title=".fern-scroll-area-viewport">
    Viewport element containing scrollable content.

    ```css 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%;
    }
    ```
  </Accordion>

  <Accordion title=".fern-scroll-area-scrollbar">
    Styled scrollbar element.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-scroll-area-thumb">
    Draggable thumb element in scrollbar. The `::before` pseudo-element increases touch target size for accessibility.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-scroll-area-corner">
    Corner element where horizontal and vertical scrollbars meet.

    ```css Default CSS
    .fern-scroll-area-corner {
      background-color: transparent;
    }
    ```
  </Accordion>
</AccordionGroup>

## Badge components

Selectors for [small labels and status indicators](/learn/docs/writing-content/components/badges), including HTTP method and status code badges.

<AccordionGroup>
  <Accordion title=".fern-docs-badge">
    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.

    ```css 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;
    }
    ```
  </Accordion>
</AccordionGroup>

## MDX content components

Selectors for content elements within MDX documentation, including links, callouts, steps, and tables.

<AccordionGroup>
  <Accordion title=".fern-mdx-link">
    Styled link element in documentation content. External links automatically get an icon, and underline thickness increases on hover.

    ```css Default CSS
    .fern-mdx-link {
      color: var(--accent-a11);
      font-weight: 600;
      text-decoration-line: underline;
      text-decoration-color: currentcolor;
      text-decoration-thickness: 1px !important;
      text-underline-offset: 0.25rem;
    }

    .fern-mdx-link:hover {
      text-decoration-thickness: 2px !important;
    }

    .fern-mdx-link svg.external-link-icon {
      margin-left: 0.125rem;
      display: inline-block;
      width: 0.875rem;
      height: 0.875rem;
      color: currentColor;
      opacity: 0.7;
      overflow: visible;
    }

    .fern-mdx-link:hover svg.external-link-icon path:nth-child(1),
    .fern-mdx-link:hover svg.external-link-icon path:nth-child(2) {
      transform: translate(2px, -2px);
      transition: transform 0.2s ease;
    }
    ```
  </Accordion>

  <Accordion title=".fern-callout">
    Highlighted [callout](/learn/docs/writing-content/components/callouts) box for important information. Each intent has matching background, border, and text colors, and icons within callouts are automatically colored.

    ```css 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
  </Accordion>

  <Accordion title=".fern-indent">
    Container for [indented content](/learn/docs/writing-content/components/indent) with a vertical guide line. Creates left indentation with spacing between child elements. The guide line is rendered using a `::before` pseudo-element with a transparent border by default; customize it by setting `border-left-color` on `.fern-indent::before`.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-steps">
    Container for [step-by-step instructions](/learn/docs/writing-content/components/steps).

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-step">
    Single step in [steps component](/learn/docs/writing-content/components/steps).

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

  <Accordion title=".fern-anchor">
    Anchor link for [deep linking to sections](/learn/docs/writing-content/components/anchor). Positioned absolutely within step components and includes a `.fern-anchor-icon` child element with hover and copied states.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-table-root">
    Root container for table component with card-style styling. Used for custom table implementations and provides base styling for table layouts.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-table">
    Styled table element with consistent spacing and borders. Supports a `.sticky` modifier for [sticky table headers](/learn/docs/writing-content/components/tables#sticky-tables) that remain visible during scrolling.

    ```css 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;
    }
    ```
  </Accordion>
</AccordionGroup>

## Changelog filter components

Selectors for customizing the changelog filter UI, including the filter dropdown button, filter badges, and dropdown menu items. These selectors only appear on [changelog pages](/learn/docs/configuration/changelogs) that have tags configured.

<AccordionGroup>
  <Accordion title=".fern-filter-dropdown-button">
    The button that opens the changelog filter dropdown menu. This selector is applied when there are more than 5 filter options.

    ```css Default CSS
    .fern-filter-dropdown-button {
      /* Inherits from .fern-button with variant="outlined" */
    }
    ```

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-dropdown-button-text">
    The text content inside the filter dropdown button (e.g., "Select filters" or the selected filter names).

    ```css Default CSS
    .fern-filter-dropdown-button-text {
      /* Inherits text styles from parent button */
    }
    ```

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-dropdown-button-icon">
    The chevron icon inside the filter dropdown button.

    ```css Default CSS
    .fern-filter-dropdown-button-icon {
      width: 1rem;
      height: 1rem;
    }
    ```

    ```css Example: Customize the chevron icon
    /* Change the chevron color */
    .fern-filter-dropdown-button-icon {
      color: var(--accent-a11);
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-dropdown-item">
    Individual filter option items inside the dropdown menu.

    ```css Default CSS
    .fern-filter-dropdown-item {
      /* Inherits from .fern-dropdown-item */
    }
    ```

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-badge">
    Base class applied to all filter badges displayed on changelog entries. Use this selector in combination with `.fern-filter-badge-selected` or `.fern-filter-badge-unselected` for state-specific styling.

    ```css Default CSS
    .fern-filter-badge {
      display: inline;
      max-width: 100%;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-badge-selected">
    Applied to filter badges that are selected, in addition to `.fern-filter-badge`.

    ```css Default CSS
    .fern-filter-badge-selected {
      /* Inherits from .fern-docs-badge with variant="outlined" */
    }
    ```

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-badge-unselected">
    Applied to filter badges that aren't selected, in addition to `.fern-filter-badge`.

    ```css Default CSS
    .fern-filter-badge-unselected {
      /* Inherits from .fern-docs-badge with variant="outlined-subtle" */
    }
    ```

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-dropdown-checkmark">
    The checkmark icon shown for selected items in filter dropdowns and other multi-select dropdowns.

    ```css Default CSS
    .fern-dropdown-checkmark {
      width: 1rem;
      height: 1rem;
    }
    ```

    ```css 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);
    }
    ```
  </Accordion>
</AccordionGroup>

## API Reference components

Selectors for [API Reference documentation](/learn/docs/api-references/generate-api-ref), including property names, metadata, and containers.

<AccordionGroup>
  <Accordion title=".fern-api-property">
    Container for API property documentation.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-api-property-header">
    Header section of API property.

    ```css Default CSS
    .fern-api-property-header {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-api-property-key">
    Property name in API documentation.

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

  <Accordion title=".fern-api-property-meta">
    Metadata for API property (type, required, etc.).

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

  <Accordion title=".fern-api-property-constraint">
    Constraint information displayed for API properties such as minimum/maximum values, patterns, or other validation rules.

    ```css Default CSS
    .fern-api-property-constraint {
      display: inline-block;
      max-width: 100%;
      min-width: 0;
    }
    ```
  </Accordion>
</AccordionGroup>

## Utility components

Selectors for miscellaneous utility elements like highlights, [icons](/learn/docs/writing-content/components/icons), [tooltips](/learn/docs/writing-content/components/tooltips), and footer.

<AccordionGroup>
  <Accordion title=".fern-highlight">
    Highlighted/emphasized text element.

    ```css Default CSS
    .fern-highlight {
      color: var(--accent-a12);
      background-color: transparent;
      font-weight: 700;
    }
    ```
  </Accordion>

  <Accordion title=".fern-mdx-icon">
    Icon element in documentation content for inline icons in text. Automatically adapts to light and dark mode using CSS variables.

    ```css 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));
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-mdx-tooltip-trigger">
    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.

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-mdx-tooltip-content">
    Content displayed in tooltip, positioned absolutely relative to trigger. Provides a `--tooltip-padding-x` CSS custom property for customizing horizontal padding.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-file-icon">
    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`.

    ```css 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);
    }
    ```
  </Accordion>

  <Accordion title=".fern-collapsible-child">
    Child element within collapsible content for nested collapsible sections. Automatically animates with slide-down and slide-up effects when parent collapsible opens or closes.

    ```css 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%);
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-runnable-endpoint">
    [Interactive API endpoint that can be executed](/learn/docs/writing-content/components/runnable-endpoint) in API playground features. Provides special styling for lists, buttons, and disabled inputs within the component.

    ```css 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;
    }
    ```
  </Accordion>

  <Accordion title=".fern-rss-feed-button">
    Button for subscribing to RSS feeds.

    ```css Default CSS
    .fern-rss-feed-button .fern-button-content {
      gap: 0.5rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-footer">
    Container for documentation footer.

    ```css Default CSS
    .fern-layout-footer.not-prose {
      margin-top: 4rem !important;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-footer-toolbar">
    Toolbar within the footer containing navigation and action buttons.

    ```css Default CSS
    .fern-layout-footer-toolbar {
      display: flex;
      gap: 1rem;
      justify-content: space-between;
    }

    @media (max-width: 640px) {
      .fern-layout-footer-toolbar {
        flex-direction: column;
        gap: 2rem;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-footer-nav">
    Container for the previous/next page navigation at the bottom of documentation pages.

    ```css Default CSS
    .fern-footer-nav {
      display: flex;
      background-color: var(--grayscale-a3);
      border-radius: var(--radius-4);
      padding: 0.25rem;
      margin-left: -0.25rem;
      margin-right: -0.25rem;
    }
    ```

    **Variants:**

    * `.fern-footer-nav--simple` - Simplified navigation style without background
  </Accordion>

  <Accordion title=".fern-footer-prev">
    Previous page link in footer navigation.

    ```css Default CSS
    .fern-footer-prev {
      display: flex;
      height: 4rem;
      flex-shrink: 0;
      align-items: center;
      gap: 0.25rem;
      padding: 0.75rem;
      padding-right: 1.5rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-footer-next">
    Next page link in footer navigation with card-style appearance.

    ```css Default CSS
    .fern-footer-next {
      display: flex;
      position: relative;
      height: 4rem;
      min-width: 0;
      flex: 1 1 0%;
      flex-shrink: 1;
      align-items: center;
      justify-content: flex-end;
      gap: 1rem;
      overflow: clip;
      border: 1px solid var(--card-border);
      padding: 0.75rem;
      background-color: var(--card-solid);
      transition: all 0.15s;
    }

    .fern-footer-next:hover {
      border-color: var(--accent-a9);
    }
    ```
  </Accordion>
</AccordionGroup>

## Changelog components

Selectors for styling [changelog pages](/learn/docs/configuration/changelogs), including the main container, individual entries, and date displays.

<AccordionGroup>
  <Accordion title=".fern-changelog">
    Main container for changelog pages with responsive layout.

    ```css Default CSS
    .fern-changelog {
      display: flex;
      justify-content: space-between;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    @media (min-width: 768px) {
      .fern-changelog {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }

    @media (min-width: 1024px) {
      .fern-changelog {
        padding-left: 2rem;
        padding-right: 2rem;
      }
    }

    .fern-changelog > main {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      max-width: 1024px;
      word-wrap: break-word;
    }
    ```

    **Variants:**

    * `.full-width` - Full-width layout with sidebar date display
  </Accordion>

  <Accordion title=".fern-changelog-entry">
    Individual changelog entry container.

    ```css Default CSS
    .fern-changelog-entry {
      display: flex;
      align-items: stretch;
    }

    .fern-changelog-entry:is(article) {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }

    @media (min-width: 1024px) {
      .fern-changelog-entry:is(article) {
        padding-top: 4rem;
        padding-bottom: 4rem;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-changelog-date">
    Date display for changelog entries, positioned in sidebar on larger screens.

    ```css Default CSS
    .fern-changelog-date {
      color: var(--grayscale-a11);
      font-size: 1rem;
      margin-bottom: 2rem;
    }

    @media (min-width: 1024px) {
      .fern-changelog.full-width .fern-changelog-entry > aside .fern-changelog-date {
        position: sticky;
        top: calc(var(--header-height) + 1rem);
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-changelog-content">
    Content area within changelog entries.

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

  <Accordion title=".fern-changelog-label">
    Label container for changelog entry metadata and filter badges.

    ```css 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;
      }
    }
    ```
  </Accordion>
</AccordionGroup>

## 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.

<AccordionGroup>
  <Accordion title="Key CSS variables">
    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
  </Accordion>

  <Accordion title="Dynamic backgrounds">
    Use CSS variables to create backgrounds that automatically adapt to the theme. Override with `.dark` selector only when you need theme-specific styling.

    ```css
    /* Auto-adapts using Fern variables */
    .fern-background-image {
      background-color: var(--background);
      background-image: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--accent-9), var(--background) 85%) 0%,
        var(--background) 100%
      );
    }

    /* Explicit dark mode override for different gradient direction */
    .dark .fern-background-image {
      background-image: linear-gradient(
        to bottom,
        var(--background) 0%,
        color-mix(in srgb, var(--accent-9), var(--background) 85%) 100%
      );
    }
    ```
  </Accordion>

  <Accordion title="Dynamic cards">
    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.

    ```css
    /* Plant catalog card that adapts to theme */
    .fern-card.plant-card {
      background-color: var(--card-background);
      border-color: var(--border);
      color: var(--grayscale-12);
      box-shadow: 0 1px 2px var(--grayscale-a3);
    }

    .fern-card.plant-card.interactive:hover {
      box-shadow: 0 4px 12px var(--accent-a6);
    }

    /* Dark mode shadow adjustment */
    .dark .fern-card.plant-card {
      box-shadow: 0 2px 6px var(--grayscale-a4);
    }
    ```
  </Accordion>

  <Accordion title="Dynamic text">
    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.

    ```css
    /* Plant species content */
    .plant-content {
      color: var(--grayscale-12);
    }

    .plant-content .description {
      color: var(--grayscale-a11);
    }

    .plant-content a {
      color: var(--accent-11);
      text-decoration-color: color-mix(in srgb, var(--accent-11), transparent 50%);
    }

    .plant-content a:hover {
      color: var(--accent-12);
    }
    ```
  </Accordion>

  <Accordion title="Dynamic images">
    There are multiple approaches for adapting images to light and dark modes.

    **SVG icons with currentColor (recommended):**

    ```html HTML
    <svg class="plant-icon" width="24" height="24" fill="currentColor">
      <!-- SVG paths -->
    </svg>
    ```

    ```css CSS
    .plant-icon {
      color: var(--grayscale-11);
    }

    .plant-icon.accent {
      color: var(--accent-11);
    }
    ```

    **Swapping background images:**

    ```css CSS
    .hero-plant {
      background-image: url('/assets/plants/hero-light.png');
      background-size: cover;
      background-position: center;
    }

    .dark .hero-plant {
      background-image: url('/assets/plants/hero-dark.png');
    }
    ```

    **Using picture element with prefers-color-scheme:**

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

    <Warning>
      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.
    </Warning>

    **Using CSS filters (last resort):**

    ```css CSS
    .logo-monochrome {
      filter: grayscale(1);
    }

    .dark .logo-monochrome {
      filter: invert(1) grayscale(1);
    }
    ```

    <Warning>
      Avoid hardcoding hex colors in your custom CSS. Always use Fern's CSS variables to maintain proper contrast and theme consistency.
    </Warning>
  </Accordion>
</AccordionGroup>