CodeBlock

Syntax-highlighted codeblock component built on top of react-syntax-highlighter.

scrollx-uisrchome.tsx

22L • 60W

src/home.tsx

import React, { useState } from 'react';
import { NextPage } from 'next';
import Header from '../components/Header';

const Home: NextPage = () => {
  const [theme, setTheme] = useState('dark');

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header />
      <main className="container mx-auto px-4 py-12">
        <section className="text-center">
          <h1 className="text-5xl font-bold text-gray-800 dark:text-white">
            ScrollX UI 
          </h1>
        </section>
      </main>
    </div>
  );
};

export default Home;

TSX22 lines572 chars

UTF-8

Installation

npx scrollx-ui@latest add codeblock

Usage

import { CodeBlock } from "@/components/ui/codeblock";

<CodeBlock
  language="typescript"
  filename="main.tsx"
  tabs={[
    { name: 'api.ts', code: "fetchData()" },
    { name: 'styles.css', code: ".card { padding: 1rem }", language: 'css' }
  ]}
  breadcrumb={['src', 'components']}
/>

Examples

CodeBlock with Light theme

scriptsdeploy.sh

13L • 36W

deploy.sh

#!/bin/bash
echo "Starting deployment..."
npm run build
npm run test

if [ $? -eq 0 ]; then
  echo "Tests passed, deploying..."
  npm run deploy
  echo "Deployment complete!"
else
  echo "Tests failed, aborting deployment"
  exit 1
fi

BASH13 lines234 chars

UTF-8

CodeBlock with Multitabs

scrollx-ui

22L • 60W

import React, { useState } from 'react';
import { NextPage } from 'next';
import Header from '../components/Header';

const Home: NextPage = () => {
  const [theme, setTheme] = useState('dark');

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header />
      <main className="container mx-auto px-4 py-12">
        <section className="text-center">
          <h1 className="text-5xl font-bold text-gray-800 dark:text-white">
            ScrollX UI
          </h1>
        </section>
      </main>
    </div>
  );
};

export default Home;

TSX22 lines571 chars

UTF-8

API Reference

CodeBlock

Syntax-highlighted code block with tabs, stats, and file navigation.

Props

language string (required)
filename string (required)
code string (required without tabs)
tabs Array<{name: string; code: string; language?: string}> (required without code)
highlightLines number[] (default [])
breadcrumb string[] (default [])
showStats boolean (default true)
theme 'dark' | 'light' (default 'dark')