Accordion Alert Dialog Aspect Ratio Avatar Badge Button Card Checkbox Collapsible Command Context Menu Dialog Dropdown Menu Glass Hover Card Input Label Popover Progress Radio Group Resizable Layout Scroll Area Select Band Screen Slider Spinner Switch Tabs Textarea Toaster Toggle Group Tooltip Form Prose Link Video Carousel Sheet Skeleton Media Stack Nav Items Breadcrumb Step Indicator Input Otp Navigation Menu Drawer 3d Card Advanced Chart Android 3d Pin Alert 3d Marquee Announcement Animated Tooltip Animated Beam Animated Testimonials Animated Cursor Apple Cards Carousel Apple Hello Effect Banner Choicebox Calendar Code Editor Code Block Company Profile Credit Card Comparison Code Tabs Combobox Color Picker Crypto Screener Cursor Crypto Market Desktop Data Table Date Picker Dialog Stack Desktop Window Dropzone Editor Dock Desktop Spotlight Empty Forex Screener Forex Market Gantt Financials

Code Tabs

import { CodeTabs } from '@hanzo/ui'

Default

One tab per language, switching the code shown beneath the strip.

JavaScript

TypeScript

Python

javascript

1function greet(name) {

2 return `Hello, ${name}!`

5console.log(greet("World"))

export function Default() {
  return (
    <YStack width="100%" maxW={640}>
      <CodeTabs tabs={greet} />
    </YStack>
  )
}

Starting tab

`defaultTab` opens on Python rather than the first entry.

JavaScript

TypeScript

Python

python

1def greet(name):

2 return f"Hello, {name}!"

4print(greet("World"))

export function StartingTab() {
  return (
    <YStack width="100%" maxW={640}>
      <CodeTabs tabs={greet} defaultTab={2} />
    </YStack>
  )
}

Themed

A fixed syntax palette and a shorter body before it scrolls.

JavaScript

TypeScript

Python

javascript

1function greet(name) {

2 return `Hello, ${name}!`

5console.log(greet("World"))

export function Themed() {
  return (
    <YStack width="100%" maxW={640}>
      <CodeTabs tabs={greet} theme="dracula" maxHeight={160} />
    </YStack>
  )
}

Empty

The message shown when a `CodeTabs` is given no tabs at all.

No code tabs available. Add tabs to display code snippets.

export function Empty() {
  return (
    <YStack width="100%" maxW={640}>
      <CodeTabs tabs={[]} />
    </YStack>
  )
}

Types

export interface CodeTabsTab {
  label: string
  code: string
  language?: string
  filename?: string
}

export interface CodeTabsProps extends Omit<ComponentProps<typeof Tabs>, 'children' | 'defaultValue' | 'theme' | 'size'> {
  tabs: CodeTabsTab[]
  /** Index of the tab shown first, for an uncontrolled `CodeTabs`. */
  defaultTab?: number
  showLineNumbers?: boolean
  showCopyButton?: boolean
  theme?: CodeBlockTheme | null
  size?: CodeBlockSize | null
  /** The body's ceiling, in px or any CSS length; past it a tab's body scrolls. */
  maxHeight?: number | string
}

Exports

CodeTabstype CodeTabsPropstype CodeTabsTab