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

Install dependencies

npm i motion clsx tailwind-merge

Add util file

lib/utils.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

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

With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.

Go Pro
This service exceeded our expectations, since not only was the development technically flawless, but Manu and his team also acted as strategic partners by encouraging us to add ...

Georg Weingartner

CMO at Renderwork

A product by Aceternity
Building in public at @mannupaaji