Code Tabs

Tabbed code display with syntax highlighting and copy functionality. Perfect for React applications requiring multi-variant code examples with Next.js integration and TypeScript support.

Shiki

Loading component...

'use client';import * as React from 'react';import { useTheme } from 'next-themes';import { cn } from '@/lib/utils';import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,  TabsContents,  useTabs,  type TabsProps,} from '@/components/ui/kibo-ui/tabs';import { CopyButton } from '@/components/ui/kibo-ui/copy-button';type CodeTabsProps = {  codes: Record<string, string>;  lang?: string;  themes?: {    light: string;    dark: string;  };  copyButton?: boolean;  onCopy?: (content: string) => void;} & Omit<TabsProps, 'children'>;function CodeTabsContent({  codes,  lang = 'bash',  themes = {    light: 'github-light',    dark: 'github-dark',  },  copyButton = true,  onCopy,}: {  codes: Record<string, string>;  lang?: string;  themes?: { light: string; dark: string };  copyButton?: boolean;  onCopy?: (content: string) => void;}) {  const { resolvedTheme } = useTheme();  const { activeValue } = useTabs();  const [highlightedCodes, setHighlightedCodes] = React.useState<Record<    string,    string  >>(codes); // Start with raw codes for instant rendering  React.useEffect(() => {    async function loadHighlightedCode() {      try {        const { codeToHtml } = await import('shiki');        const newHighlightedCodes: Record<string, string> = {};        for (const [command, val] of Object.entries(codes)) {          const highlighted = await codeToHtml(val, {            lang,            themes: {              light: themes.light,              dark: themes.dark,            },            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',          });          newHighlightedCodes[command] = highlighted;        }        setHighlightedCodes(newHighlightedCodes);      } catch (error) {        console.error('Error highlighting codes', error);      }    }    loadHighlightedCode();  }, [resolvedTheme, lang, themes.light, themes.dark, codes]);  return (    <>      <TabsList        data-slot="install-tabs-list"        className="w-full relative justify-between rounded-none h-10 bg-muted border-b border-border/75 dark:border-border/50 text-current py-0 px-4"        activeClassName="rounded-none shadow-none bg-transparent after:content-[''] after:absolute after:inset-x-0 after:h-0.5 after:bottom-0 dark:after:bg-white after:bg-black after:rounded-t-full"      >        <div className="flex gap-x-3 h-full">          {Object.keys(codes).map((code) => (            <TabsTrigger              key={code}              value={code}              className="text-muted-foreground data-[state=active]:text-current px-0"            >              {code}            </TabsTrigger>          ))}        </div>        {copyButton && (          <CopyButton            content={codes[activeValue]}            size="sm"            variant="ghost"            className="-me-2 bg-transparent hover:bg-black/5 dark:hover:bg-white/10"            onCopy={onCopy}          />        )}      </TabsList>      <TabsContents data-slot="install-tabs-contents">        {Object.entries(codes).map(([code, rawCode]) => (          <TabsContent            data-slot="install-tabs-content"            key={code}            className="w-full text-sm flex items-center p-4 overflow-auto"            value={code}          >            <div className="w-full [&>pre]:m-0 [&>pre]:p-0 [&>pre]:bg-transparent [&>pre]:border-none [&>pre]:text-[13px] [&>pre]:leading-relaxed [&_code]:text-[13px] [&_code]:leading-relaxed [&_code]:bg-transparent">              {highlightedCodes[code] !== rawCode ? (                <div dangerouslySetInnerHTML={{ __html: highlightedCodes[code] }} />              ) : (                <pre>                  <code>{rawCode}</code>                </pre>              )}            </div>          </TabsContent>        ))}      </TabsContents>    </>  );}function CodeTabs({  codes,  lang = 'bash',  themes = {    light: 'github-light',    dark: 'github-dark',  },  className,  defaultValue,  value,  onValueChange,  copyButton = true,  onCopy,  ...props}: CodeTabsProps) {  const firstKey = React.useMemo(() => Object.keys(codes)[0] ?? '', [codes]);  // Handle controlled vs uncontrolled properly  const tabsProps = value !== undefined     ? { value, onValueChange }     : { defaultValue: defaultValue ?? firstKey };  return (    <Tabs      data-slot="install-tabs"      className={cn(        'w-full gap-0 bg-muted/50 rounded-xl border overflow-hidden',        className,      )}      {...tabsProps}      {...props}    >      <CodeTabsContent        codes={codes}        lang={lang}        themes={themes}        copyButton={copyButton}        onCopy={onCopy}      />    </Tabs>  );}export { CodeTabs, type CodeTabsProps };

Installation

npx shadcn@latest add https://www.shadcn.io/registry/code-tabs.json

npx shadcn@latest add https://www.shadcn.io/registry/code-tabs.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/code-tabs.json

bunx shadcn@latest add https://www.shadcn.io/registry/code-tabs.json

Features

Multi-tab code display with smooth transitions between different code variants
Syntax highlighting using Shiki for accurate language-specific highlighting
Copy functionality with built-in copy button for each code snippet
TypeScript support with complete type definitions and IntelliSense
Theme-aware highlighting automatically adapts to light/dark themes using next-themes
Customizable languages supporting all Shiki language definitions

Examples

Package Manager Commands

Loading component...

'use client';import * as React from 'react';import { useTheme } from 'next-themes';import { cn } from '@/lib/utils';import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,  TabsContents,  useTabs,  type TabsProps,} from '@/components/ui/kibo-ui/tabs';import { CopyButton } from '@/components/ui/kibo-ui/copy-button';type CodeTabsProps = {  codes: Record<string, string>;  lang?: string;  themes?: {    light: string;    dark: string;  };  copyButton?: boolean;  onCopy?: (content: string) => void;} & Omit<TabsProps, 'children'>;function CodeTabsContent({  codes,  lang = 'bash',  themes = {    light: 'github-light',    dark: 'github-dark',  },  copyButton = true,  onCopy,}: {  codes: Record<string, string>;  lang?: string;  themes?: { light: string; dark: string };  copyButton?: boolean;  onCopy?: (content: string) => void;}) {  const { resolvedTheme } = useTheme();  const { activeValue } = useTabs();  const [highlightedCodes, setHighlightedCodes] = React.useState<Record<    string,    string  >>(codes); // Start with raw codes for instant rendering  React.useEffect(() => {    async function loadHighlightedCode() {      try {        const { codeToHtml } = await import('shiki');        const newHighlightedCodes: Record<string, string> = {};        for (const [command, val] of Object.entries(codes)) {          const highlighted = await codeToHtml(val, {            lang,            themes: {              light: themes.light,              dark: themes.dark,            },            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',          });          newHighlightedCodes[command] = highlighted;        }        setHighlightedCodes(newHighlightedCodes);      } catch (error) {        console.error('Error highlighting codes', error);      }    }    loadHighlightedCode();  }, [resolvedTheme, lang, themes.light, themes.dark, codes]);  return (    <>      <TabsList        data-slot="install-tabs-list"        className="w-full relative justify-between rounded-none h-10 bg-muted border-b border-border/75 dark:border-border/50 text-current py-0 px-4"        activeClassName="rounded-none shadow-none bg-transparent after:content-[''] after:absolute after:inset-x-0 after:h-0.5 after:bottom-0 dark:after:bg-white after:bg-black after:rounded-t-full"      >        <div className="flex gap-x-3 h-full">          {Object.keys(codes).map((code) => (            <TabsTrigger              key={code}              value={code}              className="text-muted-foreground data-[state=active]:text-current px-0"            >              {code}            </TabsTrigger>          ))}        </div>        {copyButton && (          <CopyButton            content={codes[activeValue]}            size="sm"            variant="ghost"            className="-me-2 bg-transparent hover:bg-black/5 dark:hover:bg-white/10"            onCopy={onCopy}          />        )}      </TabsList>      <TabsContents data-slot="install-tabs-contents">        {Object.entries(codes).map(([code, rawCode]) => (          <TabsContent            data-slot="install-tabs-content"            key={code}            className="w-full text-sm flex items-center p-4 overflow-auto"            value={code}          >            <div className="w-full [&>pre]:m-0 [&>pre]:p-0 [&>pre]:bg-transparent [&>pre]:border-none [&>pre]:text-[13px] [&>pre]:leading-relaxed [&_code]:text-[13px] [&_code]:leading-relaxed [&_code]:bg-transparent">              {highlightedCodes[code] !== rawCode ? (                <div dangerouslySetInnerHTML={{ __html: highlightedCodes[code] }} />              ) : (                <pre>                  <code>{rawCode}</code>                </pre>              )}            </div>          </TabsContent>        ))}      </TabsContents>    </>  );}function CodeTabs({  codes,  lang = 'bash',  themes = {    light: 'github-light',    dark: 'github-dark',  },  className,  defaultValue,  value,  onValueChange,  copyButton = true,  onCopy,  ...props}: CodeTabsProps) {  const firstKey = React.useMemo(() => Object.keys(codes)[0] ?? '', [codes]);  // Handle controlled vs uncontrolled properly  const tabsProps = value !== undefined     ? { value, onValueChange }     : { defaultValue: defaultValue ?? firstKey };  return (    <Tabs      data-slot="install-tabs"      className={cn(        'w-full gap-0 bg-muted/50 rounded-xl border overflow-hidden',        className,      )}      {...tabsProps}      {...props}    >      <CodeTabsContent        codes={codes}        lang={lang}        themes={themes}        copyButton={copyButton}        onCopy={onCopy}      />    </Tabs>  );}export { CodeTabs, type CodeTabsProps };

Display installation commands for different package managers with automatic syntax highlighting.

Without Copy Button

Loading component...

'use client';import * as React from 'react';import { useTheme } from 'next-themes';import { cn } from '@/lib/utils';import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,  TabsContents,  useTabs,  type TabsProps,} from '@/components/ui/kibo-ui/tabs';import { CopyButton } from '@/components/ui/kibo-ui/copy-button';type CodeTabsProps = {  codes: Record<string, string>;  lang?: string;  themes?: {    light: string;    dark: string;  };  copyButton?: boolean;  onCopy?: (content: string) => void;} & Omit<TabsProps, 'children'>;function CodeTabsContent({  codes,  lang = 'bash',  themes = {    light: 'github-light',    dark: 'github-dark',  },  copyButton = true,  onCopy,}: {  codes: Record<string, string>;  lang?: string;  themes?: { light: string; dark: string };  copyButton?: boolean;  onCopy?: (content: string) => void;}) {  const { resolvedTheme } = useTheme();  const { activeValue } = useTabs();  const [highlightedCodes, setHighlightedCodes] = React.useState<Record<    string,    string  >>(codes); // Start with raw codes for instant rendering  React.useEffect(() => {    async function loadHighlightedCode() {      try {        const { codeToHtml } = await import('shiki');        const newHighlightedCodes: Record<string, string> = {};        for (const [command, val] of Object.entries(codes)) {          const highlighted = await codeToHtml(val, {            lang,            themes: {              light: themes.light,              dark: themes.dark,            },            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',          });          newHighlightedCodes[command] = highlighted;        }        setHighlightedCodes(newHighlightedCodes);      } catch (error) {        console.error('Error highlighting codes', error);      }    }    loadHighlightedCode();  }, [resolvedTheme, lang, themes.light, themes.dark, codes]);  return (    <>      <TabsList        data-slot="install-tabs-list"        className="w-full relative justify-between rounded-none h-10 bg-muted border-b border-border/75 dark:border-border/50 text-current py-0 px-4"        activeClassName="rounded-none shadow-none bg-transparent after:content-[''] after:absolute after:inset-x-0 after:h-0.5 after:bottom-0 dark:after:bg-white after:bg-black after:rounded-t-full"      >        <div className="flex gap-x-3 h-full">          {Object.keys(codes).map((code) => (            <TabsTrigger              key={code}              value={code}              className="text-muted-foreground data-[state=active]:text-current px-0"            >              {code}            </TabsTrigger>          ))}        </div>        {copyButton && (          <CopyButton            content={codes[activeValue]}            size="sm"            variant="ghost"            className="-me-2 bg-transparent hover:bg-black/5 dark:hover:bg-white/10"            onCopy={onCopy}          />        )}      </TabsList>      <TabsContents data-slot="install-tabs-contents">        {Object.entries(codes).map(([code, rawCode]) => (          <TabsContent            data-slot="install-tabs-content"            key={code}            className="w-full text-sm flex items-center p-4 overflow-auto"            value={code}          >            <div className="w-full [&>pre]:m-0 [&>pre]:p-0 [&>pre]:bg-transparent [&>pre]:border-none [&>pre]:text-[13px] [&>pre]:leading-relaxed [&_code]:text-[13px] [&_code]:leading-relaxed [&_code]:bg-transparent">              {highlightedCodes[code] !== rawCode ? (                <div dangerouslySetInnerHTML={{ __html: highlightedCodes[code] }} />              ) : (                <pre>                  <code>{rawCode}</code>                </pre>              )}            </div>          </TabsContent>        ))}      </TabsContents>    </>  );}function CodeTabs({  codes,  lang = 'bash',  themes = {    light: 'github-light',    dark: 'github-dark',  },  className,  defaultValue,  value,  onValueChange,  copyButton = true,  onCopy,  ...props}: CodeTabsProps) {  const firstKey = React.useMemo(() => Object.keys(codes)[0] ?? '', [codes]);  // Handle controlled vs uncontrolled properly  const tabsProps = value !== undefined     ? { value, onValueChange }     : { defaultValue: defaultValue ?? firstKey };  return (    <Tabs      data-slot="install-tabs"      className={cn(        'w-full gap-0 bg-muted/50 rounded-xl border overflow-hidden',        className,      )}      {...tabsProps}      {...props}    >      <CodeTabsContent        codes={codes}        lang={lang}        themes={themes}        copyButton={copyButton}        onCopy={onCopy}      />    </Tabs>  );}export { CodeTabs, type CodeTabsProps };

Show code comparisons across frameworks without the copy functionality.

Use Cases

This free open source React component works well for:

Documentation sites - Display code examples for multiple platforms or languages built with Next.js
API documentation - Show request examples in different programming languages using TypeScript and Tailwind CSS
Tutorial content - Present alternative implementations or framework-specific code
Configuration examples - Display setup instructions for various environments with shadcn/ui integration

API Reference

CodeTabs

Prop	Type	Default	Description
`codes`	`Record<string, string>`	required	Object with tab names as keys and code content as values
`lang`	`string`	`"bash"`	Language for syntax highlighting
`themes`	`{ light: string; dark: string }`	`{ light: 'github-light', dark: 'github-dark' }`	Shiki themes for light and dark modes
`copyButton`	`boolean`	`true`	Whether to show the copy button
`onCopy`	`(content: string) => void`	-	Callback when code is copied
`defaultValue`	`string`	First key in codes	Initially selected tab
`value`	`string`	-	Controlled selected tab value
`onValueChange`	`(value: string) => void`	-	Callback when tab selection changes

Supported Languages

The component supports all languages available in Shiki, including:

javascript, typescript, jsx, tsx - JavaScript ecosystem
python, ruby, go, rust - Popular languages
bash, shell, powershell - Shell scripting
json, yaml, toml - Configuration formats
html, css, scss - Web technologies
And many more...

Implementation Notes

Requires next-themes for theme detection
Code highlighting is performed asynchronously on mount
The component gracefully falls back to plain text if highlighting fails
Tab selection can be controlled or uncontrolled
Copy button uses the shadcn/ui CopyButton component

Reactcode-tabs

Reactcode-tabs

Reactcode-tabs

On this page