Getting Started

Components

Card

A Memphis-style card component with pin and tilt animation variants for creating engaging content containers.

Examples

Default Variant

Default Card

Clean and modular design

Perfect for building complex components with Memphis styling.

Red Shadow

With colored shadow

Add personality with vibrant shadow colors.

Blue Shadow

Professional look

Great for business applications.

Pin Variant

Pinned Card

With push pin decoration

Perfect for notices and highlighted content.

Blue Pin

Custom pin color

Customize the pin color to match your theme.

Green Pin

Success state

Great for completed tasks or success messages.

Tilt Variant (Hover to see animation)

Tilted Card

Hover for animation

Starts tilted and straightens on hover with scale effect.

Purple Tilt

Playful animation

Perfect for creative interfaces with personality.

Yellow Tilt

Attention-grabbing

Great for featured content or call-to-action cards.

Examples

Contact Form

Get in touch with us

Product Card

Memphis Design Kit

Features:

  • • 50+ Components
  • • Memphis Styling
  • • Fully Responsive
$49$99

Installation

shadcn CLI (Recommended)

Install the Card component using the shadcn CLI:

Terminal
npx shadcn@latest add https://memphi.dev/r/card.json

Manual Installation

Copy and paste the component code into your project:

Prerequisites: Make sure you have completed the installation setup before adding components.

Usage

Import the component
import { 
  Card, 
  CardContent, 
  CardDescription, 
  CardFooter, 
  CardHeader, 
  CardTitle 
} from "@/components/memphi/card"

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
// ... (click expand to see more)

API Reference

PropTypeDefaultDescription
variant"default" | "pin" | "tilt""default"The visual style variant
shadowColor"default" | "red" | "blue" | "green" | "yellow" | "purple""default"The color of the card shadow
pinColorstring"oklch(0.7 0.2 27.3)"Color of the push pin (pin variant only)
classNamestring-Additional CSS classes

Note: The Card component extends all standard HTML div attributes and includes sub-components: CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.

How It Works

🎯 Default Variant

  • Clean Memphis styling with bold borders and shadows
  • Perfect for building complex components
  • Modular design with Header, Content, and Footer sections
  • Customizable shadow colors for visual variety

📌 Pin Variant

  • Realistic SVG push pin with 3D depth and shadows
  • Pin appears to penetrate the card surface
  • Dotted circle shows entry point on card
  • Customizable pin color to match your theme
  • Perfect for notices, highlights, or pinned content

🎨 Tilt Variant

  • Starts with -2 degree tilt for playful appearance
  • Straightens to 0 degrees on hover
  • Subtle scale effect (105%) for enhanced interaction
  • Smooth 300ms transitions for professional feel
  • Great for creative interfaces and featured content

🎨 Design Philosophy

  • Memphis design principles with bold borders and vibrant colors
  • NeoBrutalism aesthetics with high contrast and geometric shapes
  • Modular component system for building complex interfaces
  • Consistent with Button and Input components

Manual Installation

1. Copy the component code

components/memphi/card.tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const cardVariants = cva(
  [
    // Base styles
    "bg-white border-2 border-black rounded-lg p-6",
    "transition-all duration-300 ease-in-out",
    "shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]",
  ],
  {
    variants: {
      variant: {
        default: "",
// ... (click expand to see more)

2. Update your import paths

Make sure you have the required dependencies installed:

Required dependencies
npm install class-variance-authority clsx tailwind-merge