Shadcn Vue Card: Customizing Form Layout

Currently, our form layout is straightforward - one field per line. It takes a lot of horizontal space. Why can't we fit a few fields in one row?

For that, we will use the Card component from Shadcn.

How Card is Used in Starter Kit

This lesson is an example of how to analyze already-existing starter kit components and generate ideas.

Auth screens have three layouts to choose from:

• layouts/auth/AuthSimpleLayout.vue (the default)
• layouts/auth/AuthCardLayout.vue
• layouts/auth/AuthSplitLayout.vue

You can try changing it in the AuthLayout.vue file. For this example, we will use the AuthCardLayout.

resources/js/layouts/AuthLayout.vue:

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'; 
import AuthLayout from '@/layouts/auth/AuthCardLayout.vue'; 

This is the Login form with the default AuthSimpleLayout.

And this is the form with the Card, powered by the AuthCardLayout.

Inside that AuthCardLayout, we may find the parts of the Shadcn Card component.

resources/js/layouts/auth/AuthCardLayout.vue

<script setup lang="ts">
import AppLogoIcon from '@/components/AppLogoIcon.vue';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Link } from '@inertiajs/vue3';
 
defineProps<{
    title?: string;
    description?: string;
}>();
</script>
 
<template>
    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
        <div class="flex w-full max-w-md flex-col gap-6">
            <Link :href="route('home')" class="flex items-center gap-2 self-center font-medium">
                <div class="flex h-9 w-9 items-center justify-center">
                    <AppLogoIcon class="size-9 fill-current text-black dark:text-white" />
                </div>
            </Link>
 
            <div class="flex flex-col gap-6">
                <Card class="rounded-xl">
                    <CardHeader class="px-10 pb-0 pt-8 text-center">
                        <CardTitle class="text-xl">{{ title }}</CardTitle>
                        <CardDescription>
                            {{ description }}
                        </CardDescription>
                    </CardHeader>
                    <CardContent class="px-10 py-8">
                        <slot />
                    </CardContent>
                </Card>
            </div>
        </div>
    </div>
</template>

See those <Card>, <CardHeader>, <CartTitle>, <CartDescription>, and <CardContent>?

Let's try to use them in our Create Task form.

Using Card in Create Task Form

Look at our form now. Too much horizontal space, right?

Let's change it into three columns in a row.

We will not use the same components or the same way as the Auth layout. That's the main message: use your imagination and design skills, experiment, and build your own form layouts.

In our example, we will just add a border, divide the form into three columns, and separate the Button into the Card footer.

resources/js/pages/Tasks/Create.vue:

import { Card, CardContent, CardFooter } from '@/components/ui/card';
 
// ...
<form class="space-y-6" @submit.prevent="submitForm">
    <Card class="py-6">
        <CardContent class="grid grid-cols-3 gap-4 space-y-6">
            <div class="grid gap-2">
                <Label htmlFor="name">Task Name *</Label>
 
                <Input id="name" v-model="form.name" class="mt-1 block w-full" />
 
                <InputError :message="form.errors.name" />
            </div>
            // Other fields
        </CardContent>
        <CardFooter>
            <div class="flex items-center gap-4">
                <Button :disabled="form.processing" variant="default">Create Task</Button>
            </div>
        </CardFooter>
    </Card>
</form>

Here's the visual result:

This is just a simple example. I won't change the layout for other forms in this course. As I said, feel free to experiment with your layouts.

Here's the GitHub commit for this lesson.