Folder Reveal

A folder reveal component that displays cards in a fan-like layout. It opens on hover or click, revealing content in a dynamic, animated way. Use it to showcase multiple items in an interactive, visually engaging format.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/folder-reveal

npx layro-cli add @educlopez/folder-reveal

npx layro-cli add @educlopez/folder-reveal

bunx layro-cli add @educlopez/folder-reveal

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

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import type { KeyboardEvent, ReactNode } from "react";
import { useCallback, useEffect, useId, useRef, useState } from "react";

export type FolderRevealTrigger = "hover" | "click";
export type FolderRevealColor = "manila" | "brand" | "blue" | "green" | "slate";

export interface FolderRevealItem {
  /** Card surface colour. Defaults to the theme background. */
  color?: string;
  content: ReactNode;