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...