budibase/packages/standard-components/manifest.json

{
  "container": {
    "name": "Container",
    "description": "This component contains things within itself",
    "icon": "ri-layout-column-line",
    "hasChildren": true,
    "styleable": true,
    "settings": [
      {
        "type": "select",
        "key": "type",
        "label": "Type",
        "defaultValue": "div",
        "options": [
          "article",
          "aside",
          "details",
          "div",
          "figure",
          "figcaption",
          "footer",
          "header",
          "main",
          "mark",
          "nav",
          "paragraph",
          "summary"
        ]
      }
    ]
  },
  "grid": {
    "name": "Grid",
    "description":
      "A datagrid component with functionality to add, remove and edit rows.",
    "icon": "ri-grid-line",
    "styleable": true,
    "settings": [
      {
        "type": "datasource",
        "label": "Source",
        "key": "datasource"
      },
      {
        "type": "detailScreen",
        "label": "Detail URL",
        "key": "detailUrl"
      },
      {
        "type": "boolean",
        "label": "Editable",
        "key": "editable"
      },
      {
        "type": "select",
        "label": "Theme",
        "key": "theme",
        "options": ["alpine", "alpine-dark", "balham", "balham-dark", "material"],
        "defaultValue": "alpine"
      },
      {
        "type": "number",
        "label": "Height",
        "key": "height",
        "defaultValue": "500"
      },
      {
        "type": "boolean",
        "label": "Pagination",
        "key": "pagination"
      }
    ]
  },
  "screenslot": {
    "name": "Screenslot",
    "description": "Contains your app screens",
    "styleable": true
  },
  "button": {
    "name": "Button",
    "description": "A basic html button that is ready for styling",
    "icon": "ri-share-box-line",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Text",
        "key": "text"
      },
      {
        "type": "boolean",
        "label": "Disabled",
        "key": "disabled"
      },
      {
        "type": "event",
        "label": "On Click",
        "key": "onClick"
      }
    ]
  },
  "list": {
    "name": "Repeater",
    "description": "A configurable data list that attaches to your backend tables.",
    "icon": "ri-list-check-2",
    "styleable": true,
    "hasChildren": true,
    "dataProvider": true,
    "settings": [
      {
        "type": "datasource",
        "label": "Data",
        "key": "datasource"
      }
    ]
  },
  "dataform": {
    "name": "Form",
    "icon": "ri-file-edit-line",
    "styleable": true
  },
  "dataformwide": {
    "name": "Wide Form",
    "icon": "ri-file-edit-line",
    "styleable": true
  },
  "input": {
    "name": "Text Field",
    "description": "A textfield component that allows the user to input text.",
    "icon": "ri-edit-box-line",
    "styleable": true,
    "bindable": true,
    "settings": [
      {
        "type": "text",
        "label": "Label",
        "key": "label"
      },
      {
        "label": "Type",
        "key": "type",
        "defaultValue": "text",
        "options": ["text", "password"]
      }
    ]
  },
  "richtext": {
    "name": "Rich Text",
    "description": "A component that allows the user to enter long form text.",
    "icon": "ri-edit-box-line",
    "styleable": true,
    "bindable": true
  },
  "datepicker": {
    "name": "Date Picker",
    "description": "A basic date picker component",
    "icon": "ri-calendar-line",
    "styleable": true,
    "bindable": true,
    "settings": [
      {
        "type": "text",
        "label": "Placeholder",
        "key": "placeholder"
      }
    ]
  },
  "stackedlist": {
    "name": "Stacked List",
    "icon": "ri-archive-drawer-line",
    "description": "A basic card component that can contain content and actions.",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Image",
        "key": "imageUrl"
      },
      {
        "type": "text",
        "label": "Heading",
        "key": "heading"
      },
      {
        "type": "text",
        "label": "Text 1",
        "key": "text1"
      },
      {
        "type": "text",
        "label": "Text 2",
        "key": "text2"
      },
      {
        "type": "text",
        "label": "Text 3",
        "key": "text3"
      },
      {
        "type": "screen",
        "label": "Link URL",
        "key": "destinationUrl"
      }
    ]
  },
  "card": {
    "name": "Vertical Card",
    "description": "A basic card component that can contain content and actions.",
    "icon": "ri-layout-column-line",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Image",
        "key": "imageUrl"
      },
      {
        "type": "text",
        "label": "Heading",
        "key": "heading"
      },
      {
        "type": "text",
        "label": "Description",
        "key": "description"
      },
      {
        "type": "text",
        "label": "Link Text",
        "key": "linkText"
      },
      {
        "type": "screen",
        "label": "Link Url",
        "key": "linkUrl"
      },
      {
        "type": "color",
        "label": "Link Color",
        "key": "linkColor",
        "defaultValue": "#000"
      },
      {
        "type": "color",
        "label": "Hover Color",
        "key": "linkHoverColor",
        "defaultValue": "#222"
      },
      {
        "type": "select",
        "label": "Image Height",
        "key": "imageHeight",
        "options": ["auto", "12rem", "16rem", "20rem", "24rem"],
        "defaultValue": "auto"
      },
      {
        "type": "select",
        "label": "Card Width",
        "key": "cardWidth",
        "options": ["16rem", "20rem", "24rem"],
        "defaultValue": "20rem"
      }
    ]
  },
  "text": {
    "name": "Paragraph",
    "description": "A component for displaying paragraph text.",
    "icon": "ri-paragraph",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Text",
        "key": "text"
      }
    ]
  },
  "heading": {
    "name": "Headline",
    "icon": "ri-heading",
    "description": "A component for displaying heading text",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "key": "text",
        "label": "Text"
      },
      {
        "type": "select",
        "key": "type",
        "label": "Type",
        "options": ["h1", "h2", "h3", "h4", "h5", "h6"],
        "defaultValue": "h1"
      }
    ]
  },
  "image": {
    "name": "Image",
    "description": "A basic component for displaying images",
    "icon": "ri-image-line",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "URL",
        "key": "url"
      }
    ]
  },
  "icon": {
    "name": "Icon",
    "description": "A basic component for displaying icons",
    "icon": "ri-sun-fill",
    "styleable": true,
    "settings": [
      {
        "type": "icon",
        "label": "Icon",
        "key": "icon"
      },
      {
        "type": "select",
        "label": "Size",
        "key": "size",
        "defaultValue": "fa-lg",
        "options": [
          { "value": "fa-xs", "label": "xs" },
          { "value": "fa-sm", "label": "sm" },
          { "value": "fa-lg", "label": "lg" },
          { "value": "fa-2x", "label": "2x" },
          { "value": "fa-3x", "label": "3x" },
          { "value": "fa-5x", "label": "5x" },
          { "value": "fa-7x", "label": "7x" },
          { "value": "fa-10x", "label": "10x" }
        ]
      },
      {
        "type": "color",
        "label": "Color",
        "key": "color",
        "defaultValue": "#000"
      }
    ]
  },
  "login": {
    "description": "A component that automatically generates a login screen for your app.",
    "icon": "ri-login-box-line",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Logo",
        "key": "logo"
      },
      {
        "type": "text",
        "label": "Title",
        "key": "title"
      },
      {
        "type": "text",
        "label": "Button Text",
        "key": "buttonText"
      }
    ]
  },
  "navigation": {
    "name": "Nav Bar",
    "description": "A component for handling the navigation within your app.",
    "icon": "ri-navigation-line",
    "styleable": true,
    "hasChildren": true,
    "settings": [
      {
        "type": "text",
        "label": "Logo URL",
        "key": "logoUrl"
      }
    ]
  },
  "link": {
    "name": "Link",
    "description": "A basic link component for internal and external links",
    "icon": "ri-link",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Text",
        "key": "text"
      },
      {
        "type": "screen",
        "label": "URL",
        "key": "url"
      },
      {
        "type": "boolean",
        "label": "New Tab",
        "key": "openInNewTab"
      }
    ]
  },
  "rowdetail": {
    "name": "Row Detail",
    "description": "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
    "icon": "ri-profile-line",
    "styleable": true,
    "hasChildren": true,
    "dataProvider": true,
    "settings": [
      {
        "type": "table",
        "label": "Table",
        "key": "table"
      }
    ]
  },
  "newrow": {
    "name": "New Row",
    "description": "Sets up a new row for creation, which can be used with {{ context }}, in children",
    "icon": "ri-profile-line",
    "hasChildren": true,
    "styleable": true,
    "settings": [
      {
        "type": "table",
        "label": "Table",
        "key": "table"
      }
    ]
  },
  "cardhorizontal": {
    "name": "Horizontal Card",
    "description": "A basic card component that can contain content and actions.",
    "icon": "ri-layout-row-line",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Image",
        "key": "imageUrl"
      },
      {
        "type": "text",
        "label": "Heading",
        "key": "heading"
      },
      {
        "type": "text",
        "label": "Description",
        "key": "description"
      },
      {
        "type": "text",
        "label": "Subtext",
        "key": "subtext"
      },
      {
        "type": "text",
        "label": "Link Text",
        "key": "linkText"
      },
      {
        "type": "screen",
        "label": "Link URL",
        "key": "linkUrl"
      },
      {
        "type": "color",
        "label": "Link Color",
        "key": "linkColor",
        "defaultValue": "#000"
      },
      {
        "type": "color",
        "label": "Hover Color",
        "key": "linkHoverColor",
        "defaultValue": "#222"
      },
      {
        "type": "select",
        "label": "Card Width",
        "key": "cardWidth",
        "options": ["24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%"],
        "defaultValue": "32rem"
      },
      {
        "type": "select",
        "label": "Image Width",
        "key": "imageWidth",
        "options": ["auto", "8rem", "12rem", "16rem"],
        "defaultValue": "8rem"
      },
      {
        "type": "select",
        "label": "Image Height",
        "key": "imageHeight",
        "options": ["auto", "8rem", "12rem", "16rem", "auto"],
        "defaultValue": "auto"
      }
    ]
  },
  "cardstat": {
    "name": "Stat Card",
    "description": "A card component for displaying numbers.",
    "icon": "ri-dual-sim-2-line",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Title",
        "key": "title",
        "placeholder": "Total Revenue"
      },
      {
        "type": "text",
        "label": "Value",
        "key": "value",
        "placeholder": "$1,981,983"
      },
      {
        "type": "text",
        "label": "Label",
        "key": "label",
        "placeholder": "Stripe"
      }
    ]
  },
  "embed": {
    "name": "Embed",
    "icon": "ri-code-line",
    "description": "Embed content from 3rd party sources",
    "styleable": true,
    "settings": [
      {
        "type": "text",
        "label": "Embed",
        "key": "embed"
      }
    ]
  }
}