Navigation

Tabs

Switch between views of the same content, with a red underline on the active tab.

import { TabsList, TabsTrigger, TabsContent } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Formats

resume.json

{
  "basics": { "name": "Ada Lovelace" }
}

Show code

tabs/formats.tsx

import {
  CodeBlock,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@jsonresume/ui';

export default function TabsFormats() {
  return (
    <Tabs defaultValue="json">
      <TabsList aria-label="Resume format">
        <TabsTrigger value="json">JSON</TabsTrigger>
        <TabsTrigger value="yaml">YAML</TabsTrigger>
      </TabsList>
      <TabsContent value="json">
        <CodeBlock
          label="resume.json"
          code={'{\n  "basics": { "name": "Ada Lovelace" }\n}'}
        />
      </TabsContent>
      <TabsContent value="yaml">
        <CodeBlock label="resume.yaml" code={'basics:\n  name: Ada Lovelace'} />
      </TabsContent>
    </Tabs>
  );
}

Accessibility

Arrow keys move between tabs; the list needs an aria-label.

Props

No props of its own; accepts the attributes of the element it renders.

No props of its own; accepts the attributes of the element it renders.

No props of its own; accepts the attributes of the element it renders.