Codeblock

Documentation and examples for the Codeblock component.

Preview

code

This is a piece of copyable code. Anything can be written here.
Click on the copy button on the top right corner of the box

Properties

Prop	Type	Default	Description
language	string	"code"	Displays the language name on the top bar.
className	string	default look	Visual overrides for the container.
windowed	boolean	true	Displays the window-style dots on the top left.

Usage

Follow these steps to add and use Code Block.

Create next app (skip if you already have setup a next app)

terminal

npx create-next-app@latest --yes

Install

terminal

npx modui-uikit@latest add codeblock

Implement

typescript

import { Codeblock } from '@/components/ui/codeblock'
  
  export default function Example() {
    return (
      <Codeblock language="C#">
        This is some random piece of code. It can copied
      </Codeblock>
    )
  }