---
title: Create a Component
description: Create a component with properties available in the collaborator object
url: https://storyblok.com/docs/api/management/components/create-a-component
---

# Create a Component

POST

```html
https://mapi.storyblok.com/v1/spaces/:space_id/components/
```

You can set any property available in the component object. Below we only list the properties in the example and the possible required fields.

## Path parameters

-   `:space_id` (required) (number)
    
    Numeric ID of a space
    

## Request body properties

-   `component` (The Component Object)
    
    The [component object](/docs/api/management/components/the-component-object)
    
    Show child properties
    
    -   `name` (required) (string)
        
        Technical name of a component. Visible in the content editor if the `display_name` is `null`.
        
        > [!CAUTION]
        > The word “content” is a reserved keyword. Only use it as a block’s technical name when combined with other characters.
        
    -   `display_name` (string)
        
        Name displayed in the content editor
        
    -   `schema` (object)
        
        Key value pairs of the component fields
        
    -   `image` (string | null)
        
        URL of the component preview image (if uploaded)
        
    -   `preview_field` (string)
        
        The component preview field in the UI
        
    -   `is_root` (boolean)
        
        `true` if a component can be used as a **content type block**
        
    -   `preview_tmpl` (string)
        
        The component preview template. Learn how to [create a preview template](/docs/concepts/blocks#create-previews).
        
    -   `is_nestable` (boolean)
        
        `true` if a component is a **Nestable block**
        
    -   `component_group_id` (string)
        
        The component folder ID
        
    -   `icon` (string)
        
        Icon of the component
        
    -   `color` (string)
        
        Color of the icon
        
    -   `internal_tag_ids` (string\[\])
        
        List of IDs of the internal tags assigned to a component
        
    -   `content_type_asset_preview` (string)
        
        Asset preview field of a **content type block**
        
    

## Response properties

-   `component` (The Component Object)
    
    The [component object](/docs/api/management/components/the-component-object)
    

## Examples

-   cURL
    
    ```shellscript
    curl "https://mapi.storyblok.com/v1/spaces/288868932106293/components/" \
      -X POST \
      -H "Authorization: YOUR_OAUTH_TOKEN" \
      -H "Content-Type: application/json" \
      -d "{\"component\":{\"display_name\":null,\"is_nestable\":true,\"is_root\":false,\"name\":\"banner_section\",\"schema\":{\"headline\":{\"description\":\"This field is used to render a title\",\"pos\":0,\"translatable\":true,\"type\":\"text\"}}}}"
    ```
    
-   JS
    
    ```javascript
    // storyblok-js-client@>=7, node@>=18
    import Storyblok from "storyblok-js-client";
    
    const storyblok = new Storyblok({
      oauthToken: "YOUR_PERSONAL_ACCESS_TOKEN",
    });
    
    try {
      const response = await storyblok.post('spaces/288868932106293/components/', {
        "component": {
          "display_name": null,
          "is_nestable": true,
          "is_root": false,
          "name": "banner_section",
          "schema": {
            "headline": {
              "description": "This field is used to render a title",
              "pos": 0,
              "translatable": true,
              "type": "text"
            }
          }
        }
      })
      console.log({ response })
    } catch (error) {
      console.log(error)
    }
    ```
    
-   PHP
    
    ```php
    $client = new \Storyblok\ManagementClient('YOUR_OAUTH_TOKEN');
    
    $payload = ["component" => ["display_name" => null,"is_nestable" => true,"is_root" => false,"name" => "banner_section","schema" => ["headline" => ["description" => "This field is used to render a title","pos" => 0,"translatable" => true,"type" => "text"]]]];
    
    $client->post('spaces/288868932106293/components/', $payload)->getBody();
    ```
    
-   Java
    
    ```java
    HttpResponse<String> response = Unirest.post("https://mapi.storyblok.com/v1/spaces/288868932106293/components/")
      .header("Content-Type", "application/json")
      .header("Authorization", "YOUR_OAUTH_TOKEN")
      .body({"component":{"display_name":null,"is_nestable":true,"is_root":false,"name":"banner_section","schema":{"headline":{"description":"This field is used to render a title","pos":0,"translatable":true,"type":"text"}}}})
      .asString();
    ```
    
-   C#
    
    ```csharp
    var client = new RestClient("https://mapi.storyblok.com/v1/spaces/288868932106293/components/");
    var request = new RestRequest(Method.POST);
    
    request.AddHeader("Content-Type", "application/json");
    request.AddHeader("Authorization", "YOUR_OAUTH_TOKEN");
    request.AddParameter("application/json", "{\"component\":{\"display_name\":null,\"is_nestable\":true,\"is_root\":false,\"name\":\"banner_section\",\"schema\":{\"headline\":{\"description\":\"This field is used to render a title\",\"pos\":0,\"translatable\":true,\"type\":\"text\"}}}}", ParameterType.RequestBody);
    IRestResponse response = client.Execute(request);
    ```
    
-   Python
    
    ```python
    import requests
    
    url = "https://mapi.storyblok.com/v1/spaces/288868932106293/components/"
    
    querystring = {}
    
    payload = {"component":{"display_name":null,"is_nestable":true,"is_root":false,"name":"banner_section","schema":{"headline":{"description":"This field is used to render a title","pos":0,"translatable":true,"type":"text"}}}}
    headers = {
      'Content-Type': "application/json",
      'Authorization': "YOUR_OAUTH_TOKEN"
    }
    
    response = requests.request("POST", url, data=payload, headers=headers, params=querystring)
    
    print(response.text)
    ```
    
-   Ruby
    
    ```ruby
    require 'storyblok'
    client = Storyblok::Client.new(oauth_token: 'YOUR_OAUTH_TOKEN')
    
    payload = {"component" => {"display_name" => null,"is_nestable" => true,"is_root" => false,"name" => "banner_section","schema" => {"headline" => {"description" => "This field is used to render a title","pos" => 0,"translatable" => true,"type" => "text"}}}}
    
    client.post('spaces/288868932106293/components/', payload)
    ```
    
-   Swift
    
    ```swift
    let storyblok = URLSession(storyblok: .mapi(accessToken: .oauth("YOUR_OAUTH_TOKEN")))
    var request = URLRequest(storyblok: storyblok, path: "spaces/288868932106293/components/")
    request.httpMethod = "POST"
    request.httpBody = try JSONSerialization.data(withJSONObject: [
        "component": [
            "display_name": nil,
            "is_nestable": true,
            "is_root": false,
            "name": "banner_section",
            "schema": [
                "headline": [
                    "description": "This field is used to render a title",
                    "pos": 0,
                    "translatable": true,
                    "type": "text",
                ],
            ],
        ],
    ])
    let (data, _) = try await storyblok.data(for: request)
    print(try JSONSerialization.jsonObject(with: data))
    ```
    
-   Kotlin
    
    ```kotlin
    val client = HttpClient {
        install(Storyblok(MAPI)) {
            accessToken = OAuth("YOUR_OAUTH_TOKEN")
        }
    }
    
    val response = client.post("spaces/288868932106293/components/") {
        setBody(buildJsonObject {
            putJsonObject("component") {
                put("display_name", null)
                put("is_nestable", true)
                put("is_root", false)
                put("name", "banner_section")
                putJsonObject("schema") {
                    putJsonObject("headline") {
                        put("description", "This field is used to render a title")
                        put("pos", 0)
                        put("translatable", true)
                        put("type", "text")
                    }
                }
            }
        })
    }
    
    println(response.body<JsonElement>())
    ```

## Pagination

-   [Previous: Components](/docs/api/management/components)
-   [Next: Delete a Component](/docs/api/management/components/delete-a-component)