{
"format": "htmdx@2",
"runtime": "@wix/htmdx@4.13.0",
"note": "Body values: markdown passes raw Markdown and does not allow nested tags; htmdx allows Markdown, HTML, and nested registered component tags; none allows no body. Every component accepts class, id, aria-*, and data-* attributes; all other props must be declared. Declared string values stay strings, number values must be finite numbers, boolean values use a bare attribute or true/false, and JSON values must parse as valid JSON before declared constraints run. HTMDX is declarative: imports, exports, brace expressions, event handlers, and function-valued props are not allowed. A fenced code block tagged mermaid renders as a diagram in the browser; every other fence keeps its language as a class.",
"components": [
{
"name": "Audience",
"purpose": "Show target segments from one or more `- item` rows. Format each item as `**Persona — Type:** Description · metrics: value — caption; … · priority: High|Medium|Unmeasured`; Type is Primary, Secondary, or Secondary · Risk.",
"example": "\n- **Self-Creator · Custom Goods Merchant — Primary:** Sells made-to-order products and needs a file from the shopper at purchase. · metrics: ~19.8K — stores above $50K GPV; 4.85% — of ~408K active stores · priority: High\n- **Partner / Freelancer — Secondary:** Hits the upload gap on every relevant client build. · priority: Medium\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "BulletList",
"purpose": "Present items as a bulleted list inside a card. Write one or more `- link - text` rows; the part before the first \" - \" renders as a primary-colored link, the rest as plain text.",
"example": "\n- Catalog V3 Modifiers - support only FREE_TEXT and choice types today\n- Media Manager - already exposes upload URLs the runtime can reuse\n- Storefront FileUploader - exists but is not wired into product options\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "Callout",
"purpose": "Emphasize an important note, warning, or takeaway using a Markdown body.",
"example": "\n**Important:** Validate the artifact before publishing.\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "ChartArea",
"purpose": "Compare non-negative numeric values written as '- label: number' rows; currently rendered with the shared bar-chart visualization.",
"example": "\n- January: 18\n- February: 27\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "ChartBar",
"purpose": "Compare non-negative numeric values with a bar chart using '- label: number' rows.",
"example": "\n- Free users: 48\n- Paid users: 12\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "ChartLine",
"purpose": "Compare non-negative numeric values written as '- label: number' rows; currently rendered with the shared bar-chart visualization.",
"example": "\n- Week 1: 8\n- Week 2: 13\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "ChartPie",
"purpose": "Compare non-negative numeric values written as '- label: number' rows; currently rendered with the shared bar-chart visualization.",
"example": "\n- Direct: 62\n- Referral: 38\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "Compare",
"purpose": "Place alternatives or contrasting concepts side by side. Write one or more `- item` rows; use `**Title:** details` to label a card.",
"example": "\n- **Current:** Manual component discovery\n- **Proposed:** Versioned manifest\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "DataTable",
"purpose": "Display structured records written as a GFM table with a non-empty header, separator row, and at least one consistently sized data row.",
"example": "\n| Plan | Users |\n| --- | ---: |\n| Free | 48 |\n| Pro | 12 |\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "DecisionMatrix",
"purpose": "Compare options as GFM-table columns against criteria as rows. Put a ✓ in the chosen option header to highlight it. A body cell may start with `[blue]`, `[green]`, `[amber]`, `[red]`, `[gray]`, or `[purple]` to show a colored status dot.",
"example": "\n| Criterion | A — Text workaround | B — Native upload ✓ | C — Partner app |\n| --- | --- | --- | --- |\n| User fit | Partial | [green] Fully solves the intent | Partial |\n| Build effort | [green] Low | [amber] Medium | [red] High |\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "DecisionTable",
"purpose": "Present decision criteria and outcomes written as '- label: value' rows, splitting each row at its first colon.",
"example": "\n- Scope: Built-in components only\n- Delivery: Versioned manifest\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "Evidence",
"purpose": "List evidence that supports the surrounding analysis. Write one or more `- item` rows; use `**Title:** details` to label an evidence card.",
"example": "\n- **Runtime:** The allowlist currently lives in implementation code.\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "ExecutiveSummary",
"purpose": "Summarize the artifact’s most important conclusion or recommendation.",
"example": "\nShip **one HTML file** with editable HTMDX source.\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "Finding",
"purpose": "Present key findings as a scannable card list. Write one or more `- item` rows; use `**Title:** details` to label a finding.",
"example": "\n- **Drift:** Runtime support is not machine-discoverable.\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "Foldout",
"purpose": "A collapsible panel: a titled header that expands on click to reveal flexible content (text, tables, charts, or any nested component). Collapsed by default; stack multiple for a group.",
"example": "\nAny content — text, a table, a chart, or any nested component.\n",
"body": "htmdx",
"props": [
{
"name": "title",
"type": "string",
"description": "The header text shown in the summary row. Supports inline markdown."
},
{
"name": "open",
"type": "boolean",
"default": false,
"description": "Render the panel expanded on load. Defaults to collapsed."
}
],
"source": "built-in"
},
{
"name": "IntentList",
"purpose": "Group user intents by priority (Blocker/Critical/Nice to have) with a persona · type header, the intent quote, and current → expected feeling chips (red → green). Each item title is `#id · Priority · Persona · Type`; the text is the quote followed by `negative, negative → positive, positive`. Append an optional `· note: …` to flag an intent with a caution strip (e.g. a guardrail) inside its card.",
"example": "\n- **#int-001 · Blocker · Self-Creator · Main intent:** \"I want to collect a shopper's file at purchase, so the attachment is tied to the order.\" — frustrated, resigned → in control, relieved\n- **#int-001 · Critical · Shopper · Main intent:** \"I want to attach my file while buying, so the seller gets exactly what I mean.\" — uncertain, friction → understood, reassured · note: Required-upload step is an unmeasured conversion risk — guardrail KPI required at launch\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "MetricStrip",
"purpose": "Show a compact set of labeled headline values written as '- label: value' rows. A leading trend glyph (↑ up/green, ↓ down/red, ⊘ guardrail/amber) is colored automatically; an ` — ` or ` · ` in the value renders the remainder as a muted caption.",
"example": "\n- ↑ Active stores using upload: **baseline 0** — post-launch adopter cohort\n- ↓ File-upload support tickets: **55** · 3 months post-launch\n- ⊘ Buyer checkout-completion rate: **guardrail** — hold at or above baseline\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "OpenQuestions",
"purpose": "An amber-framed panel of open questions and assumptions, each row carrying a labeled badge. Item title is the label (Assumption = blue, Risk = red, Open = amber); the text is the note.",
"example": "\n- **Assumption:** FILE_UPLOAD render type on the Catalog V3 Modifier mechanism. To be confirmed in spec.\n- **Risk:** Required-before-add-to-cart carries an unmeasured buyer-conversion risk. Guardrail KPI at launch.\n- **Open:** Order-carriage path and buyer-file retention policy are deferred to spec.\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "RiskTable",
"purpose": "Classify priorities written as Markdown list rows. Each row must start with one unique, case-sensitive bold tier—`Must-have`, `Differentiator`, `Not now`, or `Won't do`—followed by non-empty text.",
"example": "\n- **Must-have:** Publish exact-version metadata.\n- **Not now:** Describe host components.\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "SignalGrid",
"purpose": "A grid of category cards with a colored top accent — for Why-Now signals or a Problem / Root cause / Opportunity trio. Item title is `Category | tone` (tone: blue/green/amber/red/gray/purple); the text is an optional `Headline — ` followed by the body.",
"example": "\n- **User pain · Escalated | red:** Paying for a workaround — merchants pay $14–60/mo and escalate to support.\n- **Competitive gap | amber:** 4 of 6 native competitors ship upload — Wix does not.\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "SourceQuote",
"purpose": "Display a source quotation or excerpt as Markdown, with attribution supplied in the surrounding content.",
"example": "\n“Artifacts should remain editable.”\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "Sources",
"purpose": "Show research artifacts as provenance pills prefixed with ↗. Write one or more `- source` rows.",
"example": "\n- Data Analysis\n- User Voice\n- Product Strategy\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "Stat",
"purpose": "Highlight one or more labeled statistics written as '- label: value' rows.",
"example": "\n- Adoption: **72%**\n- Active stores: **408K**\n- T12M GPV: **$5.1B**\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "Timeline",
"purpose": "Describe milestones as labeled points in time written as '- label: value' rows, splitting each row at its first colon.",
"example": "\n- July: Publish the manifest\n- August: Adopt it in validators\n",
"body": "markdown",
"source": "built-in"
},
{
"name": "Accordion",
"purpose": "Group of expandable AccordionItem sections; choose single or multiple open items.",
"example": "\n \n Key risks\n Vendor lock-in.\n \n",
"body": "htmdx",
"props": [
{
"name": "type",
"type": "string",
"required": true,
"values": [
"single",
"multiple"
],
"description": "Whether one or many items can be open at once."
},
{
"name": "collapsible",
"type": "boolean",
"default": false,
"description": "For type single, lets the open item close when selected again."
},
{
"name": "defaultValue",
"type": "json",
"description": "Initially open item value: a JSON string for type single or a JSON string array for type multiple."
}
],
"source": "shadcn"
},
{
"name": "AccordionContent",
"purpose": "Content revealed when its AccordionItem is open.",
"example": "\n \n Key risks\n Vendor **lock-in**.\n \n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "AccordionItem",
"purpose": "One named expandable section inside an Accordion.",
"example": "\n \n Key risks\n Vendor lock-in.\n \n",
"body": "htmdx",
"props": [
{
"name": "value",
"type": "string",
"required": true,
"description": "Unique value that identifies this item within its Accordion."
}
],
"source": "shadcn"
},
{
"name": "AccordionTrigger",
"purpose": "Heading control that opens or closes its AccordionItem.",
"example": "\n \n Key risks\n Vendor lock-in.\n \n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "Alert",
"purpose": "Callout banner for a titled note or warning.",
"example": "\n Heads up\n This artifact is display-only.\n",
"body": "htmdx",
"props": [
{
"name": "variant",
"type": "string",
"values": [
"default",
"destructive"
],
"default": "default",
"description": "Visual emphasis of the alert."
}
],
"source": "shadcn"
},
{
"name": "AlertDescription",
"purpose": "Supporting body text inside an Alert.",
"example": "\n Heads up\n Review this note before publishing.\n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "AlertTitle",
"purpose": "Title line inside an Alert.",
"example": "\n Heads up\n Review this note before publishing.\n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "AspectRatio",
"purpose": "Keeps nested media at a fixed width-to-height ratio.",
"example": "\n \n",
"body": "htmdx",
"props": [
{
"name": "ratio",
"type": "number",
"min": 5e-324,
"default": 1,
"description": "Width divided by height; use a positive number such as 1.7778 for 16:9."
}
],
"source": "shadcn"
},
{
"name": "Avatar",
"purpose": "Round image container that holds an AvatarImage and AvatarFallback.",
"example": "\n \n CN\n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "AvatarFallback",
"purpose": "Initials or short text shown when an AvatarImage is unavailable.",
"example": "\n \n CN\n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "AvatarImage",
"purpose": "Image inside an Avatar; pair it with AvatarFallback for missing images.",
"example": "\n \n CN\n",
"body": "none",
"props": [
{
"name": "src",
"type": "string",
"required": true,
"description": "URL of the avatar image."
},
{
"name": "alt",
"type": "string",
"description": "Text alternative for the image."
}
],
"source": "shadcn"
},
{
"name": "Badge",
"purpose": "Small status or label chip.",
"example": "audited",
"body": "htmdx",
"props": [
{
"name": "variant",
"type": "string",
"values": [
"default",
"secondary",
"destructive",
"outline"
],
"default": "default",
"description": "Visual emphasis of the chip."
}
],
"source": "shadcn"
},
{
"name": "Breadcrumb",
"purpose": "Navigation trail that shows the current page within a hierarchy.",
"example": "\n \n Home\n \n Reports\n \n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "BreadcrumbEllipsis",
"purpose": "Collapsed-items marker inside a BreadcrumbItem.",
"example": "\n \n Home\n \n \n \n Reports\n \n",
"body": "none",
"source": "shadcn"
},
{
"name": "BreadcrumbItem",
"purpose": "One linked or current-page entry inside a BreadcrumbList.",
"example": "\n \n Reports\n \n Quarterly\n \n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "BreadcrumbLink",
"purpose": "Link to an ancestor page inside a BreadcrumbItem.",
"example": "\n \n Home\n \n Reports\n \n",
"body": "htmdx",
"props": [
{
"name": "href",
"type": "string",
"required": true,
"description": "URL of the ancestor page."
}
],
"source": "shadcn"
},
{
"name": "BreadcrumbList",
"purpose": "Ordered list that lays out the items and separators in a Breadcrumb.",
"example": "\n \n Home\n \n Reports\n \n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "BreadcrumbPage",
"purpose": "Current, non-clickable page inside a BreadcrumbItem.",
"example": "\n \n Home\n \n Reports\n \n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "BreadcrumbSeparator",
"purpose": "Separator between two BreadcrumbItem elements; uses a chevron when empty.",
"example": "\n \n Home\n \n Reports\n \n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "Button",
"purpose": "Button-styled label for display-only artifact actions.",
"example": "",
"body": "htmdx",
"props": [
{
"name": "asChild",
"type": "boolean",
"default": false,
"description": "Use the single child element as the button-styled control."
},
{
"name": "variant",
"type": "string",
"values": [
"default",
"destructive",
"outline",
"secondary",
"ghost",
"link"
],
"default": "default",
"description": "Visual emphasis of the button."
},
{
"name": "size",
"type": "string",
"values": [
"default",
"sm",
"lg",
"icon"
],
"default": "default",
"description": "Button height and padding preset."
}
],
"source": "shadcn"
},
{
"name": "Card",
"purpose": "Container for a self-contained block with optional header, content, and footer areas.",
"example": "\n \n Revenue\n Quarterly numbers\n \n Grew **12%** quarter over quarter.\n \n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "CardAction",
"purpose": "Action area aligned at the end of a CardHeader.",
"example": "\n \n Revenue\n \n \n Quarterly results.\n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "CardContent",
"purpose": "Main body of a Card; accepts Markdown, HTML, and nested HTMDX components.",
"example": "\n Revenue\n Grew **12%** quarter over quarter. audited\n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "CardDescription",
"purpose": "Supporting description line inside a CardHeader.",
"example": "\n \n Revenue\n Audited quarterly numbers\n \n Quarterly results.\n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "CardFooter",
"purpose": "Footer row of a Card, usually holding actions or status labels.",
"example": "\n Revenue\n Quarterly results.\n \n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "CardHeader",
"purpose": "Header area of a Card; holds its title, description, and optional action.",
"example": "\n \n Revenue\n Quarterly numbers\n \n \n Grew **12%** quarter over quarter.\n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "CardTitle",
"purpose": "Title line inside a CardHeader.",
"example": "\n \n Revenue\n \n Quarterly results.\n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "Collapsible",
"purpose": "Single expandable region controlled by a CollapsibleTrigger.",
"example": "\n Toggle details\n Supporting details.\n",
"body": "htmdx",
"props": [
{
"name": "defaultOpen",
"type": "boolean",
"default": false,
"description": "Whether the region starts open."
}
],
"source": "shadcn"
},
{
"name": "CollapsibleContent",
"purpose": "Content shown while its Collapsible region is open.",
"example": "\n Toggle details\n Supporting **details**.\n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "CollapsibleTrigger",
"purpose": "Control that opens or closes the related CollapsibleContent.",
"example": "\n Toggle details\n Supporting details.\n",
"body": "htmdx",
"props": [
{
"name": "asChild",
"type": "boolean",
"default": false,
"description": "Use the single child element as the trigger instead of rendering a button."
}
],
"source": "shadcn"
},
{
"name": "Dialog",
"purpose": "Modal state container for a trigger and accessible dialog content.",
"example": "",
"body": "htmdx",
"props": [
{
"name": "defaultOpen",
"type": "boolean",
"default": false,
"description": "Whether the dialog starts open."
},
{
"name": "modal",
"type": "boolean",
"default": true,
"description": "Whether the dialog blocks interaction with content outside it."
}
],
"source": "shadcn"
},
{
"name": "DialogClose",
"purpose": "Control inside DialogContent that closes the dialog.",
"example": "",
"body": "htmdx",
"props": [
{
"name": "asChild",
"type": "boolean",
"default": false,
"description": "Use the single child element as the close control instead of rendering a button."
}
],
"source": "shadcn"
},
{
"name": "DialogContent",
"purpose": "Portalled modal surface; include a DialogTitle and DialogDescription for accessibility.",
"example": "",
"body": "htmdx",
"props": [
{
"name": "showCloseButton",
"type": "boolean",
"default": true,
"description": "Whether to show the icon close control in the top corner."
},
{
"name": "forceMount",
"type": "boolean",
"default": false,
"description": "Keep the content mounted even when the dialog is closed."
}
],
"source": "shadcn"
},
{
"name": "DialogDescription",
"purpose": "Accessible description that explains a DialogContent surface.",
"example": "",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "DialogFooter",
"purpose": "Bottom action section of DialogContent with an optional built-in close button.",
"example": "",
"body": "htmdx",
"props": [
{
"name": "showCloseButton",
"type": "boolean",
"default": false,
"description": "Whether to append an outline close button."
}
],
"source": "shadcn"
},
{
"name": "DialogHeader",
"purpose": "Top section of DialogContent that groups its accessible title and description.",
"example": "",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "DialogOverlay",
"purpose": "Bodyless backdrop layer for a custom DialogPortal; DialogContent already adds one.",
"example": "",
"body": "none",
"props": [
{
"name": "forceMount",
"type": "boolean",
"default": false,
"description": "Keep the overlay mounted even when the dialog is closed."
}
],
"source": "shadcn"
},
{
"name": "DialogPortal",
"purpose": "Moves custom Dialog layers to the document body; DialogContent already uses one.",
"example": "",
"body": "htmdx",
"props": [
{
"name": "forceMount",
"type": "boolean",
"default": false,
"description": "Keep the portal children mounted even when the dialog is closed."
}
],
"source": "shadcn"
},
{
"name": "DialogTitle",
"purpose": "Required accessible name for a DialogContent surface.",
"example": "",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "DialogTrigger",
"purpose": "Control inside Dialog that opens its dialog content.",
"example": "",
"body": "htmdx",
"props": [
{
"name": "asChild",
"type": "boolean",
"default": false,
"description": "Use the single child element as the trigger instead of rendering a button."
}
],
"source": "shadcn"
},
{
"name": "HoverCard",
"purpose": "State container for a trigger and a rich preview card shown after a pointer pause.",
"example": "\n @htmdx\n Build editable **HTML artifacts**.\n",
"body": "htmdx",
"props": [
{
"name": "defaultOpen",
"type": "boolean",
"default": false,
"description": "Whether the card starts open."
},
{
"name": "openDelay",
"type": "number",
"default": 700,
"min": 0,
"description": "Milliseconds to wait before opening."
},
{
"name": "closeDelay",
"type": "number",
"default": 300,
"min": 0,
"description": "Milliseconds to wait before closing."
}
],
"source": "shadcn"
},
{
"name": "HoverCardContent",
"purpose": "Portalled rich preview surface positioned relative to its HoverCardTrigger.",
"example": "\n @htmdx\n Build editable **HTML artifacts**.\n",
"body": "htmdx",
"props": [
{
"name": "forceMount",
"type": "boolean",
"default": false,
"description": "Keep the content mounted when closed."
},
{
"name": "side",
"type": "string",
"values": [
"top",
"right",
"bottom",
"left"
],
"default": "bottom",
"description": "Preferred side of the trigger."
},
{
"name": "sideOffset",
"type": "number",
"default": 4,
"description": "Distance in pixels from the trigger."
},
{
"name": "align",
"type": "string",
"values": [
"start",
"center",
"end"
],
"default": "center",
"description": "Content alignment along the trigger."
},
{
"name": "alignOffset",
"type": "number",
"default": 0,
"description": "Alignment shift in pixels."
},
{
"name": "avoidCollisions",
"type": "boolean",
"default": true,
"description": "Shift or flip content to keep it in view."
},
{
"name": "collisionPadding",
"type": "number",
"default": 0,
"min": 0,
"description": "Viewport edge padding in pixels."
},
{
"name": "sticky",
"type": "string",
"values": [
"partial",
"always"
],
"default": "partial",
"description": "How content stays aligned when the trigger leaves view."
},
{
"name": "hideWhenDetached",
"type": "boolean",
"default": false,
"description": "Hide content when its trigger is fully clipped."
}
],
"source": "shadcn"
},
{
"name": "HoverCardTrigger",
"purpose": "Control inside HoverCard whose pointer or focus state reveals HoverCardContent.",
"example": "\n @htmdx\n Editable artifact tools.\n",
"body": "htmdx",
"props": [
{
"name": "asChild",
"type": "boolean",
"default": false,
"description": "Use the single child element as the trigger instead of rendering a link."
}
],
"source": "shadcn"
},
{
"name": "Popover",
"purpose": "State container for a control and a floating panel shown on demand.",
"example": "\n Open filters\n Choose the report filters.\n",
"body": "htmdx",
"props": [
{
"name": "defaultOpen",
"type": "boolean",
"default": false,
"description": "Whether the popover starts open."
},
{
"name": "modal",
"type": "boolean",
"default": false,
"description": "Whether open content blocks interaction outside it."
}
],
"source": "shadcn"
},
{
"name": "PopoverAnchor",
"purpose": "Optional element inside Popover used as the positioning anchor for PopoverContent.",
"example": "\n Report filters\n Choose the report filters.\n",
"body": "htmdx",
"props": [
{
"name": "asChild",
"type": "boolean",
"default": false,
"description": "Use the single child element as the anchor instead of rendering a wrapper."
}
],
"source": "shadcn"
},
{
"name": "PopoverContent",
"purpose": "Portalled floating panel positioned relative to a PopoverTrigger or PopoverAnchor.",
"example": "\n Open filters\n Choose the **report filters**.\n",
"body": "htmdx",
"props": [
{
"name": "forceMount",
"type": "boolean",
"default": false,
"description": "Keep the content mounted when closed."
},
{
"name": "side",
"type": "string",
"values": [
"top",
"right",
"bottom",
"left"
],
"default": "bottom",
"description": "Preferred side of the anchor."
},
{
"name": "sideOffset",
"type": "number",
"default": 4,
"description": "Distance in pixels from the anchor."
},
{
"name": "align",
"type": "string",
"values": [
"start",
"center",
"end"
],
"default": "center",
"description": "Content alignment along the anchor."
},
{
"name": "alignOffset",
"type": "number",
"default": 0,
"description": "Alignment shift in pixels."
},
{
"name": "avoidCollisions",
"type": "boolean",
"default": true,
"description": "Shift or flip content to keep it in view."
},
{
"name": "collisionPadding",
"type": "number",
"default": 0,
"min": 0,
"description": "Viewport edge padding in pixels."
},
{
"name": "sticky",
"type": "string",
"values": [
"partial",
"always"
],
"default": "partial",
"description": "How content stays aligned when the anchor leaves view."
},
{
"name": "hideWhenDetached",
"type": "boolean",
"default": false,
"description": "Hide content when its anchor is fully clipped."
}
],
"source": "shadcn"
},
{
"name": "PopoverTrigger",
"purpose": "Control inside Popover that opens or closes PopoverContent.",
"example": "\n Open filters\n Choose the report filters.\n",
"body": "htmdx",
"props": [
{
"name": "asChild",
"type": "boolean",
"default": false,
"description": "Use the single child element as the trigger instead of rendering a button."
}
],
"source": "shadcn"
},
{
"name": "Progress",
"purpose": "Displays determinate progress from 0 to 100.",
"example": "",
"body": "none",
"props": [
{
"name": "value",
"type": "number",
"min": 0,
"max": 100,
"default": 0,
"description": "Completed percentage from 0 to 100."
}
],
"source": "shadcn"
},
{
"name": "Separator",
"purpose": "Draws a horizontal or vertical rule between sections.",
"example": "",
"body": "none",
"props": [
{
"name": "orientation",
"type": "string",
"values": [
"horizontal",
"vertical"
],
"default": "horizontal",
"description": "Direction of the dividing rule."
},
{
"name": "decorative",
"type": "boolean",
"default": true,
"description": "Whether assistive tools should ignore the separator."
}
],
"source": "shadcn"
},
{
"name": "Table",
"purpose": "Responsive data table root; compose a caption, header, body, and optional footer inside it.",
"example": "
Quarterly revenuePlanMRRPro$1,140
",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "TableBody",
"purpose": "Body section of a Table; place data TableRow elements inside it.",
"example": "
PlanPro
",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "TableCaption",
"purpose": "Accessible caption that names or describes its containing Table.",
"example": "
Quarterly revenue by planPro
",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "TableCell",
"purpose": "Data cell inside a TableRow; use spans to cover more than one row or column.",
"example": "
PlanStatusProActiveBusiness
",
"body": "htmdx",
"props": [
{
"name": "colSpan",
"type": "number",
"min": 1,
"max": 1000,
"description": "Number of columns this cell spans."
},
{
"name": "rowSpan",
"type": "number",
"min": 0,
"max": 65534,
"description": "Number of rows this cell spans; 0 spans all remaining rows in the section."
},
{
"name": "headers",
"type": "string",
"description": "Space-separated ids of TableHead cells that label this cell."
}
],
"source": "shadcn"
},
{
"name": "TableFooter",
"purpose": "Footer section of a Table for totals or summary rows.",
"example": "
Pro$1,140Total$1,140
",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "TableHead",
"purpose": "Header cell inside a TableRow; use scope to link it to its row, column, or group.",
"example": "
PlanMRRPro$1,140
",
"body": "htmdx",
"props": [
{
"name": "colSpan",
"type": "number",
"min": 1,
"max": 1000,
"description": "Number of columns this header cell spans."
},
{
"name": "rowSpan",
"type": "number",
"min": 0,
"max": 65534,
"description": "Number of rows this header cell spans; 0 spans all remaining rows in the section."
},
{
"name": "headers",
"type": "string",
"description": "Space-separated ids of other TableHead cells that label this header cell."
},
{
"name": "scope",
"type": "string",
"values": [
"row",
"col",
"rowgroup",
"colgroup"
],
"description": "Cells this header labels."
},
{
"name": "abbr",
"type": "string",
"description": "Short form of the header label."
}
],
"source": "shadcn"
},
{
"name": "TableHeader",
"purpose": "Header section of a Table; place rows of TableHead cells inside it.",
"example": "
PlanMRRPro$1,140
",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "TableRow",
"purpose": "One row inside a TableHeader, TableBody, or TableFooter; fill it with matching cell tags.",
"example": "
Pro$1,140
",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "Tabs",
"purpose": "Tab group that shows the TabsContent matching the selected TabsTrigger.",
"example": "\n \n Summary\n Details\n \n Summary panel.\n Details panel.\n",
"body": "htmdx",
"props": [
{
"name": "defaultValue",
"type": "string",
"required": true,
"description": "Value of the tab selected when the group first renders."
}
],
"source": "shadcn"
},
{
"name": "TabsContent",
"purpose": "Panel shown when its value matches the selected TabsTrigger.",
"example": "\n \n Summary\n Details\n \n Summary with **key metrics**.\n Details panel.\n",
"body": "htmdx",
"props": [
{
"name": "value",
"type": "string",
"required": true,
"description": "Value that links this panel to its TabsTrigger control."
}
],
"source": "shadcn"
},
{
"name": "TabsList",
"purpose": "Container for the TabsTrigger controls in a Tabs group.",
"example": "\n \n Summary\n Details\n \n Summary panel.\n Details panel.\n",
"body": "htmdx",
"source": "shadcn"
},
{
"name": "TabsTrigger",
"purpose": "Tab control whose value selects the matching TabsContent.",
"example": "\n \n Summary\n Details\n \n Summary panel.\n Details panel.\n",
"body": "htmdx",
"props": [
{
"name": "value",
"type": "string",
"required": true,
"description": "Value that links this control to its TabsContent panel."
}
],
"source": "shadcn"
},
{
"name": "Tooltip",
"purpose": "State container for a control and a short text label; includes standalone provider wiring.",
"example": "\n Report status\n Published yesterday\n",
"body": "htmdx",
"props": [
{
"name": "defaultOpen",
"type": "boolean",
"default": false,
"description": "Whether the tooltip starts open."
},
{
"name": "delayDuration",
"type": "number",
"default": 0,
"min": 0,
"description": "Milliseconds to wait before opening this tooltip."
},
{
"name": "disableHoverableContent",
"type": "boolean",
"default": false,
"description": "Close when the pointer leaves the trigger instead of allowing hover over content."
}
],
"source": "shadcn"
},
{
"name": "TooltipContent",
"purpose": "Portalled short label positioned relative to its TooltipTrigger.",
"example": "\n Report status\n Published **yesterday**\n",
"body": "htmdx",
"props": [
{
"name": "forceMount",
"type": "boolean",
"default": false,
"description": "Keep the content mounted when closed."
},
{
"name": "side",
"type": "string",
"values": [
"top",
"right",
"bottom",
"left"
],
"default": "top",
"description": "Preferred side of the trigger."
},
{
"name": "sideOffset",
"type": "number",
"default": 0,
"description": "Distance in pixels from the trigger."
},
{
"name": "align",
"type": "string",
"values": [
"start",
"center",
"end"
],
"default": "center",
"description": "Content alignment along the trigger."
},
{
"name": "alignOffset",
"type": "number",
"default": 0,
"description": "Alignment shift in pixels."
},
{
"name": "avoidCollisions",
"type": "boolean",
"default": true,
"description": "Shift or flip content to keep it in view."
},
{
"name": "collisionPadding",
"type": "number",
"default": 0,
"min": 0,
"description": "Viewport edge padding in pixels."
},
{
"name": "sticky",
"type": "string",
"values": [
"partial",
"always"
],
"default": "partial",
"description": "How content stays aligned when the trigger leaves view."
},
{
"name": "hideWhenDetached",
"type": "boolean",
"default": false,
"description": "Hide content when its trigger is fully clipped."
}
],
"source": "shadcn"
},
{
"name": "TooltipProvider",
"purpose": "Shared timing and pointer-behavior settings for one or more nested Tooltip components.",
"example": "\n \n Report status\n Published yesterday\n \n",
"body": "htmdx",
"props": [
{
"name": "delayDuration",
"type": "number",
"default": 0,
"min": 0,
"description": "Milliseconds to wait before opening a tooltip."
},
{
"name": "skipDelayDuration",
"type": "number",
"default": 300,
"min": 0,
"description": "Grace period for moving between tooltip triggers without another delay."
},
{
"name": "disableHoverableContent",
"type": "boolean",
"default": false,
"description": "Close when the pointer leaves a trigger instead of allowing hover over content."
}
],
"source": "shadcn"
},
{
"name": "TooltipTrigger",
"purpose": "Control inside Tooltip whose pointer or focus state reveals TooltipContent.",
"example": "\n Report status\n Published yesterday\n",
"body": "htmdx",
"props": [
{
"name": "asChild",
"type": "boolean",
"default": false,
"description": "Use the single child element as the trigger instead of rendering a button."
}
],
"source": "shadcn"
}
]
}
![\"Mountain](\"https://images.unsplash.com/photo-1535025183041-0991a977e25b\")
\n