Dynamic Template

The @std/dynamic template lets you build custom UIs by composing a tree of components. Unlike other templates that render a single content type, dynamic templates give you full control over layout and structure.

The Chart and Table components here are not the same as the top-level chart / table templates. They’re implemented by separate renderers and take different prop shapes. The Chart / Table components inside an @std/dynamic tree are defined in lib/json-render/catalog.ts, while the top-level Chart and Table templates live in components/templates/ChartRenderer.tsx and TableRenderer.tsx. A payload that renders correctly in one context will not work in the other.

Examples

A basic login form using Card, Stack, Input, and Button components.

curl -X POST https://genui.sh/api/artifacts \
  -H "Authorization: Bearer $GENUI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "@std/dynamic",
    "title": "Login Form",
    "content": {
      "root": "card",
      "elements": {
        "card": {
          "key": "card",
          "type": "Card",
          "props": { "title": "Welcome back", "subtitle": "Sign in to your account" },
          "children": ["form"]
        },
        "form": {
          "key": "form",
          "type": "Stack",
          "props": { "direction": "vertical", "gap": "md" },
          "children": ["emailInput", "passwordInput", "submitBtn"]
        },
        "emailInput": {
          "key": "emailInput",
          "type": "Input",
          "props": { "label": "Email", "type": "email", "placeholder": "you@example.com" }
        },
        "passwordInput": {
          "key": "passwordInput",
          "type": "Input",
          "props": { "label": "Password", "type": "password", "placeholder": "Enter your password" }
        },
        "submitBtn": {
          "key": "submitBtn",
          "type": "Button",
          "props": { "text": "Sign in", "variant": "primary", "fullWidth": true }
        }
      }
    }
  }'

import requests
import os

response = requests.post(
    "https://genui.sh/api/artifacts",
    headers={"Authorization": f"Bearer {os.environ['GENUI_API_KEY']}"},
    json={
        "template": "@std/dynamic",
        "title": "Login Form",
        "content": {
            "root": "card",
            "elements": {
                "card": {
                    "key": "card",
                    "type": "Card",
                    "props": {"title": "Welcome back", "subtitle": "Sign in to your account"},
                    "children": ["form"]
                },
                "form": {
                    "key": "form",
                    "type": "Stack",
                    "props": {"direction": "vertical", "gap": "md"},
                    "children": ["emailInput", "passwordInput", "submitBtn"]
                },
                "emailInput": {
                    "key": "emailInput",
                    "type": "Input",
                    "props": {"label": "Email", "type": "email", "placeholder": "you@example.com"}
                },
                "passwordInput": {
                    "key": "passwordInput",
                    "type": "Input",
                    "props": {"label": "Password", "type": "password", "placeholder": "Enter your password"}
                },
                "submitBtn": {
                    "key": "submitBtn",
                    "type": "Button",
                    "props": {"text": "Sign in", "variant": "primary", "fullWidth": True}
                }
            }
        }
    }
)

const response = await fetch('https://genui.sh/api/artifacts', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.GENUI_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    template: '@std/dynamic',
    title: 'Login Form',
    content: {
      root: 'card',
      elements: {
        card: {
          key: 'card',
          type: 'Card',
          props: { title: 'Welcome back', subtitle: 'Sign in to your account' },
          children: ['form']
        },
        form: {
          key: 'form',
          type: 'Stack',
          props: { direction: 'vertical', gap: 'md' },
          children: ['emailInput', 'passwordInput', 'submitBtn']
        },
        emailInput: {
          key: 'emailInput',
          type: 'Input',
          props: { label: 'Email', type: 'email', placeholder: 'you@example.com' }
        },
        passwordInput: {
          key: 'passwordInput',
          type: 'Input',
          props: { label: 'Password', type: 'password', placeholder: 'Enter your password' }
        },
        submitBtn: {
          key: 'submitBtn',
          type: 'Button',
          props: { text: 'Sign in', variant: 'primary', fullWidth: true }
        }
      }
    }
  })
});

