Follow along on GitHub

Build Better with VisiUI

Supercharge your development with a powerful library of UI components designed to improve productivity and code quality for React developers.

Customizable

Make Code Better

Make Code Faster

Make Code Easiest

Make Code Modern

import React from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";
interface CodeWindowProps {
  code: string;
  language: string;
  className?: string;
}
const CodeWindow: React.FC<CodeWindowProps> = ({
  code,
  language,
  className = "max-w-3xl mx-auto bg-gray-800 rounded-lg shadow-lg p-4",
}) => {
  return (
    <div className={className}>
      <div className="flex items-center justify-between mb-3">
        <div className="flex space-x-2">
          <span className="w-3 h-3 bg-red-500 rounded-full"></span>
          <span className="w-3 h-3 bg-yellow-500 rounded-full"></span>
          <span className="w-3 h-3 bg-green-500 rounded-full"></span>
        </div>
      </div>
      <div className="max-h-[400px] overflow-y-auto">
      <SyntaxHighlighter
        language={language}
        style={tomorrow}
        className="mt-2 rounded-lg"
      >
        {code}
      </SyntaxHighlighter>
      </div>
    </div>
  );
};
CodeWindow.defaultProps = {
  language: "javascript", 
};
export default CodeWindow;

Imagine your code but 100x Better

Now you can make your imaginations REALITY! With VisiUI you can make your code 100x BETTER if not more