Skip to content
svelte-jsonschema-form v3
Playground Form Builder

Flowbite tw3

Flowbite™ is a registered trademark of Bergside Inc. This website is not affiliated with, endorsed by, or sponsored by Bergside Inc. All rights to the trademark are owned by Bergside Inc.

Installation

Section titled “Installation”
Terminal window
npm i @sjsf/flowbite-theme@next

flowbite-svelte ~0.47.0 is required.

Install Flowbite Svelte

Section titled “Install Flowbite Svelte”

Quickstart - Flowbite Svelte

Setup styles

Section titled “Setup styles”

There is two ways to setup styles:

  1. Tailwind configuration
import flowbite from 'flowbite/plugin';
import { THEME_CONTENT, FLOWBITE_CONTENT } from '@sjsf/flowbite-theme/preset'


/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}', THEME_CONTENT, FLOWBITE_CONTENT],
  plugins: [flowbite],
}
  1. Inject prepared styles (not recommended)
// Inject them as you like
import flowbiteStyles from "@sjsf/flowbite-theme/styles.css?inline";

Extra widgets

Section titled “Extra widgets”

You can connect extra widgets using the following include imports:

// Used by default in the following fields: multiEnumField
import "@sjsf/flowbite-theme/extra-widgets/checkboxes-include"
import "@sjsf/flowbite-theme/extra-widgets/date-picker-include"
// Used by default in the following fields: fileField, filesField
import "@sjsf/flowbite-theme/extra-widgets/file-include"
import "@sjsf/flowbite-theme/extra-widgets/multi-select-include"
import "@sjsf/flowbite-theme/extra-widgets/radio-include"
import "@sjsf/flowbite-theme/extra-widgets/range-include"
import "@sjsf/flowbite-theme/extra-widgets/switch-include"
import "@sjsf/flowbite-theme/extra-widgets/textarea-include"

Widgets demo

Section titled “Widgets demo”

UI options

Section titled “UI options”
import type {
  HTMLAttributes,
  HTMLButtonAttributes,
  HTMLFormAttributes,
} from "svelte/elements";
import type { ButtonType, LayoutType } from "@sjsf/form/fields/exports";
import type { ButtonProps as ButtonPropsUnion } from "flowbite-svelte2/Button.svelte";
import type { HelperProps } from "flowbite-svelte2/Helper.svelte";
import type { LabelProps } from "flowbite-svelte2/Label.svelte";
import type { ButtonGroupProps } from "flowbite-svelte2/ButtonGroup.svelte";
import type { CheckboxProps } from "flowbite-svelte2/Checkbox.svelte";
import type { NumberInputProps } from "flowbite-svelte2/NumberInput.svelte";
import type { SelectProps } from "flowbite-svelte2/Select.svelte";
import type { InputProps } from "flowbite-svelte2/Input.svelte";
import type { DatepickerProps } from "flowbite-svelte2/Datepicker.svelte";
import type { FileuploadProps } from "flowbite-svelte2/Fileupload.svelte";
import type { MultiSelectProps } from "flowbite-svelte2/MultiSelect.svelte";
import type { RadioProps } from "flowbite-svelte2/Radio.svelte";
import type { RangeProps } from "flowbite-svelte2/Range.svelte";
import type { ToggleProps } from "flowbite-svelte2/Toggle.svelte";
import type { TextareaProps } from "flowbite-svelte2/Textarea.svelte";


type ButtonProps = Extract<
  ButtonPropsUnion,
  { type?: HTMLButtonAttributes["type"] }
>;


export interface UiOptions {
  flowbiteButton?: ButtonProps;
  flowbiteButtons?: {
    [B in ButtonType]?: ButtonProps;
  };


  flowbiteDescription?: HTMLAttributes<HTMLDivElement>;


  flowbiteErrorsList?: HTMLAttributes<HTMLUListElement>;


  flowbiteForm?: HTMLFormAttributes;


  flowbiteHelp?: HelperProps;


  flowbiteLabel?: LabelProps;


  flowbiteLayout?: HTMLAttributes<HTMLDivElement>;
  flowbiteLayouts?: {
    [L in LayoutType]?: HTMLAttributes<HTMLDivElement>;
  };
  flowbiteButtonGroup?: ButtonGroupProps;


  flowbiteSubmitButton?: ButtonProps;


  flowbiteTitle?: HTMLAttributes<HTMLParagraphElement>;


  flowbiteCheckbox?: CheckboxProps;


  flowbiteNumber?: NumberInputProps;


  flowbiteSelect?: SelectProps;


  flowbiteText?: InputProps;


  flowbiteCheckboxes?: CheckboxProps;


  flowbiteDatepicker?: DatepickerProps;


  flowbiteFile?: FileuploadProps;


  flowbiteMultiSelect?: MultiSelectProps;


  flowbiteRadio?: RadioProps;


  flowbiteRange?: RangeProps;


  flowbiteSwitch?: ToggleProps;


  flowbiteTextarea?: TextareaProps;
}