Comprehensive Example: Analytics Dashboard

A full dashboard with metrics, charts, tables, and activity feed.

curl -X POST https://genui.sh/api/artifacts \
  -H "Authorization: Bearer $GENUI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "@std/dynamic",
    "title": "Analytics Dashboard",
    "content": {
      "root": "dashboard",
      "elements": {
        "dashboard": {
          "key": "dashboard",
          "type": "Stack",
          "props": { "direction": "vertical", "gap": "lg" },
          "children": ["header", "metricsGrid", "chartsGrid", "bottomSection"]
        },
        "header": {
          "key": "header",
          "type": "Stack",
          "props": { "direction": "horizontal", "justify": "between", "align": "center" },
          "children": ["title", "headerBadge"]
        },
        "title": {
          "key": "title",
          "type": "Heading",
          "props": { "level": "h1", "text": "Dashboard Overview" }
        },
        "headerBadge": {
          "key": "headerBadge",
          "type": "Badge",
          "props": { "text": "Live", "variant": "success" }
        },
        "metricsGrid": {
          "key": "metricsGrid",
          "type": "Grid",
          "props": { "columns": 4, "gap": "md" },
          "children": ["metric1", "metric2", "metric3", "metric4"]
        },
        "metric1": {
          "key": "metric1",
          "type": "Metric",
          "props": { "label": "Total Revenue", "value": "$45,231", "trend": "up", "trendValue": "+20.1%" }
        },
        "metric2": {
          "key": "metric2",
          "type": "Metric",
          "props": { "label": "Active Users", "value": "2,350", "trend": "up", "trendValue": "+15%" }
        },
        "metric3": {
          "key": "metric3",
          "type": "Metric",
          "props": { "label": "Conversion Rate", "value": "3.2%", "trend": "down", "trendValue": "-0.4%" }
        },
        "metric4": {
          "key": "metric4",
          "type": "Metric",
          "props": { "label": "Avg Order Value", "value": "$89", "trend": "neutral", "trendValue": "0%" }
        },
        "chartsGrid": {
          "key": "chartsGrid",
          "type": "Grid",
          "props": { "columns": 2, "gap": "md" },
          "children": ["revenueCard", "trafficCard"]
        },
        "revenueCard": {
          "key": "revenueCard",
          "type": "Card",
          "props": { "title": "Revenue Over Time" },
          "children": ["revenueChart"]
        },
        "revenueChart": {
          "key": "revenueChart",
          "type": "Chart",
          "props": {
            "type": "area",
            "data": [
              { "month": "Jan", "revenue": 4000 },
              { "month": "Feb", "revenue": 3000 },
              { "month": "Mar", "revenue": 5000 },
              { "month": "Apr", "revenue": 4500 },
              { "month": "May", "revenue": 6000 },
              { "month": "Jun", "revenue": 5500 }
            ],
            "config": {
              "categoryKey": "month",
              "series": [{ "key": "revenue", "label": "Revenue", "color": "#6366f1" }]
            }
          }
        },
        "trafficCard": {
          "key": "trafficCard",
          "type": "Card",
          "props": { "title": "Traffic Sources" },
          "children": ["trafficChart"]
        },
        "trafficChart": {
          "key": "trafficChart",
          "type": "Chart",
          "props": {
            "type": "donut",
            "data": [
              { "source": "Organic", "value": 45 },
              { "source": "Direct", "value": 30 },
              { "source": "Referral", "value": 15 },
              { "source": "Social", "value": 10 }
            ],
            "config": {
              "categoryKey": "source",
              "series": [{ "key": "value" }]
            }
          }
        },
        "bottomSection": {
          "key": "bottomSection",
          "type": "Grid",
          "props": { "columns": 2, "gap": "md" },
          "children": ["ordersCard", "activityCard"]
        },
        "ordersCard": {
          "key": "ordersCard",
          "type": "Card",
          "props": { "title": "Recent Orders" },
          "children": ["ordersTable"]
        },
        "ordersTable": {
          "key": "ordersTable",
          "type": "Table",
          "props": {
            "columns": [
              { "key": "id", "header": "Order ID" },
              { "key": "customer", "header": "Customer" },
              { "key": "amount", "header": "Amount", "align": "right" },
              { "key": "status", "header": "Status" }
            ],
            "rows": [
              { "id": "#3210", "customer": "Alice Johnson", "amount": "$250.00", "status": "Completed" },
              { "id": "#3209", "customer": "Bob Smith", "amount": "$125.00", "status": "Processing" },
              { "id": "#3208", "customer": "Carol White", "amount": "$89.00", "status": "Completed" }
            ],
            "config": { "striped": true }
          }
        },
        "activityCard": {
          "key": "activityCard",
          "type": "Card",
          "props": { "title": "Recent Activity" },
          "children": ["activityList"]
        },
        "activityList": {
          "key": "activityList",
          "type": "List",
          "props": {
            "items": [
              { "text": "New user registered", "description": "2 minutes ago" },
              { "text": "Order #3210 completed", "description": "15 minutes ago" },
              { "text": "Payment received", "description": "1 hour ago" },
              { "text": "New review submitted", "description": "2 hours ago" }
            ]
          }
        }
      }
    }
  }'

