Skip to content
svelte-jsonschema-form v3
Playground Form Builder

shadcn-svelte

Installation

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

bits-ui ^2.14.0 and @internationalized/date ^3.10.0 may be required.

Install shadcn-svelte

Section titled “Install shadcn-svelte”

Installation - shadcn-svelte

Configuration

Section titled “Configuration”

Register the theme source path by adding the following line to the app.css file:.

@source "../node_modules/@sjsf/shadcn4-theme/dist";

Components

Section titled “Components”

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

import { setThemeContext } from '@sjsf/shadcn4-theme';
import * as components from '@sjsf/shadcn4-theme/new-york';


setThemeContext({ components })

Extra widgets

Section titled “Extra widgets”

You can connect extra widgets using the following include imports:

// Used by default in the following fields: multiEnumField
import "@sjsf/shadcn4-theme/extra-widgets/checkboxes-include"
import "@sjsf/shadcn4-theme/extra-widgets/combobox-include"
import "@sjsf/shadcn4-theme/extra-widgets/date-picker-include"
// Used by default in the following fields: fileField, filesField
import "@sjsf/shadcn4-theme/extra-widgets/file-include"
import "@sjsf/shadcn4-theme/extra-widgets/multi-select-include"
import "@sjsf/shadcn4-theme/extra-widgets/radio-buttons-include"
import "@sjsf/shadcn4-theme/extra-widgets/radio-include"
import "@sjsf/shadcn4-theme/extra-widgets/range-include"
import "@sjsf/shadcn4-theme/extra-widgets/switch-include"
import "@sjsf/shadcn4-theme/extra-widgets/textarea-include"

Widgets demo

Section titled “Widgets demo”

Supported validation events

Section titled “Supported validation events”
checkbox oninput, onchange, onblur
checkboxes oninput, onchange, onblur
file onchange, onblur
multiFile onchange, onblur
number oninput, onchange, onblur
select oninput, onchange, onblur
text oninput, onchange, onblur
combobox oninput, onchange, onblur
datePicker oninput, onchange, onblur
multiSelect oninput, onchange, onblur
radioButtons oninput, onchange, onblur
radio oninput, onchange, onblur
range oninput, onchange
switch oninput, onchange, onblur
textarea oninput, onchange, onblur

UI options

Section titled “UI options”
import type { ComponentProps } from "svelte";
import type {
  HTMLAttributes,
  HTMLFieldsetAttributes,
  HTMLFormAttributes,
  HTMLInputAttributes,
  HTMLInputTypeAttribute,
  HTMLTextareaAttributes,
} from "svelte/elements";
import type {
  CalendarSingleRootProps,
  CheckboxRootProps,
  LabelRootProps,
  RadioGroupItemProps,
  RadioGroupRootProps,
  SelectMultipleRootProps,
  SelectSingleRootProps,
  SelectTriggerProps,
  SliderSingleRootProps,
  SwitchRootProps,
  WithElementRef,
  WithoutChildrenOrChild,
  CommandInputProps,
  SingleToggleGroupRootPropsWithoutHTML,
  BitsPrimitiveDivAttributes,
  Without,
  ToggleGroupRootPropsWithoutHTML,
  ToggleGroupItemProps,
} from "bits-ui";
import type { ButtonType, LayoutType } from "@sjsf/form/fields/components";
import type { Button } from "@sjsf/shadcn4-theme/new-york";
import type { ButtonGroupProps, FieldProps } from '@sjsf/shadcn4-theme/components/layout.svelte'


type InputType = Exclude<HTMLInputTypeAttribute, "file">;


type InputProps = WithElementRef<
  Omit<HTMLInputAttributes, "type"> &
    (
      | { type: "file"; files?: FileList }
      | { type?: InputType; files?: undefined }
    )
>;


type ToggleVariants = {
  variant?: "default" | "outline" | undefined;
  size?: "default" | "sm" | "lg" | undefined;
};


type ToggleGroupProps = SingleToggleGroupRootPropsWithoutHTML &
  Without<BitsPrimitiveDivAttributes, ToggleGroupRootPropsWithoutHTML> &
  ToggleVariants;


export interface UiOptions {
  shadcn4Button?: ComponentProps<typeof Button>;
  shadcn4Buttons?: {
    [B in ButtonType]: ComponentProps<typeof Button>;
  };
  /**
   * 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>;


  shadcn4Label?: LabelRootProps;
  /**
   * 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>;
  };
  shadcn4ButtonGroup?: ButtonGroupProps;
  shadcn4Field?: FieldProps;
  shadcn4FieldSet?: HTMLFieldsetAttributes;
  shadcn4SubmitButton?: ComponentProps<typeof Button>;
  /**
   * Overrides the attributes of the field title
   */
  titleAttributes?: HTMLAttributes<HTMLDivElement>;


  shadcn4Checkbox?: WithoutChildrenOrChild<CheckboxRootProps>;


  shadcn4Number?: InputProps;


  shadcn4Select?: Omit<SelectSingleRootProps, "type">;
  shadcn4SelectTrigger?: SelectTriggerProps;


  shadcn4Text?: InputProps;


  shadcn4Checkboxes?: WithoutChildrenOrChild<CheckboxRootProps>;


  shadcn4ComboboxTrigger?: ComponentProps<typeof Button>;
  shadcn4ComboboxInput?: CommandInputProps;
  shadcn4ComboboxEmptyText?: string;


  shadcn4DatePicker?: Omit<
    WithoutChildrenOrChild<CalendarSingleRootProps>,
    "type"
  >;
  shadcn4DatePickerTrigger?: ComponentProps<typeof Button>;
  shadcn4DateFormatter?: (date: Date) => string;


  file?: HTMLInputAttributes;


  shadcn4MultiSelect?: Omit<SelectMultipleRootProps, "type">;
  shadcn4MultiSelectTrigger?: SelectTriggerProps;


  shadcn4RadioButtons?: ToggleGroupProps;
  shadcn4RadioButtonsItem?: ToggleGroupItemProps & ToggleVariants;


  shadcn4RadioGroup?: WithoutChildrenOrChild<RadioGroupRootProps>;
  shadcn4RadioItem?: Omit<WithoutChildrenOrChild<RadioGroupItemProps>, "value">;


  shadcn4Range?: Omit<WithoutChildrenOrChild<SliderSingleRootProps>, "type">;


  shadcn4Switch?: WithoutChildrenOrChild<SwitchRootProps>;


  textarea?: HTMLTextareaAttributes;
}