Card and Modal components in Nova

Please describe your question properly. What exactly do you want to find in Nova ?

For my own curiosity, I looked in the generated code Tool.vue. I saw a vue component ". I was wondering that

a) where this component got defined b) are there more of these standard components that I can re-use? c) where in Nova's documentation that describe these available components.

Tool.vue

Top Sales

    <card
        class="bg-90 flex flex-col items-center justify-center"
        style="min-height: 300px"
    >
        <svg
            class="spin fill-80 mb-6"
            width="69"
            height="72"
            viewBox="0 0 23 24"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M20.12 20.455A12.184 12.184 0 0 1 11.5 24a12.18 12.18 0 0 1-9.333-4.319c4.772 3.933 11.88 3.687 16.36-.738a7.571 7.571 0 0 0 0-10.8c-3.018-2.982-7.912-2.982-10.931 0a3.245 3.245 0 0 0 0 4.628 3.342 3.342 0 0 0 4.685 0 1.114 1.114 0 0 1 1.561 0 1.082 1.082 0 0 1 0 1.543 5.57 5.57 0 0 1-7.808 0 5.408 5.408 0 0 1 0-7.714c3.881-3.834 10.174-3.834 14.055 0a9.734 9.734 0 0 1 .03 13.855zM4.472 5.057a7.571 7.571 0 0 0 0 10.8c3.018 2.982 7.912 2.982 10.931 0a3.245 3.245 0 0 0 0-4.628 3.342 3.342 0 0 0-4.685 0 1.114 1.114 0 0 1-1.561 0 1.082 1.082 0 0 1 0-1.543 5.57 5.57 0 0 1 7.808 0 5.408 5.408 0 0 1 0 7.714c-3.881 3.834-10.174 3.834-14.055 0a9.734 9.734 0 0 1-.015-13.87C5.096 1.35 8.138 0 11.5 0c3.75 0 7.105 1.68 9.333 4.319C16.06.386 8.953.632 4.473 5.057z"
                fill-rule="evenodd"
            />
        </svg>

        <h1 class="text-white text-4xl text-90 font-light mb-6">
            We're in a black hole.
        </h1>

        <p class="text-white-50% text-lg">
            You can edit this tool's component at:
            <code class="ml-1 border border-80 text-sm font-mono text-white bg-black rounded px-2 py-1">
                /nova-components/TopSales/resources/js/components/Tool.vue
            </code>
        </p>
    </card>
</div>

export default { mounted() { // }, } /* Scoped Styles */

maybe go check out https://novapackages.com/ and see whats possible & how it is done. for me that approach worked pretty good.

Thank you for all the answers. Anyway I found my own answer to the question.

Just took a look in vendor/laravel/nova/resources/js/components and I found all standard vue components of Nova.

It would be nice if they have a document describing these components so that I can re-use w/o guessing.

Cheers,