Skip to content
svelte-jsonschema-form v3
PlaygroundForm Builder

shadcn-svelte tw3

v3.1.2 GitHub npm/npmx Changelog

Installation

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

Required peer dependencies: @lucide/svelte@0.501.0 @sjsf/form@3.5.0 bits-ui@2.2.0 clsx@2.1.0 svelte@5.33.0 tailwind-merge@2.6.0 tailwind-variants@0.3.0

Optional peer dependencies: @internationalized/date@3.8.1

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, arrayFilesField, nativeFileField, nativeFilesField, arrayNativeFilesField
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"

Widgets demo

Section titled “Widgets demo”

UI options

Section titled “UI options”
import type { ButtonType, LayoutType } from "@sjsf/form/fields/components";
import type { Button } from "@sjsf/shadcn-theme/default";
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 { ComponentProps } from "svelte";
import type {
  HTMLAttributes,
  HTMLFormAttributes,
  HTMLInputAttributes,
  HTMLInputTypeAttribute,
  HTMLTextareaAttributes,
} from "svelte/elements";


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