Organic Card Small

Renders a compact card with an SVG silhouette, category, date, and title. It shows a motion morph on hover and includes an optional link. Use it for visual content listings with interactive elements.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/organic-card-small

npx layro-cli add @nolly-studio/organic-card-small

npx layro-cli add @nolly-studio/organic-card-small

bunx layro-cli add @nolly-studio/organic-card-small

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useId, useState } from "react"
import Image from "next/image"
import { ArrowRight } from "lucide-react"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

const PATH_IDLE =
  "M670 0H0V91C0 102.046 8.9543 111 20 111H518.641C526.216 111 533.14 106.721 536.529 99.9469L570.988 31.0531C574.377 24.2789 581.301 20 588.875 20H650C661.046 20 670 11.0457 670 0Z"
const PATH_HOVER =
  "M670 0H0V91C0 102.046 8.9543 111 20 111H518.641C526.216 111 533.14 111 536.529 111L570.988 111C574.377 111 581.301 111 588.875 111H650C661.046 111 670 102.046 670 91Z"