shadcn/ui Components Collection

Preview

See the component in action with different configurations

Basic Usage

Sample Card

New

This is a sample interactive card with hover effects

With Custom Content

Advanced Card

Premium

This card has custom content and styling

Custom content can be added here with buttons, images, or any other elements.

Without Hover Effect

Static Card

Static

This card doesn't have hover effects

Implementation

Copy the code and use it in your project

Basic Usage

import { InteractiveCard } from "@/components/custom/interactive-card";

export default function Example() {
  return (
    <InteractiveCard
      title="Sample Card"
      description="This is a sample interactive card"
      badge="New"
      actionText="Learn More"
      onAction={() => console.log("Action clicked")}
    />
  );
}

API Reference

All available props and their types

title

stringRequired

The card title

description

stringRequired

The card description

badge

string

Optional badge text

badgeVariant

string

Badge variant style

children

ReactNode

Custom content

className

string

Additional CSS classes

hoverEffect

boolean

Enable hover effects (default: true)

actionText

string

Action button text

onAction

function

Action button click handler