Component Reference

All components listed here are globally available in every .mdx file — no imports needed. They are styled exclusively with Kabori design tokens and respond automatically to light/dark mode.

---

Callout

Use <Callout> to highlight important information inline with page content. Four semantic variants are available.

Variants

Info

Informational callout. Use for supplementary context, tips, or cross-references.

Warning

Warning callout. Use to flag potential pitfalls, deprecations, or things to double-check before proceeding.

Success

Success callout. Use to confirm expected outcomes, validate a setup step, or highlight best practices.

Danger

Danger callout. Use for destructive, irreversible, or critical warnings where a mistake has significant consequences.

Custom title

Pass title="" to suppress the heading entirely:

A callout with no title — just the icon and body.

Usage

<Callout variant="warning" title="Breaking change in v3">
  The `projectId` field is now required. Requests missing it return a `422`.
</Callout>

{/* Default variant is "info"; default title is the variant label */}
<Callout>
  Something worth noting.
</Callout>

Props:

Prop	Type	Default	Description
variant	info | warning | success | danger	info	Visual style
title	string	(variant label)	Heading text; pass "" to suppress
children	ReactNode	—	Callout body — supports markdown and nested components

---

StatusBadge

Use <StatusBadge> to display a task lifecycle status inline. All seven Kabori statuses are supported, plus blocked.

All statuses

Refinement Backlog In Progress Review On Staging Done Closed Blocked

Inline usage

The AI loop detection feature is currently On Staging. The task branching UI is In Progress.

Usage

{/* Inline within a sentence */}
This feature is <StatusBadge status="done" />.

{/* With a custom label */}
<StatusBadge status="review" label="Pending review" />

Props:

Prop	Type	Default	Description
status	refinement | backlog | in-progress | review | staging | done | closed | blocked	—	Status to display
label	string	(status label)	Override the displayed text

---

Steps

Use <Steps> with <Step> children to render numbered procedural guides. The counter is CSS-driven — no manual numbering needed.

Example

Step 1

Install dependencies

Run the following command in your project root:

npm install

Step 2

Configure environment

Copy the example file and fill in your values:

cp .env.example .env

At minimum, set DATABASE_URL and SECRET_KEY.

Step 3

Start the development server

Once the environment is configured:

npm run dev

The app is now running at http://localhost:3000.

Steps without titles

Step 1

Clone the repository and change into the project directory.

Step 2

Install dependencies with npm install.

Step 3

Run npm test to verify everything works before making changes.

Usage

<Steps>
  <Step title="Step title">
    Step body content. Markdown, code blocks, and nested components are supported.
  </Step>
  <Step title="Next step">
    Each `<Step>` is automatically numbered.
  </Step>
</Steps>

Props — <Steps>: Accepts any number of <Step> children.

Props — <Step>:

Prop	Type	Default	Description
title	string	—	Step heading (optional)
children	ReactNode	—	Step body — supports markdown and nested components

---

ApiExample

Use <ApiExample> to document REST API endpoints. It renders a method badge, endpoint path, and optional tabbed request/response code panes.

GET — response only

GET/api/tasks/{id}

Response200

{
"id": "task_abc123",
"title": "Build MDX components",
"status": "in-progress",
"project_id": "proj_xyz"
}

POST — request and response

POST/api/tasks

{
"title": "My new task",
"project_id": "proj_xyz"
}

DELETE

DELETE/api/tasks/{id}

Response200

{
"deleted": true
}

Error response

GET/api/tasks/{id}Task not found

Response404

{
"error": "not_found",
"message": "Task task_xyz does not exist"
}

Usage

{/* Response only */}
<ApiExample
  method="GET"
  endpoint="/api/tasks"
  response={`[{"id": "task_1", "title": "Example"}]`}
  statusCode={200}
/>

{/* Request + response */}
<ApiExample
  method="POST"
  endpoint="/api/tasks"
  request={`{"title": "My task"}`}
  response={`{"id": "task_123", "title": "My task", "status": "refinement"}`}
  statusCode={201}
/>

Props:

Prop	Type	Default	Description
method	GET | POST | PUT | PATCH | DELETE	—	HTTP method
endpoint	string	—	API path, e.g. /api/tasks/{id}
description	string	—	Short label shown in the header bar
request	string	—	Request body code string
requestLanguage	string	json	Language identifier for the request pane
response	string	—	Response body code string
responseLanguage	string	json	Language identifier for the response pane
statusCode	number	—	HTTP status code (displayed on the response pane)

---

Tabs / TabItem

Docusaurus ships built-in <Tabs> and <TabItem> components, and they are registered globally in the Kabori docs — no imports needed.

Example

npm

npm install @kabori/sdk

Yarn

yarn add @kabori/sdk

pnpm

pnpm add @kabori/sdk

Usage

<Tabs>
  <TabItem value="unique-key" label="Tab label" default>
    Tab content here. Markdown and nested components supported.
  </TabItem>
  <TabItem value="other-key" label="Other tab">
    Other tab content.
  </TabItem>
</Tabs>

Props — <Tabs>:

Prop	Type	Description
groupId	string	Sync multiple <Tabs> blocks with the same groupId
defaultValue	string	Key of the tab to show by default
children	ReactNode	<TabItem> children

Props — <TabItem>:

Prop	Type	Description
value	string	Unique key for this tab (required)
label	string	Displayed tab label
default	boolean	Mark this tab as the default selection

---

FeatureGate

Use <FeatureGate> to gate content behind a system-level, environment-constant feature flag. The gate is resolved at build time: when the named flag is OFF, the component renders null — the content is absent from the static HTML and never enters the search index.

Build-time only

<FeatureGate> reads flag values baked in at build time via DOCS_FLAG_* env vars. It does not make runtime API calls and cannot evaluate per-organisation or per-user flags.

Example

<FeatureGate flag="billingEnabled">
  This paragraph only appears when `DOCS_FLAG_BILLING_ENABLED=1` was set at build time.

  You can put any content here, including nested components:

  <Callout variant="info" title="Billing note">
    Credits are consumed per AI-loop cycle.
  </Callout>
</FeatureGate>

Whole-page gating

Wrap the entire body of an MDX page to gate the whole page's content:

---
title: Billing
sidebar_position: 10
---

<FeatureGate flag="billingEnabled">

All page content here.

</FeatureGate>

The page file still exists so the autogenerated sidebar link remains valid and onBrokenLinks: 'throw' does not trip. When the flag is off the page renders with only the frontmatter title.

For full sidebar exclusion, see FeatureGate in the Authoring Guide.

Props:

Prop	Type	Description
flag	FlagName	Key from flags.ts (e.g. "billingEnabled")
children	ReactNode	Content to conditionally render

Available flag keys: see Feature flag conventions.