Component reference
Learn about the components available from ContentKit
Here you’ll find the component reference for all of the ContentKit blocks you can use in your components. Components are divided into 3 different categories:
Layout: Components for structuring your integration
Display: Visual components for representing data and media
Interactive: Interactive components
Layout
block
Top level component for a custom block.
<block>
...
</block>children*
Array<Block>
Content to display in the block.
controls
Array<BlockControl>
Control menu items displayed for the block.
controls.icon
'close' | ...
The icon to display with the control
controls.label
string
The label for the control
controls.onPress
Action
Action dispatched when control is pressed.
controls.confirm
object
Modal object to confirm the action before execution
controls.confirm.title
string
Title for the confirmation button
controls.confirm.text
string
Content for the confirmation button
controls.confirm.confirm
string
Label for the confirmation button
controls.confirm.style
"primary" | "danger"
Style for the confirmation button
vstack
Flex layout element to render a vertical stack of elements.
children*
Array<Block>
Content to display in the stack.
align
'start' | 'center' | 'end'
Horizontal alignment of the elements in stack.
hstack
Flex layout element to render a horizontal stack of elements.
children*
Array<Block>
Content to display in the stack.
align
'start' | 'center' | 'end'
Vertical alignment of the elements in stack.
divider
A visual delimiter between 2 elements of a containing stack layout.
style
"default" | "line"
Visual style for the divider.
size
"medium" | "small" | "large"
Spacing of the divider (default to medium).
Display
box
children*
Array<Block> | Array<Inline>
Content to display in the box.
grow
number
Portion of remaining space the element should take up.
card
children
Array<Block> | Array<Inline>
Content to display in the card.
title
string
Title for the card.
hint
string
Hint for the card.
icon
'close' | ...
Icon or Image displayed with the card.
onPress
Action
Action dispatched when pressed.
buttons
Array<Button>
Buttons shown in the top-right corner of the card.
text
children*
Array<string | Text>
Text content
style*
"bold" | "italic" | "strikethrough" | "code"
Formatting style
image
source*
object
Image source
source.url*
string
URL of the image
aspectRatio*
number
Aspect ratio of the image
markdown
content*
string
Markdown content to display.
Interactive
modal
children*
Array<Block> | Array<Inline>
Modal content
title
string
Modal title
subtitle
string
Modal subtitle
size
'medium' | 'xlarge' | 'fullscreen'
Modal size
returnValue
object
Data returned when modal is closed
submit
Button
Submit button
Dispatch @ui.modal.open from a button to render a modal component:
The modal component receives the defined props. Dispatch @ui.modal.close to close it. The action can include returnValue, which the parent component receives in its action handler.
Follow Open a modal from a button for a complete example.
button
label*
string
Button text
onPress*
Action
Triggered action
style
'primary' | 'secondary' | 'danger'
Button style
tooltip
string
Hover tooltip
icon
'close' | ...
Icon to display
confirm
object
Confirmation modal
confirm.title*
string
Confirmation modal title
confirm.text*
string
Confirmation text
confirm.confirm*
string
Confirmation button label
confirm.style*
'primary' | 'danger'
Confirmation button style
Use onPress to dispatch an action. Handle custom actions in the component action callback:
Use @ui.url.open to open an external URL:
Follow Update text with a button for a complete custom-action example.
textinput
state*
string
State key for binding
initialValue
string
Initial input value
label
string
Input label
placeholder
string
Placeholder text
The state value identifies where ContentKit stores the input value. Your action handler can read that value from the component state.
Use @editor.node.updateProps to save the current input value as a block property:
Follow Create an interactive text input to build a text input with an action. Follow Save editable block content to save its value.
codeblock
content*
string
Code content
syntax
string
Code syntax highlight
lineNumbers
boolean | number
Show line numbers
buttons
Array<Button>
Overlay buttons
state
string
Makes block editable, value stored in state
onContentChange
Action
Action on edit
Use codeblock when you need a prompt-style block.
It renders with the same visual treatment as a code block. This works well for prompts, commands, and other text readers might want to reuse in another tool.
ContentKit does not currently expose a dedicated prompt component. It also does not define a built-in AI-tool action for codeblock.
You can build the closest equivalent by adding overlay buttons. For example, you can add a button that opens a prompt target URL in Cursor using @ui.url.open.
In this example, cursorUrl is a URL or deeplink your integration generates for the target AI tool.
If you need a copy button, only add it when your integration has a supported way to handle copy behavior. ContentKit does not document a built-in clipboard action for codeblock buttons today.
webframe
source*
object
URL source
source.url*
string
URL of the external site
aspectRatio*
number
Aspect ratio
buttons
Array<Button>
Overlay buttons
data
Record<string, string>
State dependencies
Pass component state through data. Use dynamicState when the frame needs updates as the reader interacts:
The frame receives bound data and GitBook context through the message event:
GitBook always provides state.page as { id, path, title }. GitBook provides state.visitor when the integration has the site:visitor:claims scope.
The frame can dispatch a custom action to the component:
The frame can navigate within the published site with @webframe.navigate:
The path starts after the site's base URL. The optional anchor scrolls to a heading on the target page.
Follow Send data to a webframe for a complete example.
select
state*
string
State key
initialValue
string | string[]
Initial selected value
placeholder
string
Placeholder
multiple
boolean
Allow multiple selection
options
Array<object>
Selectable options
options.id
string