Skip to content
svelte-jsonschema-form
Playground

shadcn-svelte

tw3tw4

Installation

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

bits-ui ^2.5.0 and @internationalized/date ^3.8.1 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"

UI options

Section titled “UI options”
import type { ComponentProps } from "svelte";
import type {
  HTMLAttributes,
  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";


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>;
  };
  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;
}

Widgets demo

Section titled “Widgets demo”