Explore how adaptive content transforms your docs into a dynamic, tailored experience for every user.
Read the docs
LogoLogo
ProductPricingLog inSign up
  • Documentation
  • Developers
  • Guides
  • Changelog
  • Help Center
  • Getting Started
    • Developer Documentation
    • Quickstart
    • Development
    • Publishing
  • Integrations
    • Introduction
    • Using the CLI
    • Configuration
    • ContentKit
      • Component reference
    • Integration runtime
  • Client library
  • Guides
    • Creating a custom unfurl action
    • Creating interactive blocks
    • Referencing your integration in Markdown
    • Working with HTTP requests
    • Using the CLI in CI/CD
  • GitBook API
    • Introduction
    • Authentication
    • API reference
      • Organizations
        • Organization members
        • Organization invites
        • Organization AI ask
      • Docs sites
        • Site share links
        • Site structure
        • Site auth
        • Site preview
        • Site customization
        • Site spaces
        • Site sections
        • Site section groups
        • Site redirects
        • Site MCP servers
        • Site ads
        • Site users
        • Site insights
        • Site AI ask
      • Collections
        • Collection users
        • Collection teams
      • Spaces
        • Space content
        • Space comments
        • Space embeds
        • Space users
        • Space teams
        • Space integrations
        • Git
      • Change requests
        • Change request content
        • Change request contributors
        • Change request reviewers
        • Change request comments
      • Translations
        • Glossary
      • Integrations
      • URLs
      • OpenAPI
        • OpenAPI spec versions
      • Conversations
      • Custom fonts
      • Subdomains
      • Users
      • Teams
        • Team members
      • SSO
      • Storage
      • Custom hostnames
      • System info
    • Rate limiting
    • Pagination
    • Errors
  • Marketplace
    • Overview
    • Submit your app for review
  • Resources
    • Concepts
    • Changelog
    • ContentKit playground
    • GitHub examples
Powered by GitBook
On this page
Edit on GitHub
  1. Integrations
  2. ContentKit

Component reference

Last updated 2 months ago

Was this helpful?

LogoLogo

Resources

  • Showcase
  • Enterprise
  • Status

Company

  • Careers
  • Blog
  • Community

Policies

  • Subprocessors
  • Terms of Service
CtrlK
  • Layout
  • Display
  • Interactive

Was this helpful?

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>
Props
Type
Description

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.

<vstack>
    ...
</vstack>
Props
Type
Description

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.

<hstack>
    ...
</hstack>
Props
Type
Description

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.

<divider />
Props
Type
Description

style

"default" | "line"

Visual style for the divider.

size

"medium" | "small" | "large"

Spacing of the divider (default to medium).

Display

box

<box style="card">
    ...
</box>
Props
Type
Description

children*

Array<Block> | Array<Inline>

Content to display in the box.

grow

number

Portion of remaining space the element should take up.

card

<card title="I am a card">
    ...
</card>
Props
Type
Description

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

<text>
    Hello <text style="bold">World</text>
</text>
Props
Type
Description

children*

Array<string | Text>

Text content

style*

"bold" | "italic" | "strikethrough" | "code"

Formatting style

image

<image 
    source={{ url: "https://example.com/image.png" }}
    aspectRatio={16 / 9}
/>
Props
Type
Description

source*

object

Image source

source.url*

string

URL of the image

aspectRatio*

number

Aspect ratio of the image

markdown

<markdown content="Hello **world**" />
Props
Type
Description

content*

string

Markdown content to display.

Interactive

modal

<modal>
    ...
</modal>
Props
Type
Description

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

button

<button label="Click me" onPress={{ type: 'something' }} />
Props
Type
Description

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

textinput

<textinput
    id="name"
    label="Name"
    initialValue="John Doe"
    placeholder="Enter a name"
/>
Props
Type
Description

state*

string

State key for binding

initialValue

string

Initial input value

label

string

Input label

placeholder

string

Placeholder text

codeblock

<codeblock content="const variable = 10" syntax="javascript" />
Props
Type
Description

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

webframe

<webframe
    source={{ url: 'https://www.gitbook.com' }}
    aspectRatio={16 / 9}
/>
Props
Type
Description

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

select

<select state>
    ...
</select>
Props
Type
Description

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

Option ID

options.label

string

Option label

options.url

string

Option external link

switch

<switch />
Props
Type
Description

state*

string

State key

initialValue

boolean

Initial value

confirm.title*

string

Confirmation title

confirm.text*

string

Confirmation text

confirm.confirm*

string

Confirmation button label

confirm.style*

'primary' | 'danger'

Confirmation style

checkbox

<checkbox />
Props
Type
Description

state*

string

State key

value

string | number

Value when checked

confirm.title*

string

Confirmation title

confirm.text*

string

Confirmation text

confirm.confirm*

string

Confirmation button label

confirm.style*

'primary' | 'danger'

Confirmation style

radio

<radio />
Props
Type
Description

state*

string

State key

value

string | number

Value when selected

confirm.title*

string

Confirmation title

confirm.text*

string

Confirmation text

confirm.confirm*

string

Confirmation button label

confirm.style*

'primary' | 'danger'

Confirmation style