AI & AgentsPro

Code Block

A syntax-styled code block with a language label and copy button.

Usage

tsx

function Hello() {
  return <p>Hello</p>
}

bash

npm install @wunderui/react

Then import what you need:

tsx

import { CodeBlock } from "@wunderui/react"

Code with its language and a copy button.

tsx

export function Hello() {
  return <h1>Hello WunderUI</h1>
}

bash

npm install @wunderui/react

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

A request example in the API docs, ready to copy.

Create a project

Send a POST request with a name; the response carries the new project’s id.

bash

curl -X POST https://api.wunderui.com/v1/projects \
  -H "Authorization: Bearer $TOKEN" \
  -d '{ "name": "Checkout redesign" }'