Mastering Docusaurus Tabs - Interactive Content Examples

Learn how to use Docusaurus tabs for better content organization with practical examples.

Basic Tabs

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

<Tabs>
<TabItem value="apple" label="Apple" default>
This is an apple 🍎
</TabItem>
<TabItem value="orange" label="Orange">
This is an orange 🍊
</TabItem>
</Tabs>

Code Examples

JavaScript

function greet(name) {
  return `Hello, ${name}!`;
}

Python

def greet(name):
    return f"Hello, {name}!"

Java

public String greet(String name) {
    return "Hello, " + name + "!";
}

Installation Instructions

npm

npm install @docusaurus/core

Yarn

yarn add @docusaurus/core

pnpm

pnpm add @docusaurus/core

Platform-Specific Commands

Windows

set NODE_ENV=production
npm start

macOS

export NODE_ENV=production
npm start

Linux

export NODE_ENV=production
npm start

Synchronized Tabs

Choose your OS here and it syncs across the page:

Windows

Windows Setup:

• Download installer
• Run as administrator

macOS

macOS Setup:

• Download DMG file
• Drag to Applications

Linux

Linux Setup:

• Use package manager
• Install dependencies

Custom Styling

🟢 Beginner

Start with basic concepts and simple examples.

🟡 Intermediate

Build upon fundamentals with real-world applications.

🔴 Advanced

Master complex patterns and optimization techniques.

Step-by-Step Solution

Problem: Remove all nodes with value val from a linked list.

Code Implementation

Step 1: Overview

public class Solution {
    public ListNode removeElements(ListNode head, int val) {
        // TODO: Remove elements from the beginning

        // TODO: Handle empty list

        // TODO: Remove elements from middle and end

        // TODO: Return updated head
    }
}

Step 2: Handle Beginning

public class Solution {
    public ListNode removeElements(ListNode head, int val) {
        // Remove elements from the beginning
        while (head != null && head.val == val) {
            head = head.next;
        }

        // Handle empty list
        if (head == null) {
            return null;
        }

        // TODO: Remove elements from middle and end

        // TODO: Return updated head
    }
}

Step 3: Main Loop

public class Solution {
    public ListNode removeElements(ListNode head, int val) {
        // Remove elements from the beginning
        while (head != null && head.val == val) {
            head = head.next;
        }

        // Handle empty list
        if (head == null) {
            return null;
        }

        ListNode current = head;

        // Remove elements from middle and end
        while (current.next != null) {
            if (current.next.val == val) {
                current.next = current.next.next;
            } else {
                current = current.next;
            }
        }

        // TODO: Return updated head
    }
}

Step 4: Complete Solution

public class Solution {
    public ListNode removeElements(ListNode head, int val) {
        // Remove elements from the beginning
        while (head != null && head.val == val) {
            head = head.next;
        }

        // Handle empty list
        if (head == null) {
            return null;
        }

        ListNode current = head;

        // Remove elements from middle and end
        while (current.next != null) {
            if (current.next.val == val) {
                current.next = current.next.next;
            } else {
                current = current.next;
            }
        }

        return head;
    }
}

Notes & Explanation

Step 1: Overview

Planning Phase:

• Identify the main challenges of removing linked list elements
• Need to handle head removal separately (no previous node)
• Need to track current position for middle/end removals
• Edge case: empty list after all removals

Key Insights:

• Removing head nodes requires updating the head pointer
• Removing middle nodes requires adjusting previous node's next pointer
• Always check for null before accessing node properties

Step 2: Handle Beginning

Implementation Notes:

• Use while loop to remove consecutive head nodes with target value
• head = head.next effectively removes the current head
• Early return null if entire list is removed
• This approach avoids dummy node complexity

Why This Works:

• Handles cases like [7,7,7,7] where all nodes need removal
• Ensures valid head before proceeding to middle/end logic
• Simple pointer reassignment for removal

Step 3: Main Loop

Logic Explanation:

• current points to a safe node (guaranteed not to be removed)
• Check current.next.val to decide removal
• current.next = current.next.next skips the target node
• Only advance current when no removal happens

Critical Detail:

• Never advance current after removal - next node might also need removal
• Always check current.next != null to avoid null pointer errors
• This handles consecutive target values in middle of list

Step 4: Complete Solution

Final Optimizations:

• Time Complexity: O(n) - single pass through list
• Space Complexity: O(1) - only using pointer variables
• Handles all edge cases: empty list, all removals, no removals

Testing Strategy:

• Test with target at beginning: [1,2,3], val=1
• Test with target at end: [1,2,3], val=3
• Test with consecutive targets: [1,2,2,3], val=2
• Test with all targets: [2,2,2], val=2

Quick Reference

Feature	Usage
Basic tabs	<Tabs><TabItem>
Default tab	default attribute
Sync tabs	groupId attribute
Custom labels	label prop
Values	value prop

Key Points:

• Import components at the top
• Use default for initial tab
• groupId syncs tabs across page
• Each TabItem needs unique value