Components
TextureCard

TextureCard

Skumorphism is back with a twist.

Loading...

Installation

Copy and paste the following code into your project.

Join the cult to for the code

Update the import paths to match your project setup.

Usage

import {
  TextureCard,
  TextureCardContent,
  TextureCardFooter,
  TextureCardHeader,
  TextureCardTitle,
} from "@/components/cult/texture-card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
function Example() {
  return (
    <TextureCard className="">
      <TextureCardHeader>
        <div className="flex justify-center p-4">
          <TextureCardTitle>Login to Your Account</TextureCardTitle>
        </div>
      </TextureCardHeader>
      <Separator />
      <TextureCardContent>
        <form className="flex flex-col gap-4">
          <Label htmlFor="email">Email</Label>
          <Input
            id="email"
            type="email"
            required
            className="w-full px-4 py-2 rounded-md border border-neutral-300 dark:border-neutral-700 bg-white/80 dark:bg-neutral-800/80 placeholder-neutral-400 dark:placeholder-neutral-500"
          />
 
          <Label htmlFor="password">Password</Label>
          <Input
            id="password"
            type="password"
            required
            className="w-full px-4 py-2 rounded-md border border-neutral-300 dark:border-neutral-700 bg-white/80 dark:bg-neutral-800/80 placeholder-neutral-400 dark:placeholder-neutral-500"
          />
        </form>
      </TextureCardContent>
      <Separator />
      <TextureCardFooter>
        <TextureButton variant="minimal">Cancel</TextureButton>
        <TextureButton variant="primary">
          <span>Login</span>
        </TextureButton>
      </TextureCardFooter>
    </TextureCard>
  );
}