Texture Card
Card with texture background and customizable styling
Create your account
Welcome! Please fill in the details to get started.
Already have an account? Sign in
"use client"
import { ArrowRight, Merge } from "lucide-react"
import {
TextureCardContent,
TextureCardFooter,
TextureCardHeader,
TextureCardStyled,
TextureCardTitle,
TextureSeparator,
} from "@/components/vritti/texture-card"
export function TextureCardExample() {
return (
<div className="flex items-center justify-center py-4">
<div className="dark:bg-stone-950 h-full rounded-md">
<div className="items-start justify-center gap-6 rounded-lg p-2 md:p-8 grid grid-cols-1">
<div className="col-span-1 grid items-start gap-6 lg:col-span-1">
<TextureCardStyled>
<TextureCardHeader className="flex flex-col gap-1 items-center justify-center p-4">
<div className="p-3 bg-neutral-950 rounded-full mb-3">
<Merge className="h-7 w-7 stroke-neutral-200" />
</div>
<TextureCardTitle>Create your account</TextureCardTitle>
<p className="text-center">
Welcome! Please fill in the details to get started.
</p>
</TextureCardHeader>
<TextureSeparator />
<TextureCardContent>
<form className="flex flex-col gap-4">
<div className="flex justify-between gap-2">
<div className="flex-1">
<label
htmlFor="first"
className="text-sm font-medium leading-none mb-1.5 block"
>
First name
</label>
<input
id="first"
type="text"
required
className="flex h-10 w-full rounded-md border border-neutral-300 dark:border-neutral-700 bg-white/80 dark:bg-neutral-800/80 px-3 py-2 text-sm placeholder:text-neutral-400"
/>
</div>
<div className="flex-1">
<label
htmlFor="last"
className="text-sm font-medium leading-none mb-1.5 block"
>
Last Name
</label>
<input
id="last"
type="text"
required
className="flex h-10 w-full rounded-md border border-neutral-300 dark:border-neutral-700 bg-white/80 dark:bg-neutral-800/80 px-3 py-2 text-sm placeholder:text-neutral-400"
/>
</div>
</div>
<div>
<label
htmlFor="email"
className="text-sm font-medium leading-none mb-1.5 block"
>
Email
</label>
<input
id="email"
type="email"
required
className="flex h-10 w-full rounded-md border border-neutral-300 dark:border-neutral-700 bg-white/80 dark:bg-neutral-800/80 px-3 py-2 text-sm placeholder:text-neutral-400"
/>
</div>
<div>
<label
htmlFor="password"
className="text-sm font-medium leading-none mb-1.5 block"
>
Password
</label>
<input
id="password"
type="password"
required
className="flex h-10 w-full rounded-md border border-neutral-300 dark:border-neutral-700 bg-white/80 dark:bg-neutral-800/80 px-3 py-2 text-sm placeholder:text-neutral-400"
/>
</div>
</form>
</TextureCardContent>
<TextureSeparator />
<TextureCardFooter className="border-b rounded-b-sm">
<button className="w-full inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground h-10 px-4 py-2 text-sm font-medium">
<div className="flex gap-1 items-center justify-center">
Continue
<ArrowRight className="h-4 w-4 mt-[1px]" />
</div>
</button>
</TextureCardFooter>
<div className="dark:bg-neutral-800 bg-stone-100 pt-px rounded-b-[20px] overflow-hidden">
<div className="flex flex-col items-center justify-center">
<div className="py-2 px-2">
<div className="text-center text-sm">
Already have an account?{" "}
<span className="text-primary">Sign in</span>
</div>
</div>
</div>
</div>
</TextureCardStyled>
</div>
</div>
</div>
</div>
)
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/texture-card"