@sjsf/flowbite-theme

@sjsf/flowbite-theme

The flowbite-svelte (tailwind v3) based theme for svelte-jsonschema-form.

• Documentation
• Playground

Installation

npm install @sjsf/form@next @sjsf/flowbite-theme@next

Usage

Setup styles

There is two ways to setup styles:

• Use tailwindcss config

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],
}

Or with a preset

import themePreset from '@sjsf/flowbite-theme/preset'

/** @type {import('tailwindcss').Config} */
export default {
  presets: [themePreset],
}

• Inject prepared styles (not recommended)

// Inject them as you like
import themeStyles from "@sjsf/flowbite-theme/styles.css?inline";

Apply theme

<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { theme } from '@sjsf/flowbite-theme';

  const form = createForm({
    theme,
    ...
  })
</script>

License

MIT