import requests
import os

response = requests.post(
    "https://genui.sh/api/artifacts",
    headers={"Authorization": f"Bearer {os.environ['GENUI_API_KEY']}"},
    json={
        "template": "@std/dynamic",
        "title": "Analytics Dashboard",
        "content": {
            "root": "dashboard",
            "elements": {
                "dashboard": {
                    "key": "dashboard",
                    "type": "Stack",
                    "props": {"direction": "vertical", "gap": "lg"},
                    "children": ["header", "metricsGrid", "chartsGrid", "bottomSection"]
                },
                "header": {
                    "key": "header",
                    "type": "Stack",
                    "props": {"direction": "horizontal", "justify": "between", "align": "center"},
                    "children": ["title", "headerBadge"]
                },
                "title": {
                    "key": "title",
                    "type": "Heading",
                    "props": {"level": "h1", "text": "Dashboard Overview"}
                },
                "headerBadge": {
                    "key": "headerBadge",
                    "type": "Badge",
                    "props": {"text": "Live", "variant": "success"}
                },
                "metricsGrid": {
                    "key": "metricsGrid",
                    "type": "Grid",
                    "props": {"columns": 4, "gap": "md"},
                    "children": ["metric1", "metric2", "metric3", "metric4"]
                },
                "metric1": {
                    "key": "metric1",
                    "type": "Metric",
                    "props": {"label": "Total Revenue", "value": "$45,231", "trend": "up", "trendValue": "+20.1%"}
                },
                "metric2": {
                    "key": "metric2",
                    "type": "Metric",
                    "props": {"label": "Active Users", "value": "2,350", "trend": "up", "trendValue": "+15%"}
                },
                "metric3": {
                    "key": "metric3",
                    "type": "Metric",
                    "props": {"label": "Conversion Rate", "value": "3.2%", "trend": "down", "trendValue": "-0.4%"}
                },
                "metric4": {
                    "key": "metric4",
                    "type": "Metric",
                    "props": {"label": "Avg Order Value", "value": "$89", "trend": "neutral", "trendValue": "0%"}
                },
                "chartsGrid": {
                    "key": "chartsGrid",
                    "type": "Grid",
                    "props": {"columns": 2, "gap": "md"},
                    "children": ["revenueCard", "trafficCard"]
                },
                "revenueCard": {
                    "key": "revenueCard",
                    "type": "Card",
                    "props": {"title": "Revenue Over Time"},
                    "children": ["revenueChart"]
                },
                "revenueChart": {
                    "key": "revenueChart",
                    "type": "Chart",
                    "props": {
                        "type": "area",
                        "data": [
                            {"month": "Jan", "revenue": 4000},
                            {"month": "Feb", "revenue": 3000},
                            {"month": "Mar", "revenue": 5000},
                            {"month": "Apr", "revenue": 4500},
                            {"month": "May", "revenue": 6000},
                            {"month": "Jun", "revenue": 5500}
                        ],
                        "config": {
                            "categoryKey": "month",
                            "series": [{"key": "revenue", "label": "Revenue", "color": "#6366f1"}]
                        }
                    }
                },
                "trafficCard": {
                    "key": "trafficCard",
                    "type": "Card",
                    "props": {"title": "Traffic Sources"},
                    "children": ["trafficChart"]
                },
                "trafficChart": {
                    "key": "trafficChart",
                    "type": "Chart",
                    "props": {
                        "type": "donut",
                        "data": [
                            {"source": "Organic", "value": 45},
                            {"source": "Direct", "value": 30},
                            {"source": "Referral", "value": 15},
                            {"source": "Social", "value": 10}
                        ],
                        "config": {
                            "categoryKey": "source",
                            "series": [{"key": "value"}]
                        }
                    }
                },
                "bottomSection": {
                    "key": "bottomSection",
                    "type": "Grid",
                    "props": {"columns": 2, "gap": "md"},
                    "children": ["ordersCard", "activityCard"]
                },
                "ordersCard": {
                    "key": "ordersCard",
                    "type": "Card",
                    "props": {"title": "Recent Orders"},
                    "children": ["ordersTable"]
                },
                "ordersTable": {
                    "key": "ordersTable",
                    "type": "Table",
                    "props": {
                        "columns": [
                            {"key": "id", "header": "Order ID"},
                            {"key": "customer", "header": "Customer"},
                            {"key": "amount", "header": "Amount", "align": "right"},
                            {"key": "status", "header": "Status"}
                        ],
                        "rows": [
                            {"id": "#3210", "customer": "Alice Johnson", "amount": "$250.00", "status": "Completed"},
                            {"id": "#3209", "customer": "Bob Smith", "amount": "$125.00", "status": "Processing"},
                            {"id": "#3208", "customer": "Carol White", "amount": "$89.00", "status": "Completed"}
                        ],
                        "config": {"striped": True}
                    }
                },
                "activityCard": {
                    "key": "activityCard",
                    "type": "Card",
                    "props": {"title": "Recent Activity"},
                    "children": ["activityList"]
                },
                "activityList": {
                    "key": "activityList",
                    "type": "List",
                    "props": {
                        "items": [
                            {"text": "New user registered", "description": "2 minutes ago"},
                            {"text": "Order #3210 completed", "description": "15 minutes ago"},
                            {"text": "Payment received", "description": "1 hour ago"},
                            {"text": "New review submitted", "description": "2 hours ago"}
                        ]
                    }
                }
            }
        }
    }
)

