`react-doctor/shadcn-tabs-trigger-requires-list`

Tabs trigger is outside TabsList

Category: Bugs
Severity: warn
Source: oxlint-plugin-react-doctor
Framework: global
Enabled when: always
Default: Disabled until configured

Validate the diagnostic

Confirm the reported code matches this rule before you edit it.

Confirm the reported code matches react-doctor/shadcn-tabs-trigger-requires-list. Compare it with the Before example and verify the same API, framework, and execution context. Treat it as a false positive only when one of those conditions differs.

Compare the code

The corrected pattern shows a focused way to address the diagnostic.

Reported pattern

import { Tabs, TabsTrigger } from "@/components/ui/tabs";
const View = () => (
  <Tabs>
    <TabsTrigger value="a">A</TabsTrigger>
  </Tabs>
);

Corrected pattern

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
const View = () => (
  <Tabs>
    <TabsList>
      <TabsTrigger value="a">A</TabsTrigger>
    </TabsList>
  </Tabs>
);

How to fix

Use the corrected pattern as a reference. Preserve behavior that the rule does not require you to change.

Copyable fix prompt

Copy this self-contained prompt into your coding agent after you confirm the diagnostic.

Fix every confirmed react-doctor/shadcn-tabs-trigger-requires-list diagnostic in the current repository. Required change: - Render each imported TabsTrigger inside its library TabsList so keyboard navigation and tablist semantics share one scope.

Reference transformation:Before:

import { Tabs, TabsTrigger } from "@/components/ui/tabs";
const View = () => (
  <Tabs>
    <TabsTrigger value="a">A</TabsTrigger>
  </Tabs>
);

After:

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
const View = () => (
  <Tabs>
    <TabsList>
      <TabsTrigger value="a">A</TabsTrigger>
    </TabsList>
  </Tabs>
);

Constraints: - Confirm the reported code matches the Before pattern. - Make the smallest change that fixes the root cause. - Preserve behavior and interfaces unrelated to this diagnostic. - Reuse existing project components, utilities, and conventions. - Do not introduce render-phase side effects, render-phase state updates, or Hooks rule violations. - Adapt identifiers and framework details instead of copying blindly. - Do not disable the rule or suppress matching code. Verification: - Run focused tests for the changed behavior. - Run React Doctor and confirm this diagnostic no longer appears. - Report the files changed and any checks you could not run.

More Bugs rules from the rules reference:

react-doctor/style-prop-object: Pass the `style` prop as an object literal like `{{ color: 'red' }}`, never a string or other primitive.
react-doctor/styled-components-non-transient-custom-prop-on-intrinsic-element: Non-transient custom prop on styled intrinsic element
react-doctor/tanstack-start-missing-head-content: Add `<HeadContent />` inside `<head>` in your __root route — without it, route `head()` meta tags are silently dropped
react-doctor/tanstack-start-missing-scripts: Root route missing Scripts
react-doctor/tanstack-start-no-anchor-element: `import { Link } from '@tanstack/react-router'` — enables type-safe routes, preloading via `preload="intent"`, and client-side navigation

react-doctor/shadcn-tabs-trigger-requires-list