Shadcn

Installation

npm

npm i @sjsf/shadcn-theme

yarn

yarn add @sjsf/shadcn-theme

pnpm

pnpm add @sjsf/shadcn-theme

bun

bun add @sjsf/shadcn-theme

Note

This is shadcn-svelte@next based theme.

Install Shadcn Svelte

Installation - shadcn-svelte

Setup styles

There is two ways to setup styles:

1. 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
  ...
}

2. 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';
import { components } from '@sjsf/shadcn-theme/default';
// or import { components } from '@sjsf/shadcn-theme/new-york';

setThemeContext({ components })

Caution

You should define components: ThemeComponents yourself:

• to reduce final bundle size

• to avoid https://github.com/x0k/svelte-jsonschema-form/issues/48

  In this case you also should remove bind:this={ref} bindings from your components.

Demo

Caution

Currently, some shadcn-svelte components do not work in the shadow DOM, which is used in the documentation and playground.

See https://github.com/huntabyte/bits-ui/issues/828 for more details.

Form.svelte

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

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

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

  const astro = useAstro();

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

  setThemeContext({ components });
</script>

<RawForm
  {form}
  novalidate
  class="flex flex-col gap-4 {astro.darkOrLight}"
  style="margin-bottom: 1rem;"
/>

<pre>{JSON.stringify(form.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",
  }
}