const response = await fetch('https://genui.sh/api/artifacts', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.GENUI_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    template: '@std/dynamic',
    title: 'Analytics Dashboard',
    content: {
      root: 'dashboard',
      elements: {
        dashboard: {
          key: 'dashboard',
          type: 'Stack',
          props: { direction: 'vertical', gap: 'lg' },
          children: ['header', 'metricsGrid', 'chartsGrid', 'bottomSection']
        },
        header: {
          key: 'header',
          type: 'Stack',
          props: { direction: 'horizontal', justify: 'between', align: 'center' },
          children: ['title', 'headerBadge']
        },
        title: {
          key: 'title',
          type: 'Heading',
          props: { level: 'h1', text: 'Dashboard Overview' }
        },
        headerBadge: {
          key: 'headerBadge',
          type: 'Badge',
          props: { text: 'Live', variant: 'success' }
        },
        metricsGrid: {
          key: 'metricsGrid',
          type: 'Grid',
          props: { columns: 4, gap: 'md' },
          children: ['metric1', 'metric2', 'metric3', 'metric4']
        },
        metric1: {
          key: 'metric1',
          type: 'Metric',
          props: { label: 'Total Revenue', value: '$45,231', trend: 'up', trendValue: '+20.1%' }
        },
        metric2: {
          key: 'metric2',
          type: 'Metric',
          props: { label: 'Active Users', value: '2,350', trend: 'up', trendValue: '+15%' }
        },
        metric3: {
          key: 'metric3',
          type: 'Metric',
          props: { label: 'Conversion Rate', value: '3.2%', trend: 'down', trendValue: '-0.4%' }
        },
        metric4: {
          key: 'metric4',
          type: 'Metric',
          props: { label: 'Avg Order Value', value: '$89', trend: 'neutral', trendValue: '0%' }
        },
        chartsGrid: {
          key: 'chartsGrid',
          type: 'Grid',
          props: { columns: 2, gap: 'md' },
          children: ['revenueCard', 'trafficCard']
        },
        revenueCard: {
          key: 'revenueCard',
          type: 'Card',
          props: { title: 'Revenue Over Time' },
          children: ['revenueChart']
        },
        revenueChart: {
          key: 'revenueChart',
          type: 'Chart',
          props: {
            type: 'area',
            data: [
              { month: 'Jan', revenue: 4000 },
              { month: 'Feb', revenue: 3000 },
              { month: 'Mar', revenue: 5000 },
              { month: 'Apr', revenue: 4500 },
              { month: 'May', revenue: 6000 },
              { month: 'Jun', revenue: 5500 }
            ],
            config: {
              categoryKey: 'month',
              series: [{ key: 'revenue', label: 'Revenue', color: '#6366f1' }]
            }
          }
        },
        trafficCard: {
          key: 'trafficCard',
          type: 'Card',
          props: { title: 'Traffic Sources' },
          children: ['trafficChart']
        },
        trafficChart: {
          key: 'trafficChart',
          type: 'Chart',
          props: {
            type: 'donut',
            data: [
              { source: 'Organic', value: 45 },
              { source: 'Direct', value: 30 },
              { source: 'Referral', value: 15 },
              { source: 'Social', value: 10 }
            ],
            config: {
              categoryKey: 'source',
              series: [{ key: 'value' }]
            }
          }
        },
        bottomSection: {
          key: 'bottomSection',
          type: 'Grid',
          props: { columns: 2, gap: 'md' },
          children: ['ordersCard', 'activityCard']
        },
        ordersCard: {
          key: 'ordersCard',
          type: 'Card',
          props: { title: 'Recent Orders' },
          children: ['ordersTable']
        },
        ordersTable: {
          key: 'ordersTable',
          type: 'Table',
          props: {
            columns: [
              { key: 'id', header: 'Order ID' },
              { key: 'customer', header: 'Customer' },
              { key: 'amount', header: 'Amount', align: 'right' },
              { key: 'status', header: 'Status' }
            ],
            rows: [
              { id: '#3210', customer: 'Alice Johnson', amount: '$250.00', status: 'Completed' },
              { id: '#3209', customer: 'Bob Smith', amount: '$125.00', status: 'Processing' },
              { id: '#3208', customer: 'Carol White', amount: '$89.00', status: 'Completed' }
            ],
            config: { striped: true }
          }
        },
        activityCard: {
          key: 'activityCard',
          type: 'Card',
          props: { title: 'Recent Activity' },
          children: ['activityList']
        },
        activityList: {
          key: 'activityList',
          type: 'List',
          props: {
            items: [
              { text: 'New user registered', description: '2 minutes ago' },
              { text: 'Order #3210 completed', description: '15 minutes ago' },
              { text: 'Payment received', description: '1 hour ago' },
              { text: 'New review submitted', description: '2 hours ago' }
            ]
          }
        }
      }
    }
  })
});

