@sjsf-lab/shadcn-extras-theme

The shadcn-svelte-extras based theme for svelte-jsonschema-form.

• Documentation
• Playground

Installation

npm install @sjsf/form @sjsf/shadcn4-theme @sjsf-lab/shadcn-extras-theme

Usage

1. Install shadcn-svelte

   Installation - shadcn-svelte

2. Configuration

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

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

3. Apply theme

   <script lang="ts">
     import { createForm } from '@sjsf/form';
     import { setThemeContext } from '@sjsf/shadcn4-theme';
     import { theme } from '@sjsf-lab/shadcn-extras-theme';
     import * as components from '@sjsf/shadcn4-theme/new-york';
     import * as extraComponents from '@sjsf-lab/shadcn-extras-theme/ui';
   
     const form = createForm({
       theme,
       ...
     })
   
     setThemeContext({ components: { ...components, ...extraComponents } })
   </script>

License

MIT