Skip to content
svelte-jsonschema-form
Playground

Skeleton v3 RC1

v3 RC1v3

Installation

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

Install Skeleton

Section titled “Install Skeleton”

SvelteKit - Skeleton

Setup styles

Section titled “Setup styles”

There is two ways to setup styles:

  1. Use tailwindcss config
import { skeleton } from '@skeletonlabs/skeleton/plugin';
import * as themes from '@skeletonlabs/skeleton/themes';
import forms from '@tailwindcss/forms'
import { THEME_CONTENT } from '@sjsf/skeleton-theme/preset'


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

Bundled themes:

  • cerberus
  • catppuccin
  • pine
  • rose

Extra widgets

Section titled “Extra widgets”
  • checkboxes
  • date-picker
  • file
  • multi-select
  • radio
  • range
  • textarea

UI options

Section titled “UI options”
import type {
  HTMLAttributes,
  HTMLButtonAttributes,
  HTMLFormAttributes,
  HTMLInputAttributes,
  HTMLLabelAttributes,
  HTMLSelectAttributes,
  HTMLTextareaAttributes,
} from "svelte/elements";
import type { ButtonType, LayoutType } from "@sjsf/form/fields/components";


export interface UiOptions {
  /**
   * Overrides the attributes of any button component.
   */
  button?: HTMLButtonAttributes;
  /**
   * Overrides the attributes of a button with a specific type.
   * This override takes precedence over the `button` override, but does not replace it.
   */
  buttons?: {
    [B in ButtonType]?: HTMLButtonAttributes;
  };
  /**
   * Overrides the attributes of the description.
   */
  descriptionAttributes?: HTMLAttributes<HTMLDivElement>;
  /**
   * Overrides the attributes of the errors list.
   */
  errorsList?: HTMLAttributes<HTMLUListElement>;


  form?: HTMLFormAttributes;
  /**
   * Overrides the attributes of the help.
   */
  helpAttributes?: HTMLAttributes<HTMLDivElement>;
  /**
   * Overrides the attributes of the field label.
   */
  labelAttributes?: HTMLLabelAttributes;
  /**
   * Overrides the attributes of any layout component.
   */
  layout?: HTMLAttributes<HTMLDivElement>;
  /**
   * Overrides the attributes of a layout with a specific type.
   * This override takes precedence over the `layout` override, but does not replace it.
   */
  layouts?: {
    [L in LayoutType]?: HTMLAttributes<HTMLDivElement>;
  };
  submitButton?: HTMLButtonAttributes;
  /**
   * Overrides the attributes of the field title
   */
  titleAttributes?: HTMLAttributes<HTMLDivElement>;


  checkbox?: HTMLInputAttributes;


  number?: HTMLInputAttributes;


  select?: HTMLSelectAttributes;


  text?: HTMLInputAttributes;


  checkboxes?: HTMLInputAttributes;


  datePicker?: HTMLInputAttributes;


  file?: HTMLInputAttributes;


  multiSelect?: HTMLSelectAttributes;


  radio?: HTMLInputAttributes;


  range?: HTMLInputAttributes;


  textarea?: HTMLTextareaAttributes;
}

Widgets demo

Section titled “Widgets demo”