Cards

Texture Card

Composable neumorphic card for React and shadcn/ui with layered borders and header, content, footer, and separator parts.

Updated Oct 1, 2026

Create your account

Welcome! Please fill in the details to get started.

Already have an account? Sign in

Secured by Supabase

TextureCard is a composable React card component for shadcn/ui. Use it for settings panels, sign-in forms, pricing tiers, or dashboard widgets that need a tactile surface.

Installation


pnpm dlx shadcn@latest add @cult-ui/texture-card

Usage


import {
  TextureCard,
  TextureCardContent,
  TextureCardFooter,
  TextureCardHeader,
  TextureCardTitle,
  TextureSeparator,
} from "@/components/ui/texture-card";


<TextureCard>
  <TextureCardHeader className="flex flex-col gap-4 justify-center items-center  ">
    <div className="p-3 bg-neutral-950 rounded-full">
      <Mail className="h-4 w-4 stroke-neutral-200" />
    </div>
  </TextureCardHeader>
 
  <TextureCardContent className=" w-48 ">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum eos quia
      incidunt perspiciatis, ut, deleniti fugit a aliquam sequi, voluptatum
      pariatur quaerat. Temporibus sed facere at, voluptas dolorem officiis
      incidunt!
    </p>
  </TextureCardContent>
  <TextureSeparator />
 
  <div>
    <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">
          <p className="font-light dark:text-white text-black">
            Texture <span className="font-medium tracking-wide">card</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</TextureCard>