Card

Preview

Code

Style:

Shadcn

Default

Default CSS

Create project

Deploy your new project in one-click.

Cancel

Deploy

<vanilla-card class="w-[350px]">
    <card-header>
        <card-title>Create project</card-title>
        <card-description
            >Deploy your new project in one-click.</card-description
        >
    </card-header>
    <card-content>
        <form>
            <div class="grid w-full items-center gap-4">
                <div class="flex flex-col gap-y-1.5">
                    <vanilla-label for="name">Name</vanilla-label>
                    <vanilla-input id="name" placeholder="Name of your project"
                    ></vanilla-input>
                </div>
                <div class="flex flex-col gap-y-1.5">
                    <vanilla-label for="framework">Framework</vanilla-label>
                    <vanilla-select>
                        <select-trigger id="framework">
                            <select-value placeholder="Select"></select-value>
                        </select-trigger>
                        <select-content position="popper">
                            <select-item data-value="next">Next.js</select-item>
                            <select-item data-value="sveltekit"
                                >SvelteKit</select-item
                            >
                            <select-item data-value="astro">Astro</select-item>
                            <select-item data-value="nuxt">Nuxt.js</select-item>
                        </select-content>
                    </vanilla-select>
                </div>
            </div>
        </form>
    </card-content>
    <card-footer class="flex justify-between">
        <vanilla-button variant="outline">Cancel</vanilla-button>
        <vanilla-button>Deploy</vanilla-button>
    </card-footer>
</vanilla-card>

<vanilla-card style="width: 350px;">
    <card-header>
        <card-title>Create project</card-title>
        <card-description
            >Deploy your new project in one-click.</card-description
        >
    </card-header>
    <card-content>
        <form>
            <div
                style="display: grid; width: 100%; align-items: center; gap: 16px;"
            >
                <div style="display: flex; flex-direction: column; gap: 6px;">
                    <vanilla-label for="name">Name</vanilla-label>
                    <vanilla-input id="name" placeholder="Name of your project"
                    ></vanilla-input>
                </div>
                <div style="display: flex; flex-direction: column; gap: 6px;">
                    <vanilla-label for="framework">Framework</vanilla-label>
                    <vanilla-select>
                        <select-trigger id="framework">
                            <select-value placeholder="Select"></select-value>
                        </select-trigger>
                        <select-content position="popper">
                            <select-item data-value="next">Next.js</select-item>
                            <select-item data-value="sveltekit"
                                >SvelteKit</select-item
                            >
                            <select-item data-value="astro">Astro</select-item>
                            <select-item data-value="nuxt">Nuxt.js</select-item>
                        </select-content>
                    </vanilla-select>
                </div>
            </div>
        </form>
    </card-content>
    <card-footer style="display: flex; justify-content: space-between;">
        <vanilla-button style="border: 1px solid; background: transparent;"
            >Cancel</vanilla-button
        >
        <vanilla-button>Deploy</vanilla-button>
    </card-footer>
</vanilla-card>

Get Started

Components