Flowbite

v2v3

Installation

npm

npm i @sjsf/flowbite3-theme@next

yarn

yarn add @sjsf/flowbite3-theme@next

pnpm

pnpm add @sjsf/flowbite3-theme@next

bun

bun add @sjsf/flowbite3-theme@next

Note

This is flowbite-svelte@next based theme (Tailwind v4).

Install Flowbite Svelte v3

Quickstart - Flowbite Svelte

Configuration

Register the theme source path by adding a line like this to the app.css file.

@source "../node_modules/@sjsf/flowbite3-theme/dist";

Extra widgets

• checkboxes
• date-picker
• file
• multi-select
• radio
• range
• switch
• textarea

Widgets demo

Form

JSON Schema

{
  "type": "object",
  "properties": {
    "checkbox": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      }
    },
    "checkboxes": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        }
      }
    },
    "file": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "format": "data-url"
        },
        "error": {
          "type": "string",
          "format": "data-url"
        }
      }
    },
    "multiFile": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        }
      }
    },
    "number": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      }
    },
    "select": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      }
    },
    "text": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "datePicker": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "multiSelect": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        }
      }
    },
    "radio": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      }
    },
    "range": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      }
    },
    "switch": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      }
    },
    "textarea": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    }
  }
}

UI Schema

{
  "checkbox": {
    "default": {},
    "error": {}
  },
  "checkboxes": {
    "default": {},
    "error": {}
  },
  "file": {
    "default": {},
    "error": {}
  },
  "multiFile": {
    "default": {},
    "error": {}
  },
  "number": {
    "default": {},
    "error": {}
  },
  "select": {
    "default": {},
    "error": {}
  },
  "text": {
    "default": {},
    "error": {}
  },
  "datePicker": {
    "default": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    }
  },
  "multiSelect": {
    "default": {
      "ui:components": {
        "checkboxesWidget": "multiSelectWidget"
      },
      "ui:options": {
        "useLabel": true
      }
    },
    "error": {
      "ui:components": {
        "checkboxesWidget": "multiSelectWidget"
      },
      "ui:options": {
        "useLabel": true
      }
    }
  },
  "radio": {
    "default": {
      "ui:components": {
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    },
    "error": {
      "ui:components": {
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    }
  },
  "range": {
    "default": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      }
    },
    "error": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      }
    }
  },
  "switch": {
    "default": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      }
    },
    "error": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      }
    }
  },
  "textarea": {
    "default": {
      "ui:components": {
        "textWidget": "textareaWidget"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "textareaWidget"
      }
    }
  }
}