Frontend Components

Every built-in field ships in both stacks. Vue components live in resources/js/components/fields/*.vue and React components in resources/react/components/fields/*.tsx of laravilt/forms. Your custom field needs a component for the stack you use (LARAVILT_FRONTEND).

React support requires Laravilt v1.1 or later.

make:form-component --vue or --react writes a starter component to resources/js/components/forms/{name}.vue or .tsx.

Props

The component receives the props from the field's toLaraviltProps(): name, label, placeholder, helperText, disabled, readonly, required, the current value, and your custom props. It reports changes through update:modelValue (Vue) or onUpdateModelValue (React).

Vue

Register it globally with the laravilt- prefix in your Vue app setup:

React

Register it in the shared component registry:

The React schema renderer (Schema.tsx) falls back to this registry for component types it doesn't know. A field class EmojiPicker sends the type emoji_picker, which resolves to laravilt-emoji-picker.

On the Vue stack, the schema renderer (Schema.vue) does the same with the app's global components. For a type it doesn't know, it tries a component registered under the type itself, then one registered as laravilt-<type with _ replaced by ->. So app.component('laravilt-emoji-picker', EmojiPicker) above is enough for the field to render in resource forms. LaraviltComponentRenderer resolves the same laravilt-* names on both stacks.

UI building blocks

The built-in fields use shadcn-vue / reka-ui (Vue) or shadcn/ui (React), Lucide icons (lucide-vue-next / lucide-react) and Tailwind CSS v4 classes. Using the same building blocks keeps custom fields consistent with the rest of the panel.