bxp-code

Drop-in React code blocks with Shiki highlighting, Prettier formatting, and zero config.

Documentation · Getting Started · API Reference · BxpCodeTabs

Features

• Shiki syntax highlighting — TextMate-grammar-based highlighting for 100+ languages
• Prettier formatting on render — Automatically formats code before display
• Dark & light themes — Built-in themes with easy customization
• Copy to clipboard — One-click copy with visual feedback
• Line numbers — Optional gutter (showLineNumbers)
• Sticky headers — Pin the header/tab bar while scrolling long blocks (stickyHeader)
• Multiple input methods — Render from code, File, or remote url
• Tabbed code blocks — BxpCodeTabs for multi-snippet containers
• TypeScript-first — Full types exported for all public APIs

Install

npm install bxp-code

pnpm add bxp-code

yarn add bxp-code

Quick Start

BxpCode

import { BxpCode } from "bxp-code";

function App() {
  return (
    <BxpCode
      code={`console.log('Hello, World!');`}
      lang="javascript"
      fileName="hello.js"
      theme="dark"
      showLineNumbers
    />
  );
}

BxpCodeTabs

import { BxpCodeTabs } from "bxp-code";

function App() {
  return (
    <BxpCodeTabs
      tabs={[
        { lang: "bash", label: "npm", code: "npm install bxp-code" },
        { lang: "bash", label: "pnpm", code: "pnpm add bxp-code" },
        { lang: "bash", label: "yarn", code: "yarn add bxp-code" },
      ]}
      theme="dark"
    />
  );
}

Components

Full API documentation lives in docs/api/index.md and on the website: https://saqibbedar.github.io/bxp-code/bxp-code

BxpCode

Render a single highlighted + formatted code block.

Input (provide one):

• code?: string
• file?: File
• url?: string
  Priority: code > file > url

Common props:

• lang?: string (auto-detect)
• fileName?: string (auto-detect)
• theme?: "dark" | "light" (default "dark")
• showHeader?: boolean (default true)
• showCopyButton?: boolean (default true)
• showLineNumbers?: boolean (default true)
• stickyHeader?: boolean (default false)
• stickyTop?: number (default 0)
• headerColor?: string
• backgroundColor?: string
• className?: string
• style?: CSSProperties
• onError?: (error: Error) => void

BxpCodeTabs

Render multiple code blocks inside a tabbed container.

Tabs (BxpCodeTab) Each tab supports: lang (required), label?, and one of code? / file? / url? (+ optional fileName?).

Common props:

• tabs: BxpCodeTab[] (required)
• theme?: "dark" | "light" (default "dark")
• showLineNumbers?: boolean (default true)
• showCopyButton?: boolean (default true)
• showHeader?: boolean (default true)
• stickyHeader?: boolean (default false)
• stickyTop?: number (default 0)
• defaultTab?: number (default 0)
• headerColor?: string
• backgroundColor?: string
• borderColor?: string
• tabActiveColor?: string
• tabActiveTextColor?: string
• tabTextColor?: string
• tabIndicatorColor?: string (default #e06b74)
• copyButtonColor?: string
• lineNumberColor?: string
• className?: string
• style?: CSSProperties
• onError?: (error: Error) => void

Contributing

Contributions are welcome!

• Please read: CONTRIBUTING.md of Conduct
• Please follow: CODE_OF_CONDUCT.md

License

MIT — Made by Saqib Bedar