NextGuide

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.