CodeBlock
wrap={false} to disable soft wrapping and enable horizontal scrolling for long lines. radius and withBorder control the code surface itself — pair radius="none" with withBorder={false} to sit flush inside a bordered container such as Card.Section.Examples
(8)Properties
(42)Playground
Basic
Loading demo…
import
{
Block
,
CodeBlock
,
Text
}
from
'@platform-blocks/react-ui-library'
;
const
sample
=
`import { View, Text } from 'react-native';
export function HelloWorld() {
return (
<View>
<Text>Hello, World!</Text>
</View>
);
}`
;
export
function
Demo
(
)
{
return
(
<Block
fullWidth
>
<Text
weight
=
"semibold"
>
Basic
code block
</Text
>
<Text
size
=
"sm"
color
=
"secondary"
>
The
default
CodeBlock
renders formatted code with copy support and automatic language detection
.
</Text
>
<CodeBlock
language
=
"tsx"
>
{
sample
}
</CodeBlock
>
</Block
>
)
;
}
Interactive
Loading demo…
import
{
useEffect
,
useRef
,
useState
}
from
'react'
;
import
{
Block
,
Button
,
CodeBlock
,
Text
}
from
'@platform-blocks/react-ui-library'
;
const
sampleCode
=
`
const
greeting
=
"Hello, World!"
;
console
.
log
(
greeting
)
;
// A simple function
function
add
(
a
,
b
)
{
return
a
+
b
;
}
const
result
=
add
(
5
,
3
)
;
console
.
log
(
\`
5
+
3
=
\$
{
result
}
\`
)
;
`
;
export
function
Demo
(
)
{
const
[
copiedLength
,
setCopiedLength
]
=
useState
<
number
|
null
>
(
null
)
;
const
timeoutRef
=
useRef
<ReturnType
<
typeof setTimeout
>
|
null
>
(
null
)
;
useEffect
(
(
)
=>
{
return
(
)
=>
{
if
(
timeoutRef
.
current
)
{
clearTimeout
(
timeoutRef
.
current
)
;
}
}
;
}
,
[
]
)
;
const
handleCopy
=
(
code
:
string
)
=>
{
if
(
timeoutRef
.
current
)
{
clearTimeout
(
timeoutRef
.
current
)
;
}
setCopiedLength
(
code
.
length
)
;
timeoutRef
.
current
=
setTimeout
(
(
)
=>
{
setCopiedLength
(
null
)
;
timeoutRef
.
current
=
null
;
}
,
2000
)
;
}
;
return
(
<Block
fullWidth
>
<Text
weight
=
"semibold"
>
Interactive
copy
</Text
>
<Text
size
=
"sm"
color
=
"secondary"
>
Attach
an onCopy handler to trigger custom feedback and reuse it outside the
CodeBlock
controls
.
</Text
>
{
copiedLength
!==
null
&&
(
<Text
size
=
"xs"
color
=
"success"
>
Copied
{
copiedLength
}
characters to the clipboard
.
</Text
>
)
}
<CodeBlock
language
=
"javascript"
title
=
"Interactive copy example"
onCopy
=
{
handleCopy
}
>
{
sampleCode
}
</CodeBlock
>
<Button
title
=
"Copy code manually"
variant
=
"outline"
onPress
=
{
(
)
=>
handleCopy
(
sampleCode
)
}
/>
</Block
>
)
;
}
File tabs
files to show one source per tab. Each tab carries its language's logo where one exists (TypeScript, CSS) and a glyph otherwise, and highlighting follows the active file's language — data.ts highlights as TypeScript even though the block's language is tsx.Loading demo…
import
{
Block
,
CodeBlock
,
Text
}
from
'@platform-blocks/react-ui-library'
;
const
FILES
=
[
{
name
:
'index.tsx'
,
code
:
`import { Blockquote } from '@platform-blocks/react-ui-library';
import { AUTHOR, QUOTE } from './data';
export function Demo() {
return <Blockquote author={AUTHOR}>{QUOTE}</Blockquote>;
}`
,
}
,
{
name
:
'data.ts'
,
code
:
`export const AUTHOR = {
name: 'Priya Shah',
title: 'CTO',
organization: 'Northwind Labs',
};
export const QUOTE = 'The components feel native on every platform.';`
,
}
,
{
name
:
'quote.css'
,
code
:
`.quote {
border-left: 4px solid var(--primary-5);
padding: 16px 20px;
}`
,
}
,
{
name
:
'theme.json'
,
code
:
`{
"primaryColor": "blue",
"defaultRadius": "md"
}`
,
}
,
]
;
export
function
Demo
(
)
{
return
(
<Block
fullWidth
>
<Text
size
=
"sm"
color
=
"secondary"
>
Switch
files
from
the tab strip in the top
-
left corner
.
</Text
>
<CodeBlock
files
=
{
FILES
}
/>
</Block
>
)
;
}
GitHub
githubUrl prop.Loading demo…
import
{
Block
,
CodeBlock
,
Text
}
from
'@platform-blocks/react-ui-library'
;
const
componentExample
=
`import { View, Text } from 'react-native';
export function HelloWorld() {
return (
<View>
<Text>Hello, World!</Text>
</View>
);
}`
;
const
inlineExample
=
`
// This code has both copy and GitHub buttons
export
function
MyComponent
(
)
{
return
<
div
>
Hello
with
GitHub
button
!</
div
>
;
}
`
;
const
terminalExample
=
`$ npm install platform
-
blocks
$ npm start
Server
running on http:
//localhost:3000`;
const
floatingExample
=
`
// Floating buttons example (no title)
export
function
FloatingExample
(
)
{
return
<
span
>
Hover
to see buttons
</
span
>
;
}
`
;
export
function
Demo
(
)
{
return
(
<Block
fullWidth
>
<Text
weight
=
"semibold"
>
GitHub
actions
</Text
>
<Text
size
=
"sm"
color
=
"secondary"
>
Provide
a
GitHub
URL
to render quick links beside copy controls across
any
CodeBlock
variant
.
</Text
>
<Block
>
<Block
>
<Text
size
=
"sm"
weight
=
"semibold"
>
Basic
component
</Text
>
<CodeBlock
title
=
"Basic component"
githubUrl
=
"https:
//github.com/platform-blocks/react-ui-library/blob/main/packages/ui/src/components/Button/Button.tsx"
>
{
componentExample
}
</CodeBlock
>
</Block
>
<Block
>
<Text
size
=
"sm"
weight
=
"semibold"
>
File
name and language
</Text
>
<CodeBlock
files
=
{
[
{
name
:
'example.tsx'
}
]
}
githubUrl
=
"https:
//github.com/platform-blocks/react-ui-library/blob/main/packages/ui/src/components/Text/Text.tsx"
>
{
inlineExample
}
</CodeBlock
>
</Block
>
<Block
>
<Text
size
=
"sm"
weight
=
"semibold"
>
Terminal
variant
</Text
>
<CodeBlock
variant
=
"terminal"
title
=
"Terminal example"
githubUrl
=
"https:
//github.com/platform-blocks/react-ui-library/blob/main/apps/react-ui-library.com/eas-build-post-install.sh"
>
{
terminalExample
}
</CodeBlock
>
</Block
>
<Block
>
<Text
size
=
"sm"
weight
=
"semibold"
>
Floating
controls
</Text
>
<CodeBlock
githubUrl
=
"https:
//github.com/platform-blocks/react-ui-library/blob/main/packages/ui/src/components/CodeBlock/CodeBlock.tsx">
{
floatingExample
}
</CodeBlock
>
</Block
>
</Block
>
</Block
>
)
;
}
Languages
Loading demo…
import
{
Block
,
CodeBlock
,
Text
}
from
'@platform-blocks/react-ui-library'
;
const
tsxExample
=
`interface Props {
title: string;
onPress?: () => void;
}
export function Button({ title, onPress }: Props) {
return (
<TouchableOpacity onPress={onPress}>
<Text>{title}</Text>
</TouchableOpacity>
);
}`
;
const
jsonExample
=
`{
"name": "my-app",
"version": "1.0.0",
"dependencies": {
"react": "^18.2.0",
"react-native": "^0.72.0"
},
"scripts": {
"start": "expo start",
"build": "expo build"
}
}`
;
const
markdownExample
=
`# Getting Started
This is a **markdown** example with \`inline code\`.
## Features
- Syntax highlighting
- Multiple languages
- Copy functionality
> Blockquote with *emphasis* and **bold** text.`
;
export
function
Demo
(
)
{
return
(
<Block
fullWidth
>
<Text
weight
=
"semibold"
>
Language
presets
</Text
>
<Text
size
=
"sm"
color
=
"secondary"
>
CodeBlock
detects syntax styles across languages like
TypeScript
,
JSON
,
and
Markdown
.
</Text
>
<Block
>
<CodeBlock
language
=
"tsx"
title
=
"React component"
>
{
tsxExample
}
</CodeBlock
>
<CodeBlock
language
=
"json"
title
=
"Package configuration"
>
{
jsonExample
}
</CodeBlock
>
<CodeBlock
language
=
"markdown"
title
=
"Documentation"
>
{
markdownExample
}
</CodeBlock
>
</Block
>
</Block
>
)
;
}
Features
Loading demo…
import
{
Block
,
CodeBlock
,
Text
}
from
'@platform-blocks/react-ui-library'
;
const
fibonacciExample
=
`
function
fibonacci
(
n
)
{
if
(
n
<=
1
)
{
return
n
;
}
return
fibonacci
(
n
-
1
)
+
fibonacci
(
n
-
2
)
;
}
// Calculate the 10th Fibonacci number
const
result
=
fibonacci
(
10
)
;
console
.
log
(
\`
Fibonacci
(
10
)
=
\$
{
result
}
\`
)
;
`
;
const
fullWidthExample
=
`
// This code block spans the full width of its container
const
data
=
[
{
id
:
1
,
name
:
'Alice'
,
age
:
30
,
city
:
'New York'
}
,
{
id
:
2
,
name
:
'Bob'
,
age
:
25
,
city
:
'San Francisco'
}
,
{
id
:
3
,
name
:
'Charlie'
,
age
:
35
,
city
:
'Los Angeles'
}
]
;
const
processData
=
(
rows
)
=>
{
return
rows
.
filter
(
(
person
)
=>
person
.
age
>=
30
)
.
map
(
(
person
)
=>
(
{
.
.
.
person
,
isAdult
:
true
,
displayName
:
\`\$
{
person
.
name
}
(
\$
{
person
.
age
}
)
\`
}
)
)
.
sort
(
(
left
,
right
)
=>
left
.
name
.
localeCompare
(
right
.
name
)
)
;
}
;
console
.
log
(
processData
(
data
)
)
;
`
;
const
disabledCopyExample
=
`
// This example has the copy button disabled
const
message
=
"Hello, World!"
;
console
.
log
(
message
)
;
`
;
export
function
Demo
(
)
{
return
(
<Block
fullWidth
>
<Text
weight
=
"semibold"
>
Feature
highlights
</Text
>
<Text
size
=
"sm"
color
=
"secondary"
>
Combine
titles
,
line numbers
,
full
-
width layouts
,
and copy controls to match different documentation needs
.
</Text
>
<Block
>
<Block
>
<Text
size
=
"sm"
weight
=
"semibold"
>
Title
with line numbers
</Text
>
<CodeBlock
title
=
"With title and line numbers"
showLineNumbers
>
{
fibonacciExample
}
</CodeBlock
>
</Block
>
<Block
>
<Text
size
=
"sm"
weight
=
"semibold"
>
Full
-
width layout
</Text
>
<CodeBlock
title
=
"Full width example"
fullWidth
language
=
"javascript"
>
{
fullWidthExample
}
</CodeBlock
>
</Block
>
<Block
>
<Text
size
=
"sm"
weight
=
"semibold"
>
Copy
button disabled
</Text
>
<CodeBlock
title
=
"No copy button"
showCopyButton
=
{
false
}
>
{
disabledCopyExample
}
</CodeBlock
>
</Block
>
</Block
>
</Block
>
)
;
}
Variants
Loading demo…
import
{
Block
,
CodeBlock
,
Text
}
from
'@platform-blocks/react-ui-library'
;
const
sampleCode
=
`function hackTheMatrix() {
const matrix = generateMatrix();
console.log('Entering the matrix...');
for (let i = 0; i < matrix.length; i += 1) {
matrix[i].decrypt();
}
return 'Welcome to the real world.';
}`
;
const
terminalCode
=
`$ npm install platform-blocks
$ cd my-app
$ npm start
Server running on port 3000`
;
export
function
Demo
(
)
{
return
(
<Block
fullWidth
>
<Text
weight
=
"semibold"
>
Visual
variants
</Text
>
<Text
size
=
"sm"
color
=
"secondary"
>
Switch
between
default
,
terminal
,
and hacker themes using the variant prop
.
</Text
>
<Block
>
<Block
>
<Text
size
=
"sm"
weight
=
"semibold"
>
Default
code block
</Text
>
<CodeBlock
language
=
"javascript"
title
=
"matrix.js"
>
{
sampleCode
}
</CodeBlock
>
</Block
>
<Block
>
<Text
size
=
"sm"
weight
=
"semibold"
>
Terminal
variant
</Text
>
<CodeBlock
variant
=
"terminal"
title
=
"Terminal"
>
{
terminalCode
}
</CodeBlock
>
</Block
>
<Block
>
<Text
size
=
"sm"
weight
=
"semibold"
>
Hacker
variant
</Text
>
<CodeBlock
variant
=
"hacker"
language
=
"javascript"
title
=
"hack.exe"
>
{
sampleCode
}
</CodeBlock
>
</Block
>
</Block
>
</Block
>
)
;
}
Highlighting
Loading demo…
import
{
Block
,
CodeBlock
,
Text
}
from
'@platform-blocks/react-ui-library'
;
const
sample
=
`
import
{
View
,
Text
}
from
'react-native'
;
interface
User
{
id
:
number
;
name
:
string
;
// highlighted
active
:
boolean
;
}
export
function
UserCard
(
{
user
}
:
{
user
:
User
}
)
{
if
(
!
user
.
active
)
{
return
null
;
// early return highlighted
}
return
(
<View
style
=
{
{
padding
:
8
}
}
>
<Text
>
{
user
.
name
}
</Text
>
</View
>
)
;
}
// Utility function (range highlighted)
export
function
filterActive
(
users
:
User
[
]
)
{
return
users
.
filter
(
(
u
)
=>
u
.
active
)
;
}
`
;
export
function
Demo
(
)
{
return
(
<Block
fullWidth
>
<Text
weight
=
"semibold"
>
Highlighted
lines
</Text
>
<Text
size
=
"sm"
color
=
"secondary"
>
Combine
individual lines and ranges in the highlightLines prop to emphasize key logic
.
</Text
>
<CodeBlock
title
=
"Highlighted lines"
showLineNumbers
highlightLines
=
{
[
'1'
,
'5-9'
,
'11-14'
,
'20-22'
]
}
>
{
sample
}
</CodeBlock
>
</Block
>
)
;
}
</>
react-ui-library
100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.
A Platform Blocks product.
Quick Links
Resources