Skip to content
svelte-jsonschema-form
Playground Form Builder

shadcn-svelte

tw3tw4

Installation

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

bits-ui ^2.2.0 and @internationalized/date ^3.8.1 may be required.

Install shadcn-svelte

Section titled “Install shadcn-svelte”

Installation - shadcn-svelte

Setup styles

Section titled “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
  ...
}
  1. Inject prepared styles (not recommended)
// Inject them as you like
import shadcnStyles from '@sjsf/shadcn-theme/styles.css?inline';

Components

Section titled “Components”

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

import { setThemeContext } from '@sjsf/shadcn-theme';
import * as components from '@sjsf/shadcn-theme/default';
// or import * as components from '@sjsf/shadcn-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/shadcn-theme/extra-widgets/checkboxes-include"
import "@sjsf/shadcn-theme/extra-widgets/combobox-include"
import "@sjsf/shadcn-theme/extra-widgets/date-picker-include"
// Used by default in the following fields: fileField, filesField
import "@sjsf/shadcn-theme/extra-widgets/file-include"
import "@sjsf/shadcn-theme/extra-widgets/multi-select-include"
import "@sjsf/shadcn-theme/extra-widgets/radio-buttons-include"
import "@sjsf/shadcn-theme/extra-widgets/radio-include"
import "@sjsf/shadcn-theme/extra-widgets/range-include"
import "@sjsf/shadcn-theme/extra-widgets/switch-include"
import "@sjsf/shadcn-theme/extra-widgets/textarea-include"

UI options

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


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 {
  shadcnButton?: ComponentProps<typeof Button>;
  shadcnButtons?: {
    [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>;


  shadcnLabel?: 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>;
  };
  shadcnSubmitButton?: ComponentProps<typeof Button>;
  /**
   * Overrides the attributes of the field title
   */
  titleAttributes?: HTMLAttributes<HTMLDivElement>;


  shadcnCheckbox?: WithoutChildrenOrChild<CheckboxRootProps>;


  shadcnNumber?: InputProps;


  shadcnSelect?: Omit<SelectSingleRootProps, "type">;
  shadcnSelectTrigger?: SelectTriggerProps;


  shadcnText?: InputProps;


  shadcnCheckboxes?: WithoutChildrenOrChild<CheckboxRootProps>;


  shadcnComboboxTrigger?: ComponentProps<typeof Button>;
  shadcnComboboxInput?: CommandInputProps;
  shadcnComboboxEmptyText?: string;


  shadcnDatePicker?: Omit<
    WithoutChildrenOrChild<CalendarSingleRootProps>,
    "type"
  >;
  shadcnDatePickerTrigger?: ComponentProps<typeof Button>;
  shadcnDateFormatter?: (date: Date) => string;


  file?: HTMLInputAttributes;


  shadcnMultiSelect?: Omit<SelectMultipleRootProps, "type">;
  shadcnMultiSelectTrigger?: SelectTriggerProps;


  shadcnRadioButtons?: ToggleGroupProps;
  shadcnRadioButtonsItem?: ToggleGroupItemProps & ToggleVariants;


  shadcnRadioGroup?: WithoutChildrenOrChild<RadioGroupRootProps>;
  shadcnRadioItem?: Omit<WithoutChildrenOrChild<RadioGroupItemProps>, "value">;


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


  shadcnSwitch?: WithoutChildrenOrChild<SwitchRootProps>;


  textarea?: HTMLTextareaAttributes;
}

Widgets demo

Section titled “Widgets demo”