Example Response

{
  "id": "art_dyn_abc123",
  "template": "@std/dynamic",
  "title": "Analytics Dashboard",
  "status": "active",
  "url": "https://genui.sh/a/art_dyn_abc123",
  "createdAt": "2024-01-15T12:00:00Z"
}

Content Schema

string

required

The key of the root element in the elements map. This is where rendering starts.

object

required

A flat map of element definitions keyed by unique string IDs. Each element defines its type, props, and optional children.

Element Structure

Each element in the elements map has this structure:

{
  "key": "uniqueId",
  "type": "ComponentName",
  "props": { ... },
  "children": ["childKey1", "childKey2"]
}

Field	Type	Required	Description
`key`	string	Yes	Unique identifier matching the map key
`type`	string	Yes	Component type (see supported components below)
`props`	object	Yes	Component-specific properties
`children`	string[]	No	Array of child element keys (for layout components)

Supported Components

The dynamic template supports 21 components across 5 categories.

Layout Components

Components that contain and arrange other components.

Card

Container with header, content area, and optional footer.

Prop	Type	Required	Default
`title`	string \| null	No	-
`subtitle`	string \| null	No	-
`footer`	string \| null	No	-

Has Children: Yes

Grid

Responsive grid layout with 1-4 columns.

Prop	Type	Required	Default
`columns`	number (1-4)	No	2
`gap`	”sm” \| “md” \| “lg”	No	”md”

