Shadcn

Installation

npm

npm i @sjsf/basic-theme@next @sjsf/shadcn-theme@next

yarn

yarn add @sjsf/basic-theme@next @sjsf/shadcn-theme@next

pnpm

pnpm add @sjsf/basic-theme@next @sjsf/shadcn-theme@next

bun

bun add @sjsf/basic-theme@next @sjsf/shadcn-theme@next

Note

This is shadcn-svelte@next based theme.

Install Shadcn Svelte

Installation - shadcn-svelte

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

2. Inject prepared styles (not recommended)

// Inject them as you like
import shadcnStyles from '@sjsf/shadcn-theme/styles.css?inline';

Components

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

import { setThemeContext } from '@sjsf/shadcn-theme';
import { components } from '@sjsf/shadcn-theme/default';
// or import { components } from '@sjsf/shadcn-theme/new-york';

setThemeContext({ components })

Note

You can define components: ThemeComponents yourself to reduce final bundle size

Extra widgets

• checkboxes
• date-picker
• file
• multi-select
• radio
• range
• switch
• textarea

Widgets demo

Caution

Currently, some shadcn-svelte components do not work in the shadow DOM, which is used in the documentation and playground.

See https://github.com/huntabyte/bits-ui/issues/828 for more details.

Form

JSON Schema

{
  "type": "object",
  "properties": {
    "checkbox": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      }
    },
    "checkboxes": {
      "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
        }
      }
    },
    "file": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "format": "data-url"
        },
        "error": {
          "type": "string",
          "format": "data-url"
        }
      }
    },
    "multiFile": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        }
      }
    },
    "number": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      }
    },
    "select": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      }
    },
    "text": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "datePicker": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "multiSelect": {
      "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
        }
      }
    },
    "radio": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      }
    },
    "range": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      }
    },
    "switch": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      }
    },
    "textarea": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    }
  }
}

UI Schema

{
  "checkbox": {
    "default": {},
    "error": {}
  },
  "checkboxes": {
    "default": {},
    "error": {}
  },
  "file": {
    "default": {},
    "error": {}
  },
  "multiFile": {
    "default": {},
    "error": {}
  },
  "number": {
    "default": {},
    "error": {}
  },
  "select": {
    "default": {},
    "error": {}
  },
  "text": {
    "default": {},
    "error": {}
  },
  "datePicker": {
    "default": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    }
  },
  "multiSelect": {
    "default": {
      "ui:components": {
        "checkboxesWidget": "multiSelectWidget"
      },
      "ui:options": {
        "useLabel": true
      }
    },
    "error": {
      "ui:components": {
        "checkboxesWidget": "multiSelectWidget"
      },
      "ui:options": {
        "useLabel": true
      }
    }
  },
  "radio": {
    "default": {
      "ui:components": {
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    },
    "error": {
      "ui:components": {
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    }
  },
  "range": {
    "default": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    },
    "error": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    }
  },
  "switch": {
    "default": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      }
    },
    "error": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      }
    }
  },
  "textarea": {
    "default": {
      "ui:components": {
        "textWidget": "textareaWidget"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "textareaWidget"
      }
    }
  }
}