shadcn-svelte-extras

Installation

npm

npm i @sjsf/shadcn4-theme @sjsf-lab/shadcn-extras-theme

yarn

yarn add @sjsf/shadcn4-theme @sjsf-lab/shadcn-extras-theme

pnpm

pnpm add @sjsf/shadcn4-theme @sjsf-lab/shadcn-extras-theme

bun

bun add @sjsf/shadcn4-theme @sjsf-lab/shadcn-extras-theme

Required peer dependencies: @sjsf/form@^3.0.0 @sjsf/shadcn4-theme@^3.0.0 bits-ui@^2.14.0 clsx@^2.1.0 svelte@^5.30.0 tailwind-merge@^3.3.0

Optional peer dependencies: @lucide/svelte@^0.544.0 @zxcvbn-ts/core@^3.0.0 @zxcvbn-ts/language-common@^3.0.0 @zxcvbn-ts/language-en@^3.0.0 country-flag-icons@^1.5.0 runed@^0.31.0 svelte-tel-input@^3.6.0 svelte-toolbelt@^0.9.0 tailwind-variants@^3.1.0 yeezy-dates@^1.0.0

Install shadcn-svelte

Installation - shadcn-svelte

Configuration

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

@source "../node_modules/@sjsf-lab/shadcn-extras-theme/dist";

Components

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

Note

You should prefer to use components from your code base to avoid code duplication

import { setThemeContext } from '@sjsf/shadcn4-theme';
import * as components from '@sjsf/shadcn4-theme/new-york';
import * as extraComponents from '@sjsf-lab/shadcn-extras-theme/ui';

setThemeContext({ components: { ...components, ...extraComponents } })

Extra widgets

You can connect extra widgets using the following include imports:

Note

For a widget to be applied, it must be explicitly specified in the UI schema or used in the field as the default widget.

import "@sjsf-lab/shadcn-extras-theme/extra-widgets/file-drop-zone-include"
import "@sjsf-lab/shadcn-extras-theme/extra-widgets/ip-v4-address-input-include"
import "@sjsf-lab/shadcn-extras-theme/extra-widgets/nlp-date-input-include"
import "@sjsf-lab/shadcn-extras-theme/extra-widgets/password-include"
import "@sjsf-lab/shadcn-extras-theme/extra-widgets/phone-input-include"
import "@sjsf-lab/shadcn-extras-theme/extra-widgets/star-rating-include"
import "@sjsf-lab/shadcn-extras-theme/extra-widgets/tags-input-include"

Widgets demo

Form

JSON Schema

{
  "type": "object",
  "properties": {
    "fileDropZone": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "format": "data-url"
        },
        "error": {
          "type": "string",
          "format": "data-url"
        }
      }
    },
    "fileDropZoneMultiple": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        }
      }
    },
    "ipV4AddressInput": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "nlpDateInput": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "password": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "phoneInput": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "starRating": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      }
    },
    "tagsInput": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        }
      }
    }
  }
}

UI Schema

{
  "fileDropZone": {
    "default": {
      "ui:components": {
        "stringField": "fileField",
        "fileWidget": "shadcnExtrasFileDropZoneWidget"
      },
      "ui:options": {
        "title": "fileDropZone"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "fileField",
        "fileWidget": "shadcnExtrasFileDropZoneWidget"
      },
      "ui:options": {
        "title": "fileDropZone"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "fileDropZoneMultiple": {
    "default": {
      "ui:components": {
        "arrayField": "arrayFilesField",
        "fileWidget": "shadcnExtrasFileDropZoneWidget"
      },
      "ui:options": {
        "title": "fileDropZoneMultiple"
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "arrayFilesField",
        "fileWidget": "shadcnExtrasFileDropZoneWidget"
      },
      "ui:options": {
        "title": "fileDropZoneMultiple"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "ipV4AddressInput": {
    "default": {
      "ui:components": {
        "textWidget": "shadcnExtrasIPv4AddressInputWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "ipV4AddressInput"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "shadcnExtrasIPv4AddressInputWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "ipV4AddressInput"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "nlpDateInput": {
    "default": {
      "ui:components": {
        "textWidget": "shadcnExtrasNLPDateInputWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "nlpDateInput"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "shadcnExtrasNLPDateInputWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "nlpDateInput"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "password": {
    "default": {
      "ui:components": {
        "textWidget": "shadcnExtrasPasswordWidget"
      },
      "ui:options": {
        "title": "password"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "shadcnExtrasPasswordWidget"
      },
      "ui:options": {
        "title": "password"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "phoneInput": {
    "default": {
      "ui:components": {
        "textWidget": "shadcnExtrasPhoneInputWidget"
      },
      "ui:options": {
        "title": "phoneInput"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "shadcnExtrasPhoneInputWidget"
      },
      "ui:options": {
        "title": "phoneInput"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "starRating": {
    "default": {
      "ui:components": {
        "numberWidget": "shadcnExtrasStarRatingWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "starRating"
      }
    },
    "error": {
      "ui:components": {
        "numberWidget": "shadcnExtrasStarRatingWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "starRating"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "tagsInput": {
    "default": {
      "ui:components": {
        "arrayField": "arrayTagsField",
        "tagsWidget": "shadcnExtrasTagsInputWidget"
      },
      "ui:options": {
        "title": "tagsInput"
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "arrayTagsField",
        "tagsWidget": "shadcnExtrasTagsInputWidget"
      },
      "ui:options": {
        "title": "tagsInput"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  }
}