Has Children: Yes

Stack

Flex container for horizontal or vertical layouts.

Prop	Type	Required	Default
`direction`	”horizontal” \| “vertical”	No	”vertical”
`gap`	”sm” \| “md” \| “lg”	No	”md”
`align`	”start” \| “center” \| “end” \| “stretch”	No	”stretch”
`justify`	”start” \| “center” \| “end” \| “between” \| “around”	No	”start”

Has Children: Yes

Tabs

Tabbed navigation with content panels.

Prop	Type	Required	Default
`tabs`	array of `{id, label}`	Yes	-
`defaultTab`	string \| null	No	-

Has Children: Yes (children must have matching tabId props)

Content Components

Components for displaying text and messages.

Heading

Typography heading (h1-h4).

Prop	Type	Required	Default
`level`	”h1” \| “h2” \| “h3” \| “h4”	No	”h2”
`text`	string	Yes	-

Text

Styled paragraph text.

Prop	Type	Required	Default
`text`	string	Yes	-
`variant`	”default” \| “muted” \| “lead”	No	”default”

Markdown

Rich markdown content with GitHub Flavored Markdown support.

Prop	Type	Required	Default
`content`	string	Yes	-

Alert

Status message with icon.

Prop	Type	Required	Default
`variant`	”info” \| “success” \| “warning” \| “error”	No	”info”
`title`	string \| null	No	-
`message`	string	Yes	-

Divider

Horizontal separator, optionally with centered label.

Prop	Type	Required	Default
`label`	string \| null	No	-

Data Components

Components for displaying data and metrics.

Chart

Chart visualization (line/bar/area/pie/donut).

Prop	Type	Required	Default
`type`	”line” \| “bar” \| “area” \| “pie” \| “donut”	Yes	-
`title`	string \| null	No	-
`description`	string \| null	No	-
`data`	array of records	Yes	-
`config`	object \| null	No	-
`footer`	string \| null	No	-

Config object:

Field	Type	Default
`categoryKey`	string	”name”
`series`	array of `{key, label, color}`	-
`showGrid`	boolean	true
`showLegend`	boolean	true
`stacked`	boolean	false
`horizontal`	boolean	false

Table

Data table with optional search, pagination, sorting, and export.

Prop	Type	Required	Default
`caption`	string \| null	No	-
`columns`	array of column definitions	Yes	-
`rows`	array of records	Yes	-
`config`	object \| null	No	-

Column definition:

Field	Type	Default
`key`	string	-
`header`	string	-
`align`	”left” \| “center” \| “right"	"left”
`sortable`	boolean	false

Config object:

Field	Type	Default
`enableSearch`	boolean	false
`enablePagination`	boolean	false
`enableExport`	boolean	false
`pageSize`	number	10
`striped`	boolean	false

Metric

KPI metric with value, trend indicator, and label.

Prop	Type	Required	Default
`label`	string	Yes	-
`value`	string	Yes	-
`trend`	”up” \| “down” \| “neutral” \| null	No	-
`trendValue`	string \| null	No	-
`description`	string \| null	No	-
`icon`	string \| null	No	-

