@sjsf/flowbite-theme

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

• Documentation
• Playground

Installation

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

Usage

Setup styles

There is two ways to setup styles:

1. Use tailwindcss config

1import flowbite from 'flowbite/plugin';
2import { THEME_CONTENT, FLOWBITE_CONTENT } from '@sjsf/flowbite-theme/preset'
3
4/** @type {import('tailwindcss').Config} */
5export default {
6  content: ['./src/**/*.{html,js,svelte,ts}', THEME_CONTENT, FLOWBITE_CONTENT],
7  plugins: [flowbite],
8}

Or with a preset

1import themePreset from '@sjsf/flowbite-theme/preset'
2
3/** @type {import('tailwindcss').Config} */
4export default {
5  presets: [themePreset],
6}

2. Inject prepared styles (not recommended)

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

Apply theme

1<script lang="ts">
2  import { createForm } from '@sjsf/form';
3  import { theme } from '@sjsf/flowbite-theme';
4
5  const form = createForm({
6    theme,
7    ...
8  })
9</script>

License

MIT