Creating a login form is one of the essential and most important steps in building a new application. A beautifully created and well-maintained login form plays a crucial role in the user experience and security of the application. In this blog, we will walk through the process of creating a simple and effective login form using the shadcn ui library.
What is shadcn/ui?
Before starting coding, we should take a moment to understand what is shadcn ui and how it will help in creating beautiful user interfaces and components in seconds. Shadcn ui is a modern component library designed mainly for React apps, which will provide a collection of ui components that are styled and ready to use. Shadcn ui is working based on Tailwind CSS, React, and Radix ui. Shadcn ui focuses on the usability and flexibility of creating ui components, while also allowing developers to customize the components according to their design needs. The developers have complete control over the ui components.
Create a React App
Before starting, we need a React app. If you don't have a React app, create a new one with this command.
npm create vite@latest my-app
Install dependencies:
cd my-app
npm install
Start the development server:
npm run dev
Install Tailwind CSS
Next, we need to install Tailwind CSS because the Shadcn uses Tailwind CSS for styling.
Install the required packages:
npm install tailwindcss @tailwindcss/vite
Add the @tailwindcss/vite plugin to your Vite configuration.
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})Add Tailwind import inside your main CSS file.
Open:
src/index.css
Add:
@import "tailwindcss";
Now Tailwind CSS is ready.
Install shadcn/ui CLI
Now install the shadcn CLI tool.
npx shadcn@latest init
The CLI will ask several questions. After setup, the CLI will configure your project automatically.
Now your project is ready to use the shadcn ui components.
Step 1: Add Required Components
We will use the following components for the login form:
Install them using the CLI:
npx shadcn@latest add input button card label
This will generate reusable components inside:
src/components/ui
Step 2: Create the Login Form Layout
Let’s start by building the UI structure using a Card layout.
Open your App.tsx (or create a new Login.tsx component):
import {
Card,
CardContent,
CardHeader,
CardTitle
} from "./components/ui/card"
export default function Login() {
return (
<div className="flex items-center justify-center min-h-screen bg-muted">
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle>Login</CardTitle>
</CardHeader>
<CardContent>
{/* Form will go here */}
</CardContent>
</Card>
</div>
)
}Step 3: Add Input Fields
Now we can add inputs for email and password.
import { Input } from "./components/ui/input"
import { Label } from "./components/ui/label"<CardContent>
<div className="space-y-4">
<div className="space-y-2">
<Label>Email</Label>
<Input type="email" placeholder="Enter your email" />
</div>
<div className="space-y-2">
<Label>Password</Label>
<Input type="password" placeholder="Enter your password" />
</div>
</div>
</CardContent>
Step 4: Add a Submit Button
Now we can add a login button.
import { Button } from "./components/ui/button"Place it below the inputs:
<div className="space-y-4">
{/* inputs */}
<Button className="w-full">
Sign In
</Button>
</div>
Step 5: Manage Form State
Now we make the form functional using React state.
import { useState } from "react"
export default function Login() {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
return (
// UI code
)
}Update inputs to use state:
<Input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email"
/>
<Input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter your password"
/>
Step 6: Handle Form Submission
Now let’s handle the form submission.
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
// Form submit logic
console.log("Email:", email)
console.log("Password:", password)
}Wrap everything inside a form:
<form onSubmit={handleSubmit} className="space-y-4">
{/* inputs */}
<Button type="submit" className="w-full">
Sign In
</Button>
</form>Step 7: Add Basic Validation
Now you can improve your form by adding basic validations.
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
if (!email || !password) {
alert("Please fill all fields")
return
}
if (!email.includes("@")) {
alert("Enter a valid email")
return
}
console.log("Login successful")
}Step 8: Full Login Form Code
Here’s the full working example:
import { useState } from "react"
import { Button } from "./components/ui/button"
import { Input } from "./components/ui/input"
import { Label } from "./components/ui/label"
import {
Card,
CardContent,
CardHeader,
CardTitle
} from "./components/ui/card"
export default function Login() {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
if (!email || !password) {
alert("Please fill all fields")
return
}
if (!email.includes("@")) {
alert("Enter a valid email")
return
}
console.log("Email:", email)
console.log("Password:", password)
}
return (
<div className="flex items-center justify-center min-h-screen bg-muted">
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle>Login</CardTitle>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<Label>Email</Label>
<Input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email"
/>
</div>
<div className="space-y-2">
<Label>Password</Label>
<Input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter your password"
/>
</div>
<Button type="submit" className="w-full">
Sign In
</Button>
</form>
</CardContent>
</Card>
</div>
)
}In just a few steps you have created a beautiful and functional login form using the shadcn ui components. You can now use this foundational knowledge on schadcn ui to develop and create more complex forms and also improve the authentication flow as your application grows. This blog will help you to lay the foundation for installing shadcn ui in your project and create a new login form with the Shadcn components. The shading components will help your project to enhance its appearance and give your project a professional look.
To read more about How to Set Up shadcn/ui in a React App, refer to our blog How to Set Up shadcn/ui in a React App.