#Usage Guide

Learn how to use rspress-language-tabs to create beautiful tabbed code examples.

#Basic Usage

The most basic usage involves importing the components and wrapping your code blocks.

First, import the components at the top of your MDX file:

import { LanguageTabs, LanguageTab } from "rspress-language-tabs";

Then use them to create tabs:

console.log("Hello, World!");

#Language Prop

The language prop determines which icon to display. It's case-insensitive and supports common aliases.

For example, these are all equivalent:

• language="javascript" or language="js"
• language="typescript" or language="ts"
• language="python" or language="py"

See the full list of Supported Languages.

#Custom Labels

Use the label prop to display custom text while keeping the correct language icon:

const server = Bun.serve({
  port: 3000,
  fetch() {
    return new Response("Hello from Bun!");
  },
});

In this example, both tabs show TypeScript code, but with different runtime labels.

#Tab Syncing

Use the groupId prop to synchronize tab selections across multiple LanguageTabs components.

When you select a language in one group, all other groups with the same groupId will automatically switch to that language too!

// First code block
console.log("JavaScript");

// Second code block - synced!
console.log("Still JavaScript");

Try clicking the tabs above - they stay in sync!

#Fallback Icon

If a language isn't recognized, a generic code icon </> is displayed:

console.log("Known language - has icon");

#Best Practices

#Use Descriptive Code

Include comments and meaningful variable names in your code examples to make them easier to understand.

#Keep Examples Focused

Each tab should demonstrate the same concept in different languages for consistency.

#Provide Context

Add explanatory text before code examples to help users understand what they're looking at.

#Next Steps

• View Supported Languages for the complete list
• Explore the source code on GitHub