Shadcn

Installation

npm i @sjsf/shadcn-theme

yarn add @sjsf/shadcn-theme

pnpm add @sjsf/shadcn-theme

bun add @sjsf/shadcn-theme

Install Shadcn Svelte

Installation - shadcn-svelte

Setup styles

There is two ways to setup styles:

Use tailwindcss config

import { THEME_CONTENT } from '@sjsf/shadcn-theme/preset'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}', THEME_CONTENT],
  // other tailwind config
  ...
}

Inject prepared styles (not recommended)

// Inject them as you like
import shadcnStyles from '@sjsf/shadcn-theme/styles.css?inline';

Components

Since shadcn-svelte is not a component library you should provide your components via setThemeContext.

import { setThemeContext } from '@sjsf/shadcn-theme';

setThemeContext({ components: { ... } })

However, you can use already prepared component sets or mix them with your own components:

@sjsf/shadcn-theme/default
@sjsf/shadcn-theme/new-york

Demo

Form.svelte
_demo-schema.ts

<script lang="ts">
  import { SimpleForm } from "@sjsf/form";
  import { theme, setThemeContext } from "@sjsf/shadcn-theme";
  import { components } from "@sjsf/shadcn-theme/default";

  import { useAstro } from "@/astro.svelte";
  import { useCustomForm } from "@/components/custom-form";

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

  const astro = useAstro();

  const form = useCustomForm({
    ...theme,
    schema,
    uiSchema,
  });

  setThemeContext({ components });
</script>

<SimpleForm {form} novalidate class="flex flex-col gap-4 {astro.darkOrLight}" />

<pre style="padding-top: 1rem;">{JSON.stringify(form.value, null, 2)}</pre>

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