@sjsf-lab/shadcn-extras-theme

@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

• 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/shadcn4-theme/dist";
  @source "../node_modules/@sjsf-lab/shadcn-extras-theme/dist";
  

• 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