Tabs & accordion
Accessible interactive sections backed by Radix primitives.
Tabs & accordion
Tabs
Preview
Write your MDX documentation.
import { Tabs as UiTabs, TabsList, TabsTrigger, TabsContent, Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "nextguide/ui"
<UiTabs defaultValue="docs">
<TabsList><TabsTrigger value="docs">Documentation</TabsTrigger><TabsTrigger value="api">API</TabsTrigger></TabsList>
<TabsContent value="docs"><p>Write your MDX documentation.</p></TabsContent>
<TabsContent value="api"><p>Document routes from OpenAPI.</p></TabsContent>
</UiTabs>
Accordion
Preview
Run bun add nextguide@alpha.
import { Tabs as UiTabs, TabsList, TabsTrigger, TabsContent, Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "nextguide/ui"
<Accordion type="single" collapsible defaultValue="install">
<AccordionItem value="install"><AccordionTrigger>How do I install NextGuide?</AccordionTrigger><AccordionContent>Run bun add nextguide@alpha.</AccordionContent></AccordionItem>
<AccordionItem value="router"><AccordionTrigger>Can I use Pages Router?</AccordionTrigger><AccordionContent>Yes. The initializer detects both Next.js routers.</AccordionContent></AccordionItem>
</Accordion>
In a normal Next.js project, import Tabs and use <Tabs>; this documentation site uses the UiTabs alias to avoid conflict with its legacy MDX tab renderer.