---
sidebar_position: 3
---

import { Code } from "rizzui";
import Paper from "@site/src/components/paper";

# Code

Code component is the used to render pre or code block.

```jsx
import { Code } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of the **Code**.

<Paper>
  <Code>
    &lt;html&gt; <br />
    &nbsp;&nbsp;&lt;head&gt; <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Welcome to RizzUI.&lt;/title&gt; <br />
    &nbsp;&nbsp;&lt;/head&gt; <br />
    &nbsp;&nbsp;&lt;body&gt; <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;RizzUI Wesbite&lt;/h1&gt; <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;My first page.&lt;/h2&gt; <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt; <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RizzUI is a free open source react ui
    library. <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt; <br />
    &nbsp;&nbsp;&lt;/body&gt; <br />
    &lt;/html&gt;
  </Code>
</Paper>

```jsx
import { Code } from "rizzui";

export default function App() {
  return (
    <Code>
      &lt;html&gt; <br />
      &nbsp;&nbsp;&lt;head&gt; <br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Welcome to RizzUI.&lt;/title&gt;{" "}
      <br />
      &nbsp;&nbsp;&lt;/head&gt; <br />
      &nbsp;&nbsp;&lt;body&gt; <br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;RizzUI Wesbite&lt;/h1&gt; <br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;My first page.&lt;/h2&gt; <br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt; <br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RizzUI is a free open source react ui
      library. <br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt; <br />
      &nbsp;&nbsp;&lt;/body&gt; <br />
      &lt;/html&gt;
    </Code>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Code Props

Here is the API documentation of the Code component.

<div className="overflow-x-auto">

|   Props   |   Type   |            Description             | Default |
| :-------: | :------: | :--------------------------------: | :-----: |
| className | `string` | Add custom classes for extra style |  \_\_   |

</div>
