MoonShine
Storybook / HTML Custom Elements Back to website ↗

MoonShine 5

Web Components

Native HTML tags. Original MoonShine styles and behavior.

Live preview

HTML

Once the module is loaded, the tag works in plain HTML.

Attributes

Live

Attributes apply to the live example. Fields emit native input and change events and expose value, checked and disabled; setContent() replaces a component's content. error="Message" turns on the validation error state; an empty error only highlights the field.

Quick start

One module. Plain HTML.

The module registers all tags and loads the CSS, palette and JavaScript from the installed MoonShine 5.x-dev. Light DOM keeps the original styles and native forms working, but main.css (including Tailwind preflight) and Alpine.js apply to the whole page — on third-party sites with their own styles, embed the components in an iframe. EasyMDE is loaded only when the page contains moonshine-field-markdown.

HTML templates are loaded from the catalog generated from the installed MoonShine. Examples and Custom Elements contain no Blade. Relationship demos use local data; Eloquent operations, search and persistence require your application API.