> ## Documentation Index
> Fetch the complete documentation index at: https://genui.sh/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Dynamic Template

> Build any UI with composable components

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.

<Note>
  **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](/templates/chart) and [Table](/templates/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.
</Note>

## Examples

### Simple Example: Login Form

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

<CodeGroup>
  ```bash curl theme={null}
  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 }
          }
        }
      }
    }'
  ```

  ```python Python theme={null}
  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}
                  }
              }
          }
      }
  )
  ```

  ```javascript JavaScript theme={null}
  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 }
          }
        }
      }
    })
  });
  ```
</CodeGroup>

### Comprehensive Example: Analytics Dashboard

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

<CodeGroup>
  ```bash curl theme={null}
  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" }
              ]
            }
          }
        }
      }
    }'
  ```

  ```python Python theme={null}
  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"}
                          ]
                      }
                  }
              }
          }
      }
  )
  ```

  ```javascript JavaScript theme={null}
  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' }
              ]
            }
          }
        }
      }
    })
  });
  ```
</CodeGroup>

### Example Response

```json theme={null}
{
  "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

<ParamField body="content.root" type="string" required>
  The key of the root element in the elements map. This is where rendering starts.
</ParamField>

<ParamField body="content.elements" type="object" required>
  A flat map of element definitions keyed by unique string IDs. Each element defines its type, props, and optional children.
</ParamField>

### Element Structure

Each element in the `elements` map has this structure:

```json theme={null}
{
  "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