KitlenoKitlenov2.0.0

Actions & display / Code Snippet

Code Snippet

Code snippet components are used to display formatted code examples in a readable and copy-friendly way. Ideal for documentation, tutorials, and developer tools.

Code Snippet Blue

A dark-themed code block with macOS-style window chrome. Ideal for developer tools, documentation, and any context where code needs to stand out.

<div>Code block</div>
CodeSnippetBlue.jsx
export default function CodeSnippetBlue() {
  return (
    <div className="p-4 pb-8">
      <div className="bg-gray-800 text-white rounded-2xl w-auto border-2 border-gray-500 my-0">
        <div className="bg-gray-700 py-[8px] px-4 rounded-t-2xl border-b border-gray-600 flex items-center justify-between">
          <div className="flex items-center">
            <div className="flex space-x-2">
              <div className="w-3 h-3 bg-red-500 rounded-full"></div>
              <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
              <div className="w-3 h-3 bg-green-500 rounded-full"></div>
            </div>
          </div>
          <div>
            <div className="py-4"></div>
          </div>
        </div>
        <pre className="bg-gray-800 p-4 rounded-b-2xl overflow-x-auto text-xs leading-6">
          <code className="text-white">
            <span className="text-[#00B0FF]">{"<div>"}</span>
            <span className="text-white">Code block</span>
            <span className="text-[#00B0FF]">{"<div>"}</span>
          </code>
        </pre>
      </div>
    </div>
  )
}

Code Snippet Light

A light-themed code block with macOS-style window chrome. Use it in light interfaces or anywhere a softer, less contrasted code display fits better.

<div>Code block</div>
CodeSnippetLight.jsx
export default function CodeSnippetLight() {
  return (
    <div className="p-4 pb-8">
      <div className="bg-gray-100 text-gray-900 rounded-2xl w-auto border-2 border-gray-300 my-0">
        <div className="bg-gray-200 py-[8px] px-4 rounded-t-2xl border-b border-gray-300 flex items-center justify-between">
          <div className="flex items-center">
            <div className="flex space-x-2">
              <div className="w-3 h-3 bg-red-400 rounded-full"></div>
              <div className="w-3 h-3 bg-yellow-400 rounded-full"></div>
              <div className="w-3 h-3 bg-green-400 rounded-full"></div>
            </div>
          </div>
          <div>
            <div className="py-4"></div>
          </div>
        </div>
        <pre className="bg-gray-100 p-4 rounded-b-2xl overflow-x-auto text-xs leading-6">
          <code className="text-gray-900">
            <span className="text-blue-600">{"<div>"}</span>
            <span className="text-gray-900">Code block</span>
            <span className="text-blue-600">{"</div>"}</span>
          </code>
        </pre>
      </div>
    </div>
  )
}