Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Expandable Cards

Click cards to expand them and show additional information

Open in
    Summertime Sadness

    Summertime Sadness

    Lana Del Rey

    Mitran Di Chhatri

    Mitran Di Chhatri

    Babbu Maan

    For Whom The Bell Tolls

    For Whom The Bell Tolls

    Metallica

    Stairway To Heaven

    Stairway To Heaven

    Led Zeppelin

    Toh Phir Aao

    Toh Phir Aao

    Mustafa Zahid

Installation

Run the following command

npx shadcn@latest add @aceternity/expandable-card-demo-standard @aceternity/expandable-card-demo-grid

Add useOutsideClick hook

hooks/use-outside-click.ts
import React, { useEffect } from "react";
 
export const useOutsideClick = (
  ref: React.RefObject<HTMLDivElement>,
  callback: Function
) => {
  useEffect(() => {
    const listener = (event: any) => {
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }
      callback(event);
    };
 
    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);
 
    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, callback]);
};

Examples

Standard

Open in
    Summertime Sadness

    Summertime Sadness

    Lana Del Rey

    Mitran Di Chhatri

    Mitran Di Chhatri

    Babbu Maan

    For Whom The Bell Tolls

    For Whom The Bell Tolls

    Metallica

    Stairway To Heaven

    Stairway To Heaven

    Led Zeppelin

    Toh Phir Aao

    Toh Phir Aao

    Mustafa Zahid

Grid

Open in
    Summertime Sadness

    Summertime Sadness

    Lana Del Rey

    Mitran Di Chhatri

    Mitran Di Chhatri

    Babbu Maan

    For Whom The Bell Tolls

    For Whom The Bell Tolls

    Metallica

    Aap Ka Suroor

    Aap Ka Suroor

    Lord Himesh

Build websites faster and 10x better than your competitors with

Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

70+ templates and component blocks combined

Ready to copy paste component blocks, save days of development time

Aceternity UI Pro Demo - Light Mode
A product by Aceternity
Building in public at @mannupaaji