Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.outkit.dev/llms.txt

Use this file to discover all available pages before exploring further.

Outkit can detect and generate 50+ component types from AI text. Each component has a typed props schema — structured data your frontend renders as interactive UI.

​
Core Components (Free Plan)

These components are available on all plans.

​
table

Structured data in rows and columns. Triggered by markdown tables, comparisons, or multi-attribute data. 
{
  "component": "table",
  "props": {
    "columns": ["Framework", "Stars", "Language"],
    "rows": [
      { "Framework": "React", "Stars": "220k", "Language": "JavaScript" },
      { "Framework": "Vue", "Stars": "207k", "Language": "JavaScript" }
    ],
    "sortable": true,
    "caption": "Frontend Framework Comparison"
  }
}
PropTypeDescription
columnsstring[]Column headers
rowsRecord<string, string | number>[]Row data keyed by column name
sortableboolean?Enable column sorting (default: true)
highlightsRecord<string, (string | number)[]>?Column values to emphasize
captionstring?Table caption

​
card

Single entity with structured attributes — a person, company, product, or concept. 
{
  "component": "card",
  "props": {
    "heading": "React",
    "subheading": "Frontend Library",
    "items": [
      { "label": "Stars", "value": "220k" },
      { "label": "Language", "value": "JavaScript" },
      { "label": "Maintained by", "value": "Meta" }
    ],
    "variant": "bordered"
  }
}
PropTypeDescription
headingstring?Card title
subheadingstring?Subtitle
items{label, value, icon?, href?}[]Key-value attributes
footerstring?Footer text
variant"default" | "bordered" | "elevated"Visual style

​
alert

Warnings, caveats, prerequisites, and important notices. 
{
  "component": "alert",
  "props": {
    "variant": "warning",
    "title": "Breaking Change",
    "message": "This migration requires downtime. Schedule accordingly."
  }
}
PropTypeDescription
variant"info" | "warning" | "error" | "success" | "tip"Alert type
titlestring?Alert heading
messagestringAlert body text
itemsstring[]?Bullet points within the alert
dismissibleboolean?Allow user to dismiss

​
checkbox

Checklists, to-do items, and step-by-step completion tracking. 
{
  "component": "checkbox",
  "props": {
    "title": "Setup Checklist",
    "items": [
      { "id": "deps", "label": "Install dependencies" },
      { "id": "env", "label": "Configure environment variables" },
      { "id": "db", "label": "Run database migrations" }
    ],
    "showProgress": true
  }
}
PropTypeDescription
titlestring?Checklist title
items{id, label, description?, checked?}[]Checklist items
showProgressboolean?Show completion progress bar

​
Extended Components (Pro Plan)

These components are available on Pro plans.

​
accordion

Collapsible FAQ-style sections. Triggered by Q&A patterns, definitions, or grouped explanations. 
{
  "component": "accordion",
  "props": {
    "items": [
      { "id": "q1", "title": "What is Outkit?", "content": "Outkit transforms AI text..." },
      { "id": "q2", "title": "How does pricing work?", "content": "We offer free and pro plans..." }
    ],
    "type": "single"
  }
}
PropTypeDescription
items{id, title, content, defaultOpen?, icon?}[]Sections
type"single" | "multiple"Allow one or many open at once
collapsibleboolean?Allow closing all sections

​
tabs

Parallel alternatives, language-specific code examples, or category views. 
{
  "component": "tabs",
  "props": {
    "tabs": [
      { "id": "python", "label": "Python", "content": "```python\nimport requests\n```" },
      { "id": "node", "label": "Node.js", "content": "```js\nfetch('...')\n```" }
    ],
    "variant": "underline"
  }
}
PropTypeDescription
tabs{id, label, icon?, content}[]Tab panels
defaultTabstring?ID of initially active tab
variant"underline" | "pills" | "outline"Visual style

​
steps

Numbered processes, workflows, and setup guides. 
{
  "component": "steps",
  "props": {
    "items": [
      { "title": "Install", "content": "Run `npm install @outkit-dev/react`" },
      { "title": "Configure", "content": "Add your API key to `.env`" },
      { "title": "Render", "content": "Replace `<Markdown>` with `<AIRenderer>`" }
    ]
  }
}

​
timeline

Chronological events, milestones, and version history. 
{
  "component": "timeline",
  "props": {
    "items": [
      { "date": "2024-01", "title": "v1.0 Launch", "content": "Initial release" },
      { "date": "2024-06", "title": "v2.0", "content": "Added streaming support" }
    ]
  }
}

​
progress

Scores, ratings, skill levels, and completion percentages. 
{
  "component": "progress",
  "props": {
    "items": [
      { "label": "JavaScript", "value": 90, "color": "success" },
      { "label": "Python", "value": 75, "color": "default" },
      { "label": "Rust", "value": 40, "color": "warning" }
    ],
    "showValue": true,
    "size": "md"
  }
}
PropTypeDescription
items{label, value, maxLabel?, color?}[]Progress bars
showValueboolean?Display percentage values
size"sm" | "md" | "lg"Bar size

​
Charts

Outkit supports multiple chart types for numeric data, trends, and distributions.
Trends over time, growth metrics, performance data.
{
  "component": "line",
  "props": {
    "data": {
      "labels": ["Jan", "Feb", "Mar", "Apr"],
      "datasets": [
        { "label": "Revenue", "values": [100, 150, 130, 200] }
      ]
    },
    "xAxis": { "label": "Month" },
    "yAxis": { "label": "Revenue ($k)" }
  }
}
Category comparisons, rankings, survey results.
{
  "component": "bar",
  "props": {
    "data": {
      "labels": ["React", "Vue", "Svelte"],
      "datasets": [
        { "label": "GitHub Stars (k)", "values": [220, 207, 78] }
      ]
    },
    "stacked": false
  }
}
Part-to-whole proportions, market share, percentage breakdowns.
{
  "component": "pie",
  "props": {
    "data": {
      "labels": ["Chrome", "Safari", "Firefox", "Other"],
      "datasets": [
        { "label": "Market Share", "values": [65, 19, 8, 8] }
      ]
    },
    "legend": true
  }
}
Volume and cumulative data, stacked distributions.
Multi-attribute comparisons, skill assessments.
Progress toward goals, KPI gauges, completion metrics.
All chart types share a common props structure:
PropTypeDescription
data.labelsstring[]Axis labels or category names
data.datasets{label, values, color?}[]Data series
xAxis{label?, type?}?X-axis configuration
yAxis{label?, min?, max?}?Y-axis configuration
legendboolean?Show legend
stackedboolean?Stack multiple datasets

​
More Components

proscons

Advantages vs disadvantages comparisons

diff

Code changes, before/after, patch-style diffs

metadata

Structured metadata lists, search results

collapse

Single expandable section, “show more” content

callout

Highlighted excerpts, quotes, key insights

banner

Meta warnings, disclaimers, system messages

gallery

Multiple images, screenshots, diagrams

badge

Status badges, tags, labels

compare

Side-by-side technology/product comparisons

tree

Branching decision flows, troubleshooting

form

Multi-field forms, surveys, follow-up questions

json

Raw JSON viewer, API responses, collapsible tree

quiz

Knowledge checks, trivia, assessments

calc

Estimators, ROI calculators, loan calculators

embed

YouTube, CodePen, Figma embeds

countdown

Deadlines, time-limited events
The full list of available components depends on your plan. Use the GET /components endpoint to see what’s available for your account.