Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/aurelienbobenrieth/gadget/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The RuleExampleTabs component provides a tabbed interface for showing valid and invalid code examples for ESLint rules. Features syntax highlighting, error messages, and optional descriptions for each example.
This is a client component ("use client") and uses React state for tab management.

​
Import

import { RuleExampleTabs, type CodeExample } from "@aurelienbbn/gadget-ui/components";

​
Basic Usage

<RuleExampleTabs
  valid={[
    { code: "const x = 1;\nconsole.log(x);" }
  ]}
  invalid={[
    { 
      code: "const x = 1;", 
      errors: ["Variable 'x' is assigned but never used"]
    }
  ]}
  language="typescript"
/>

​
Props

​
valid
CodeExample[]
required
Array of valid code examples.
​
invalid
CodeExample[]
required
Array of invalid code examples.
​
language
string
default:"typescript"
The programming language for syntax highlighting.
​
className
string
Additional CSS classes to apply.
The RuleExampleTabs component extends HTMLAttributes<HTMLDivElement>, so all standard div attributes are supported.

​
CodeExample Type

Each example in the valid or invalid arrays has the following structure:
​
code
string
required
The code to display.
​
description
string
Optional description of the example, displayed above the code.
​
errors
string[]
Array of error messages to display below the code (typically used for invalid examples).

​
Tab Indicators

The component displays two tabs with distinct visual indicators:
  • Valid tab: Green checkmark icon (✓) with green accent when active
  • Invalid tab: Red cross icon (✗) with red accent when active
Each active tab shows a colored indicator bar at the bottom.

​
Examples

​
Rule with Multiple Examples

<RuleExampleTabs
  valid={[
    {
      code: "const name = 'Alice';\nconsole.log(name);",
      description: "Variable is used"
    },
    {
      code: "function greet() {\n  return 'Hello';\n}\ngreet();",
      description: "Function is called"
    }
  ]}
  invalid={[
    {
      code: "const unused = 'value';",
      description: "Variable is never used",
      errors: ["Variable 'unused' is assigned but never used"]
    },
    {
      code: "function unusedFunc() {\n  return true;\n}",
      description: "Function is defined but never called",
      errors: ["Function 'unusedFunc' is defined but never used"]
    }
  ]}
  language="typescript"
/>

​
JavaScript Examples

<RuleExampleTabs
  valid={[
    { code: "const arr = [1, 2, 3];\narr.forEach(n => console.log(n));" }
  ]}
  invalid={[
    { 
      code: "const arr = [1, 2, 3];",
      errors: ["Variable 'arr' is assigned but never used"]
    }
  ]}
  language="javascript"
/>

​
With Custom Styling

<RuleExampleTabs
  valid={[{ code: "// Valid code" }]}
  invalid={[{ code: "// Invalid code" }]}
  className="my-4"
/>

​
Design Details

  • Tab buttons use 12px (xs) font with medium weight
  • Active tab has colored text and bottom indicator
  • Inactive tabs have muted text with hover effect
  • Error messages displayed in destructive color with monospace font
  • Examples separated by subtle dividers
  • Code blocks use the CodeBlock component with syntax highlighting
  • Tab list has raised surface background

​
Accessibility

  • Uses proper ARIA attributes (role="tab", role="tablist", role="tabpanel", aria-selected)
  • Focus visible outline on tab buttons
  • Keyboard navigation support (inherited from button element)

​
Error Display

Invalid examples can include error messages that appear below the code block: 
{
  code: "const x = 1;",
  errors: [
    "Variable 'x' is assigned but never used",
    "Expected 'const' to be used for immutable values"
  ]
}
Errors are displayed in a destructive-colored strip with an arrow indicator (↳) before each message.

​
Component Definition

Location: packages/gadget-ui/src/components/rule-example-tabs.tsx:78 The component uses CodeBlock internally for syntax highlighting and manages tab state with useState.

Build docs developers (and LLMs) love

Get started for freeTalk to us