Badge

Status badge or tag indicator.

Prop	Type	Required	Default
`text`	string	Yes	-
`variant`	”default” \| “secondary” \| “success” \| “warning” \| “error” \| “outline”	No	”default”

Progress

Progress bar with percentage.

Prop	Type	Required	Default
`value`	number (0-100)	Yes	-
`label`	string \| null	No	-
`showValue`	boolean	No	false
`variant`	”default” \| “success” \| “warning” \| “error”	No	”default”

List

Ordered or unordered list with optional icons.

Prop	Type	Required	Default
`items`	array of `{text, icon?, description?}`	Yes	-
`ordered`	boolean	No	false

Avatar

User avatar with image or initials fallback.

Prop	Type	Required	Default
`src`	string \| null	No	-
`alt`	string	Yes	-
`fallback`	string	Yes	-
`size`	”sm” \| “md” \| “lg”	No	”md”

Interactive Components

Components for user interaction and navigation.

Accordion

Collapsible accordion sections.

Prop	Type	Required	Default
`items`	array of `{title, content}`	Yes	-
`multiple`	boolean	No	false

Link

External link (opens in new tab).

Prop	Type	Required	Default
`text`	string	Yes	-
`href`	string	Yes	-
`variant`	”default” \| “muted”	No	”default”

Input

Text input field with optional label and icon.

Prop	Type	Required	Default
`label`	string \| null	No	-
`placeholder`	string \| null	No	-
`type`	”text” \| “email” \| “password” \| “number” \| “tel” \| “url”	No	”text”
`disabled`	boolean	No	false
`icon`	string \| null	No	-

Form Components

Components for building forms.

Button

Clickable button with variants.

Prop	Type	Required	Default
`text`	string	Yes	-
`variant`	”primary” \| “secondary” \| “outline” \| “ghost”	No	”primary”
`size`	”sm” \| “md” \| “lg”	No	”md”
`disabled`	boolean	No	false
`fullWidth`	boolean	No	false

FormField

Form field wrapper with label, description, and error message.

Prop	Type	Required	Default
`label`	string \| null	No	-
`description`	string \| null	No	-
`error`	string \| null	No	-
`required`	boolean	No	false

Has Children: Yes

Use Cases

Dashboards: Analytics, admin panels, monitoring interfaces
Forms: Multi-step wizards, settings pages, data entry
Reports: Custom layouts combining metrics, charts, and tables
Landing Pages: Marketing content with flexible layouts
Documentation: Interactive guides with accordions and tabs

Getting Started

Templates

Examples

Comprehensive Example: Analytics Dashboard

Example Response

Content Schema

Element Structure

Supported Components

Layout Components

Card

Grid

Stack

Tabs

Content Components

Heading

Text

Markdown

Alert

Divider

Data Components

Chart

Table

Metric

Badge

Progress

List

Avatar

Interactive Components

Accordion

Link

Input

Form Components

Button

FormField

Use Cases

​Examples

​Simple Example: Login Form

​Comprehensive Example: Analytics Dashboard

​Example Response

​Content Schema

​Element Structure

​Supported Components

​Layout Components

​Card

​Grid

​Stack

​Tabs

​Content Components

​Heading

​Text

​Markdown

​Alert

​Divider

​Data Components

​Chart

​Table

​Metric

​Badge

​Progress

​List

​Avatar

​Interactive Components

​Accordion

​Link

​Input

​Form Components

​Button

​FormField

​Use Cases

Examples

Simple Example: Login Form

Comprehensive Example: Analytics Dashboard

Example Response

Content Schema

Element Structure

Supported Components

Layout Components

Card

Grid

Stack

Tabs

Content Components

Heading

Text

Markdown

Alert

Divider

Data Components

Chart

Table

Metric

Badge

Progress

List

Avatar

Interactive Components

Accordion

Link

Input

Form Components

Button

FormField

Use Cases