Skip to main content

Generate built-in UI components

Nullplatform includes built-in UI components that render automatically based on specific catalog keys—like links or about. These don’t require any custom UI configuration or rendering logic.

If you attach an instance using one of these keys, the platform will:

  • Recognize it
  • Apply default visual styling
  • Place it in the appropriate part of the UI

This lets you embed useful tools, docs, or context directly in dashboards—without writing custom frontend code.

These are built-in catalogs

You don't need to create catalog specifications for links and about keys.

Built-in catalog keys

Catalog keyEntity type(s)Description
linksnamespace, applicationRenders grouped links to dashboards, docs, etc.
aboutuserShows user profile info (title, role, contact)

💡 These are optional, but when used correctly, they enhance discoverability and visibility across the platform.

Namespace

To create catalog components of entities in your namespace, send a POST request a catalog data key for links like the following:

curl -L 'https://api.nullplatform.com/metadata/namespace/123/links' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer <token>' \
-d '[
{
"title": "Trello",
"icon": "logos:trello",
"links": [
{
"url": "https://trello.com/w/my-organization-trello/home",
"description": "Workspace"
}
]
},
{
"title": "Github",
"icon": "bi:github",
"links": [
{
"url": "https://github.com/my-organization-github",
"description": "Homepage"
}
]
},
{
"title": "Calendar",
"icon": "logos:google-calendar",
"links": [
{
"url": "https://calendar.google.com/",
"description": "Link"
}
]
}
]

In the namespace dashboard, they appear above the application list:

links namespace component

Application

In the application dashboard, they are in the Useful links section.

For example, to add a Datadog component to your application UI, send POST request to create a catalog data key for links like the following:

curl -L 'https://api.nullplatform.com/metadata/application/123/links' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer <token>' \
-d '[
{
"subtitle": "Application performance & monitoring",
"title": "Datadog",
"icon": "simple-icons:datadog",
"links": [
{
"url": "https://app.datadoghq.com/dashboard/example",
"description": "Dashboard"
}
]
}
]'

This will be rendered in the UI like this:

links application component

Built-in catalog spec

{
"type": "array",
"minItems": 1,
"items": {
"type": "object",
"properties": {
"title": {
"type": "string",
"minLength": 1,
"maxLength": 36
},
"subtitle": {
"type": "string",
"minLength": 1,
"maxLength": 36
},
"icon": {
"type": "string",
"format": "uri",
"minLength": 3,
"description": "An URL of an png/jpg/base64 image or icon name of iconify library (see https://icon-sets.iconify.design)."
},
"links": {
"type": "array",
"minItems": 1,
"maxItems": 2,
"items": {
"type": "object",
"properties": {
"description": {
"type": "string",
"minLength": 3,
"maxLength": 18
},
"url": {
"type": "string",
"format": "uri"
}
},
"required": [
"description",
"url"
]
}
}
},
"required": [
"title",
"icon",
"links"
]
}
}

The about component (user profiles)

Use the about catalog key to display structured profile information for a platform user.

This is rendered on the member profile page and can include title, role, contact info, or other structured data.

Users

To use it, you just need to Create a catalog data key for the built-in about specification.

Here's a request example:

curl -L 'https://api.nullplatform.com/metadata/user/123/about' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer <token>' \
-d '[
{
"title": "Position",
"description": "System Administrator"
},
{
"title": "Role",
"description": "Product Owner"
},
{
"title": "Contact",
"description": "+12 123 456 789"
}
]

Here's a user profile example:

links users component

Built-in catalog specs

{
"type": "array",
"items": {
"type": "object",
"properties": {
"title": {
"type": "string",
"minLength": 4
},
"description": {
"type": "string",
"minLength": 4
}
},
"required": [
"title",
"description"
]
}
}