Skeleton

Installation

npm

npm i @sjsf/form @sjsf/skeleton-theme

yarn

yarn add @sjsf/form @sjsf/skeleton-theme

pnpm

pnpm add @sjsf/form @sjsf/skeleton-theme

bun

bun add @sjsf/form @sjsf/skeleton-theme

Note

This is Skeleton v3 based theme.

Install Skeleton

SvelteKit - Skeleton

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 */],
    })
  ],
}

2. 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

Demo

Form.svelte

<script lang="ts">
  import { theme } from "@sjsf/skeleton-theme";

  import { astroTheme } from "@/theme.svelte";
  import CustomForm from "@/components/custom-form.svelte";

  import { schema, uiSchema } from "./_demo-schema";

  const astro = astroTheme();

  let value = $state();
</script>

<CustomForm
  {...theme}
  bind:value
  {schema}
  {uiSchema}
  novalidate
  onSubmit={console.log}
  class="flex flex-col gap-4 {astro.darkOrLight}"
  style="margin-bottom: 1rem;"
  data-theme="cerberus"
/>

<pre>{JSON.stringify(value, null, 2)}</pre>

_demo-schema.ts

import type { Schema, UiSchemaRoot } from "@sjsf/form";

export const schema: Schema = {
  type: "object",
  title: "Demo schema",
  properties: {
    checkbox: {
      type: "boolean",
    },
    number: {
      type: "number",
      minimum: 5,
    },
    range: {
      type: "integer",
    },
    text: {
      type: "string",
    },
    textarea: {
      type: "string",
    },
    file: {
      type: "string",
      format: "data-url",
    },
    select: {
      type: "string",
      enum: ["one", "two", "three"],
    },
    multiSelect: {
      type: "array",
      items: {
        type: "string",
        enum: ["one", "two", "three"],
      },
      uniqueItems: true,
    },
    radio: {
      type: "string",
      enum: ["one", "two", "three"],
    },
    checkboxes: {
      type: "array",
      items: {
        type: "string",
        enum: ["one", "two", "three"],
      },
      uniqueItems: true,
    },
    array: {
      type: "array",
      items: {
        type: "string",
      },
    }
  },
  additionalProperties: {
    type: "integer",
  }
};

export const uiSchema: UiSchemaRoot = {
  range: {
    "ui:options": {
      "input": {
        type: "range",
      }
    }
  },
  textarea: {
    "ui:widget": "textarea",
  },
  radio: {
    "ui:widget": "radio",
  },
  checkboxes: {
    "ui:widget": "checkboxes",
  }
}