low-code-react-app-b/json-components-list.json

[
  {
    "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": "planned"
  },
  {
    "type": "FileUpload",
    "name": "FileUpload",
    "category": "input",
    "canHaveChildren": false,
    "description": "File upload control",
    "status": "planned"
  },
  {
    "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": "planned"
  },
  {
    "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": "planned"
  },
  {
    "type": "CircularProgress",
    "name": "CircularProgress",
    "category": "display",
    "canHaveChildren": false,
    "description": "Circular progress indicator",
    "status": "planned"
  },
  {
    "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"
  }
]