Shadcn Card: Customizing Form Layout

Link to the repository

[Only for premium members]

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/auth-simple-layout.tsx (the default)
• layouts/auth/auth-card-layout.tsx
• layouts/auth/auth-split-layout.tsx

You can try changing it in the auth-layout.tsx file. For this example, we will use the auth-card-layout.

resources/js/layouts/auth-layout.tsx:

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; 
import AuthLayoutTemplate from '@/layouts/auth/auth-card-layout'; 

This is the Login form with the default auth-simple-layout.

And this is the form with the Card, powered by the auth-card-layout.

Inside that auth-card-layout, we may find the...