@hanzo/ui
GitHubnpm
AccordionAlert DialogAspect RatioAvatarBadgeButtonCardCheckboxCollapsibleCommandContext MenuDialogDropdown MenuGlassHover CardInputLabelPopoverProgressRadio GroupResizableLayoutScroll AreaSelectBandScreenSliderSpinnerSwitchTabsTextareaToasterToggle GroupTooltipFormProseLinkVideoCarouselSheetSkeletonMedia StackNav ItemsBreadcrumbStep IndicatorInput OtpNavigation MenuDrawer3d CardAdvanced ChartAndroid3d PinAlert3d MarqueeAnnouncementAnimated TooltipAnimated BeamAnimated TestimonialsAnimated CursorApple Cards CarouselApple Hello EffectBannerChoiceboxCalendarCode EditorCode BlockCompany ProfileCredit CardComparisonCode TabsComboboxColor PickerCrypto ScreenerCursorCrypto MarketDesktopData TableDate PickerDialog StackDesktop WindowDropzoneEditorDockDesktop SpotlightEmptyForex ScreenerForex MarketGanttFinancials

Code Block

import { CodeBlock } from '@hanzo/ui'

Default

A filename, a language badge, line numbers, and a copy button that confirms itself for two seconds.

fibonacci.js
javascript
1function fibonacci(n) {
2 if (n <= 1) {
3 return n
4 }
5 return fibonacci(n - 1) + fibonacci(n - 2)
6}
7
8const result = fibonacci(10)
9console.log(result) // 55
export function Default() {

  return (

    <CodeBlock
      code={FIBONACCI}
      language="javascript"
      filename="fibonacci.js"
      highlightLines={[5]}
    />

  )

}

Diff

Added and removed lines each carry their own sign and left-edge color, independent of the highlighted range.

calculator.js
javascript
1function calculateTotal(items) {
2 let total = 0
3- for (const item of items) {
4 total += item.price
5+ }
6+ if (total > 100) {
7 total *= 0.9 // 10% discount
8 }
9 return total
10}
export function Diff() {

  return (

    <CodeBlock
      code={CALCULATOR}
      language="javascript"
      filename="calculator.js"
      theme="github-dark"
      diff={{ added: [5, 6], removed: [3] }}
    />

  )

}

Themes

Eight named syntax palettes, each a fixed color quartet independent of the surrounding page's own theme.

javascript
const greeting = "Hello, World!"
console.log(greeting)
javascript
const greeting = "Hello, World!"
console.log(greeting)
javascript
const greeting = "Hello, World!"
console.log(greeting)
export function Themes() {

  const sample = `const greeting = "Hello, World!"\nconsole.log(greeting)`

  return (

    <YStack gap="$4">

      <CodeBlock code={sample} language="javascript" theme="light" showLineNumbers={false} />

      <CodeBlock code={sample} language="javascript" theme="dracula" showLineNumbers={false} />

      <CodeBlock code={sample} language="javascript" theme="nord" showLineNumbers={false} />

    </YStack>

  )

}

Bare

No filename, no language and no copy button, so the header is dropped and only the numbered code remains.

1function fibonacci(n) {
2 if (n <= 1) {
3 return n
4 }
5 return fibonacci(n - 1) + fibonacci(n - 2)
6}
7
8const result = fibonacci(10)
9console.log(result) // 55
export function Bare() {

  return (

    <CodeBlock
      code={FIBONACCI}
      language=""
      showCopyButton={false}
      size="sm"
      maxHeight={160}
    />

  )

}

Types

export type CodeBlockTheme =

  | 'dark'

  | 'light'

  | 'github'

  | 'github-dark'

  | 'vs-dark'

  | 'monokai'

  | 'dracula'

  | 'nord'
export type CodeBlockSize = 'sm' | 'default' | 'lg'
export interface CodeBlockDiff {

  added?: number[]

  removed?: number[]

}
export interface CodeBlockProps extends Omit<ComponentProps<'div'>, 'children'> {

  code: string

  language?: string

  filename?: string

  theme?: CodeBlockTheme | null

  size?: CodeBlockSize | null

  showLineNumbers?: boolean

  highlightLines?: number[]

  showCopyButton?: boolean

  /** The body's ceiling, in px or any CSS length; past it the body scrolls. */

  maxHeight?: number | string

  diff?: CodeBlockDiff

}

Exports

CodeBlocktype CodeBlockDifftype CodeBlockPropstype CodeBlockSizetype CodeBlockTheme