New: 149+ components, Page Builder, and more
AI App Building Blocks for the Web
Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.
Files
"use client"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/components/ui/input-otp"
export function OTPPage() {
return (
<div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
<div className="w-full max-w-xs">
<OTPForm01 />
</div>
</div>
)
}
export function OTPForm01({ ...props }: React.ComponentProps<typeof Card>) {
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formData = new FormData(e.currentTarget)
// TODO: Add your authentication logic here
console.log("Form submitted:", Object.fromEntries(formData))
// Example: await signIn(formData)
}
return (
<Card {...props}>
<CardHeader>
<CardTitle>Enter verification code</CardTitle>
<CardDescription>We sent a 6-digit code to your email.</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit}>
<FieldGroup>
<Field>
<FieldLabel htmlFor="otp">Verification code</FieldLabel>
<InputOTP maxLength={6} id="otp" name="otp" required>
<InputOTPGroup className="gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
<FieldDescription>
Enter the 6-digit code sent to your email.
</FieldDescription>
</Field>
<FieldGroup>
<Button type="submit">Verify</Button>
<FieldDescription className="text-center">
Didn't receive the code? <a href="#">Resend</a>
</FieldDescription>
</FieldGroup>
</FieldGroup>
</form>
</CardContent>
</Card>
)
}
otp-01
Files
"use client"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/components/ui/input-otp"
export function OTPPage() {
return (
<div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
<div className="w-full max-w-xs">
<OTPForm02 />
</div>
</div>
)
}
export function OTPForm02({ ...props }: React.ComponentProps<typeof Card>) {
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formData = new FormData(e.currentTarget)
// TODO: Add your authentication logic here
console.log("Form submitted:", Object.fromEntries(formData))
// Example: await signIn(formData)
}
return (
<Card {...props}>
<CardHeader>
<CardTitle>Enter verification code</CardTitle>
<CardDescription>We sent a 6-digit code to your email.</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit}>
<FieldGroup>
<Field>
<FieldLabel htmlFor="otp">Verification code</FieldLabel>
<InputOTP maxLength={6} id="otp" name="otp" required>
<InputOTPGroup className="gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
<FieldDescription>
Enter the 6-digit code sent to your email.
</FieldDescription>
</Field>
<FieldGroup>
<Button type="submit">Verify</Button>
<FieldDescription className="text-center">
Didn't receive the code? <a href="#">Resend</a>
</FieldDescription>
</FieldGroup>
</FieldGroup>
</form>
</CardContent>
</Card>
)
}
otp-02
Files
"use client"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/components/ui/input-otp"
export function OTPPage() {
return (
<div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
<div className="w-full max-w-xs">
<OTPForm03 />
</div>
</div>
)
}
export function OTPForm03({ ...props }: React.ComponentProps<typeof Card>) {
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formData = new FormData(e.currentTarget)
// TODO: Add your authentication logic here
console.log("Form submitted:", Object.fromEntries(formData))
// Example: await signIn(formData)
}
return (
<Card {...props}>
<CardHeader>
<CardTitle>Enter verification code</CardTitle>
<CardDescription>We sent a 6-digit code to your email.</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit}>
<FieldGroup>
<Field>
<FieldLabel htmlFor="otp">Verification code</FieldLabel>
<InputOTP maxLength={6} id="otp" name="otp" required>
<InputOTPGroup className="gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
<FieldDescription>
Enter the 6-digit code sent to your email.
</FieldDescription>
</Field>
<FieldGroup>
<Button type="submit">Verify</Button>
<FieldDescription className="text-center">
Didn't receive the code? <a href="#">Resend</a>
</FieldDescription>
</FieldGroup>
</FieldGroup>
</form>
</CardContent>
</Card>
)
}
otp-03
Files
"use client"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/components/ui/input-otp"
export function OTPPage() {
return (
<div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
<div className="w-full max-w-xs">
<OTPForm04 />
</div>
</div>
)
}
export function OTPForm04({ ...props }: React.ComponentProps<typeof Card>) {
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formData = new FormData(e.currentTarget)
// TODO: Add your authentication logic here
console.log("Form submitted:", Object.fromEntries(formData))
// Example: await signIn(formData)
}
return (
<Card {...props}>
<CardHeader>
<CardTitle>Enter verification code</CardTitle>
<CardDescription>We sent a 6-digit code to your email.</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit}>
<FieldGroup>
<Field>
<FieldLabel htmlFor="otp">Verification code</FieldLabel>
<InputOTP maxLength={6} id="otp" name="otp" required>
<InputOTPGroup className="gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
<FieldDescription>
Enter the 6-digit code sent to your email.
</FieldDescription>
</Field>
<FieldGroup>
<Button type="submit">Verify</Button>
<FieldDescription className="text-center">
Didn't receive the code? <a href="#">Resend</a>
</FieldDescription>
</FieldGroup>
</FieldGroup>
</form>
</CardContent>
</Card>
)
}
otp-04
Files
"use client"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/components/ui/input-otp"
export function OTPPage() {
return (
<div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
<div className="w-full max-w-xs">
<OTPForm05 />
</div>
</div>
)
}
export function OTPForm05({ ...props }: React.ComponentProps<typeof Card>) {
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formData = new FormData(e.currentTarget)
// TODO: Add your authentication logic here
console.log("Form submitted:", Object.fromEntries(formData))
// Example: await signIn(formData)
}
return (
<Card {...props}>
<CardHeader>
<CardTitle>Enter verification code</CardTitle>
<CardDescription>We sent a 6-digit code to your email.</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit}>
<FieldGroup>
<Field>
<FieldLabel htmlFor="otp">Verification code</FieldLabel>
<InputOTP maxLength={6} id="otp" name="otp" required>
<InputOTPGroup className="gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
<FieldDescription>
Enter the 6-digit code sent to your email.
</FieldDescription>
</Field>
<FieldGroup>
<Button type="submit">Verify</Button>
<FieldDescription className="text-center">
Didn't receive the code? <a href="#">Resend</a>
</FieldDescription>
</FieldGroup>
</FieldGroup>
</form>
</CardContent>
</Card>
)
}
otp-05
