Components

Last updated 1 year ago

Our reference for the ContentKit covers all the objects you will receive and respond with, alongside all the components you can use in order to render the UI for your integrations.

If you want to learn more about the ContentKit itself, alongside the different types of requests we make in order to make these work, please take a look at our introduction.

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>

{
    "type": "block",
    "children": [
        ...
    ]
}

Props

Type

Description

*required

`vstack`

Flex layout element to render a vertical stack of elements. Use spacer, divider, and box to complete the layout.

<vstack style="start">
    ...
</vstack>

{
    "type": "vstack",
    "align": "start",
    "children": [
        ...
    ]
}

Basic vertical stack:

{
    "type": "vstack",
    "children": [
        { "type": "box", "children": [ { "type": "text", "children": ["Hello"] } ] },
        { "type": "box", "children": [ { "type": "text", "children": ["World"] } ] }
    ]
}

with align:

{
    "type": "vstack",
    "align": "center",
    "children": [
        { "type": "box", "children": [ { "type": "text", "children": ["Hello"] } ] },
        { "type": "box", "children": [ { "type": "text", "children": ["And a long text"] } ] }
    ]
}

*required

`hstack`

Flex layout element to render an horizontal stack of elements. Use spacer, divider, and box to complete the layout.

<hstack style="start">
    ...
</hstack>

{
    "type": "hstack",
    "align": "start",
    "children": [
        ...
    ]
}

Basic horizontal stack:

{
    "type": "hstack",
    "children": [
        { "type": "box", "children": [ { "type": "text", "children": ["Hello"] } ] },
        { "type": "box", "children": [ { "type": "text", "children": ["World"] } ] }
    ]
}

with align:

{
    "type": "hstack",
    "align": "center",
    "children": [
        { "type": "box", "children": [ { "type": "text", "children": ["Hello"] } ] },
        { "type": "box", "children": [ { "type": "text", "children": ["And a long text"] } ] }
    ]
}

*required

`divider`

A visual delimiter between 2 elements of a containing stack layout.

<divider />

{
    "type": "divider"
}

Display

`box`

<box style="card">
    ...
</box>

{
    "type": "box",
    "style": "card",
    "children": [
        ...
    ]
}

*required

`card`

<card title="I am a card">
    ...
</card>

{
    "type": "card",
    "text": "I am a card",
    "children": [
        ...
    ]
}

*required

`text`

The text element is used for rendering blocks of text with formatting.

<text>
    Hello <text style="bold">World</text>
</text>

{
    "type": "text",
    "children": [
        "Hello ",
        {
            "type": "text",
            "children": ["World"],
            "style": "bold"
        }
    ]
}

Basic text:

{
    "type": "text",
    "children": ["Hello"]
}

With nested formatting:

{
    "type": "text",
    "children": [
        "Hello ",
        {
            "type": "text",
            "style": "bold",
            "children": ["World"]
        }
    ]
}

*required

`image`

The image component allows you to use images in your integration.

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

*required

`markdown`

Rich-text formatting of Markdown content.

<markdown content="Hello **world**" />

{
    "type": "markdown",
    "content": "Hello **world**"
}

*required

Interactive

Overlay modal

<modal />

{
    "type": "button",
    "label": "Click me",
    "onPress": { "type": "something" }
}

*required

`button`

Interactive pressable button, triggering a component action when clicked.

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

{
    "type": "button",
    "label": "Click me",
    "onPress": { "type": "something" }
}

Basic button:

{
    "type": "button",
    "label": "Click me",
    "onPress": { "type": "something" }
}

With an icon:

{
    "type": "button",
    "label": "Click me",
    "icon": "maximize",
    "onPress": { "type": "something" }
}

With a tooltip:

{
    "type": "button",
    "label": "Click me",
    "tooltip": "More text here",
    "onPress": { "type": "something" }
}

With a confirm modal:

{
    "type": "button",
    "label": "Click me",
    "confirm": {
        "title": "Confirm the action",
        "text": "Help text here",
        "confirm": "Ok"
    },
    "onPress": { "type": "something" }
}

*required

`textinput`

An input component is used to capture text input from the end user. When an action is being dispatched to the integration, the value of the input is stored in the state value referenced by id.

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

{
    "type": "textinput",
    "state": "name",
    "label": "Name",
    "initialValue": "John Doe",
    "placeholder": "Enter a name"
}

Basic textinput:

{
    "type": "textinput",
    "state": "name",
    "label": "Name",
    "initialValue": "John Doe",
    "placeholder": "Enter a name"
}

*required

`codeblock`

Multi-lines code blocks with syntax highlighting.

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

{
    "type": "codeblock",
    "content": "const variable = 10",
    "syntax": "javascript"
}

*required

`webframe`

Element to render an external URL. The frame can receive update when states are updated by defining dependencies with data (see interactivity for more details).

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

{
    "type": "webframe",
    "source": {
        "url": "https://www.gitbook.com"
    },
    "aspectRatio": 1.7
}

*required

`select`

Select item

<select state>
...
</select>

{
    "type": "select",
}

*required

`switch`

A switch component to toggle between on and off.

<switch />

{
    "type": "switch",
}

*required

`checkbox`

A checkbox component to toggle between checked and unchecked.

<checkbox />

{
    "type": "checkbox",
}

*required

`radio`

A radio component.

<radio />

{
    "type": "radio",
}

*required