[ { "type": "div", "name": "Container (div)", "category": "layout", "canHaveChildren": true, "description": "Generic container element", "status": "supported" }, { "type": "section", "name": "Section", "category": "layout", "canHaveChildren": true, "description": "Semantic section element", "status": "supported" }, { "type": "article", "name": "Article", "category": "layout", "canHaveChildren": true, "description": "Semantic article element", "status": "supported" }, { "type": "header", "name": "Header", "category": "layout", "canHaveChildren": true, "description": "Semantic header element", "status": "supported" }, { "type": "footer", "name": "Footer", "category": "layout", "canHaveChildren": true, "description": "Semantic footer element", "status": "supported" }, { "type": "main", "name": "Main", "category": "layout", "canHaveChildren": true, "description": "Semantic main content element", "status": "supported" }, { "type": "Card", "name": "Card", "category": "layout", "canHaveChildren": true, "description": "Container card with optional header, content, and footer", "status": "supported", "subComponents": [ "CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter" ] }, { "type": "Grid", "name": "Grid", "category": "layout", "canHaveChildren": true, "description": "Responsive grid layout", "status": "supported" }, { "type": "Flex", "name": "Flex", "category": "layout", "canHaveChildren": true, "description": "Flexible box layout container", "status": "supported" }, { "type": "Stack", "name": "Stack", "category": "layout", "canHaveChildren": true, "description": "Vertical or horizontal stack layout", "status": "supported" }, { "type": "Container", "name": "Container", "category": "layout", "canHaveChildren": true, "description": "Centered container with max-width", "status": "supported" }, { "type": "Button", "name": "Button", "category": "input", "canHaveChildren": true, "description": "Interactive button element", "status": "supported" }, { "type": "Input", "name": "Input", "category": "input", "canHaveChildren": false, "description": "Text input field", "status": "supported" }, { "type": "TextArea", "name": "TextArea", "category": "input", "canHaveChildren": false, "description": "Multi-line text input", "status": "supported" }, { "type": "Select", "name": "Select", "category": "input", "canHaveChildren": false, "description": "Dropdown select control", "status": "supported" }, { "type": "Checkbox", "name": "Checkbox", "category": "input", "canHaveChildren": false, "description": "Checkbox toggle control", "status": "supported" }, { "type": "Radio", "name": "Radio", "category": "input", "canHaveChildren": false, "description": "Radio button selection", "status": "supported" }, { "type": "Switch", "name": "Switch", "category": "input", "canHaveChildren": false, "description": "Toggle switch control", "status": "supported" }, { "type": "Slider", "name": "Slider", "category": "input", "canHaveChildren": false, "description": "Numeric range slider", "status": "supported" }, { "type": "NumberInput", "name": "NumberInput", "category": "input", "canHaveChildren": false, "description": "Numeric input with increment/decrement", "status": "supported" }, { "type": "DatePicker", "name": "DatePicker", "category": "input", "canHaveChildren": false, "description": "Date selection input", "status": "supported" }, { "type": "FileUpload", "name": "FileUpload", "category": "input", "canHaveChildren": false, "description": "File upload control", "status": "supported" }, { "type": "Text", "name": "Text", "category": "display", "canHaveChildren": true, "description": "Text content with typography variants", "status": "supported" }, { "type": "Heading", "name": "Heading", "category": "display", "canHaveChildren": true, "description": "Heading text with level (h1-h6)", "status": "supported" }, { "type": "Label", "name": "Label", "category": "display", "canHaveChildren": true, "description": "Form label element", "status": "supported" }, { "type": "Badge", "name": "Badge", "category": "display", "canHaveChildren": true, "description": "Small status or count indicator", "status": "supported" }, { "type": "Tag", "name": "Tag", "category": "display", "canHaveChildren": true, "description": "Removable tag or chip", "status": "supported" }, { "type": "Code", "name": "Code", "category": "display", "canHaveChildren": true, "description": "Inline or block code display", "status": "supported" }, { "type": "Image", "name": "Image", "category": "display", "canHaveChildren": false, "description": "Image element with loading states", "status": "supported" }, { "type": "Avatar", "name": "Avatar", "category": "display", "canHaveChildren": false, "description": "User avatar image", "status": "supported" }, { "type": "Icon", "name": "Icon", "category": "display", "canHaveChildren": false, "description": "Icon from icon library", "status": "planned" }, { "type": "Separator", "name": "Separator", "category": "display", "canHaveChildren": false, "description": "Visual divider line", "status": "supported" }, { "type": "Divider", "name": "Divider", "category": "display", "canHaveChildren": false, "description": "Visual section divider", "status": "supported" }, { "type": "Progress", "name": "Progress", "category": "display", "canHaveChildren": false, "description": "Progress bar indicator", "status": "supported" }, { "type": "ProgressBar", "name": "ProgressBar", "category": "display", "canHaveChildren": false, "description": "Linear progress bar", "status": "supported" }, { "type": "CircularProgress", "name": "CircularProgress", "category": "display", "canHaveChildren": false, "description": "Circular progress indicator", "status": "supported" }, { "type": "Spinner", "name": "Spinner", "category": "display", "canHaveChildren": false, "description": "Loading spinner", "status": "supported" }, { "type": "Skeleton", "name": "Skeleton", "category": "display", "canHaveChildren": false, "description": "Loading skeleton placeholder", "status": "supported" }, { "type": "Link", "name": "Link", "category": "navigation", "canHaveChildren": true, "description": "Hyperlink element", "status": "supported" }, { "type": "Breadcrumb", "name": "Breadcrumb", "category": "navigation", "canHaveChildren": false, "description": "Navigation breadcrumb trail", "status": "planned" }, { "type": "Tabs", "name": "Tabs", "category": "navigation", "canHaveChildren": true, "description": "Tabbed interface container", "status": "supported", "subComponents": [ "TabsList", "TabsTrigger", "TabsContent" ] }, { "type": "Alert", "name": "Alert", "category": "feedback", "canHaveChildren": true, "description": "Alert notification message", "status": "supported" }, { "type": "InfoBox", "name": "InfoBox", "category": "feedback", "canHaveChildren": true, "description": "Information box with icon", "status": "supported" }, { "type": "Notification", "name": "Notification", "category": "feedback", "canHaveChildren": true, "description": "Toast notification", "status": "planned" }, { "type": "StatusBadge", "name": "StatusBadge", "category": "feedback", "canHaveChildren": false, "description": "Status indicator badge", "status": "supported" }, { "type": "StatusIcon", "name": "StatusIcon", "category": "feedback", "canHaveChildren": false, "description": "Status indicator icon", "status": "planned" }, { "type": "EmptyState", "name": "EmptyState", "category": "feedback", "canHaveChildren": true, "description": "Empty state placeholder", "status": "supported" }, { "type": "ErrorBadge", "name": "ErrorBadge", "category": "feedback", "canHaveChildren": false, "description": "Error state badge", "status": "planned" }, { "type": "List", "name": "List", "category": "data", "canHaveChildren": false, "description": "Generic list renderer with custom items", "status": "supported" }, { "type": "DataList", "name": "DataList", "category": "data", "canHaveChildren": false, "description": "Styled data list", "status": "planned" }, { "type": "Table", "name": "Table", "category": "data", "canHaveChildren": false, "description": "Data table", "status": "supported" }, { "type": "DataTable", "name": "DataTable", "category": "data", "canHaveChildren": false, "description": "Advanced data table with sorting and filtering", "status": "planned" }, { "type": "KeyValue", "name": "KeyValue", "category": "data", "canHaveChildren": false, "description": "Key-value pair display", "status": "supported" }, { "type": "Timeline", "name": "Timeline", "category": "data", "canHaveChildren": false, "description": "Timeline visualization", "status": "planned" }, { "type": "StatCard", "name": "StatCard", "category": "data", "canHaveChildren": false, "description": "Statistic card display", "status": "supported" }, { "type": "MetricCard", "name": "MetricCard", "category": "data", "canHaveChildren": false, "description": "Metric display card", "status": "planned" }, { "type": "DataCard", "name": "DataCard", "category": "custom", "canHaveChildren": false, "description": "Custom data display card", "status": "supported" }, { "type": "SearchInput", "name": "SearchInput", "category": "custom", "canHaveChildren": false, "description": "Search input with icon", "status": "supported" }, { "type": "ActionBar", "name": "ActionBar", "category": "custom", "canHaveChildren": false, "description": "Action button toolbar", "status": "supported" }, { "type": "Dialog", "name": "Dialog", "category": "layout", "canHaveChildren": true, "description": "Modal dialog overlay", "status": "supported" } ]