Docs/Showcase Card

Showcase Card

A premium showcase card component with 3D tilt effect, parallax image, and delightful micro-interactions. Perfect for portfolios, agency websites, and product showcases.

Installation

$pnpm dlx shadcn@latest add @componentry/showcase-card

Usage

API Reference

PropTypeDefault
taglineOptional text displayed at the top of the image section
string—
headingMain title text (required)
string—
descriptionSupporting text below the heading
string—
imageUrlURL for the hero image (required)
string—
ctaTextText for the call-to-action button
string—
onCtaClickClick handler for the CTA button
() => void—
brandNameBrand or company name for the footer
string—
servicesArray of service tags displayed in footer
string[]—
enableTiltEnable 3D tilt effect on hover
booleantrue
maxTiltMaximum tilt angle in degrees
number8
enableParallaxEnable parallax effect on image
booleantrue

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv
Work fast. Live slow.
Showcase image

Create your digital reality.

From nothing to everything, let's bring your vision to life.

studio.design
web✦product✦brand
import { ShowcaseCard } from "@/components/ui/showcase-card"

<ShowcaseCard
  tagline="Work fast. Live slow."
  heading="Create your digital reality."
  description="From nothing to everything, let's bring your vision to life."
  imageUrl="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80"
  ctaText="Send a message"
  onCtaClick={() => console.log("CTA clicked")}
  brandName="studio.design"
  services={["web", "product", "brand"]}
/>