Flip Reveal

Galleries 636

About

Here is Flip Reveal component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Flip Reveal to your project and fits it to your theme.

Code

How Flip Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useState } from "react";

import { FlipReveal, FlipRevealItem } from "@/components/ui/flip-reveal";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export const Demo = () => {
    const [key, setKey] = useState("all");

    return (
        <div className="flex min-h-120 flex-col items-center gap-8">
            <ToggleGroup
                type="single"
                className="bg-background rounded-md border p-1"
                value={key}
                onValueChange={(e) => setKey(e)}>
                <ToggleGroupItem value="all" className="sm:px-4">
                    All
                </ToggleGroupItem>
                <ToggleGroupItem value="shirt" className="sm:px-4">
                    Shirt
                </ToggleGroupItem>
                <ToggleGroupItem value="goggles" className="sm:px-4">
                    Goggles
                </ToggleGroupItem>
                <ToggleGroupItem value="shoes" className="sm:px-4">
                    Shoes
                </ToggleGroupItem>
            </ToggleGroup>
            <FlipReveal className="grid grid-cols-3 gap-3 sm:gap-4" keys={[key]} showClass="flex" hideClass="hidden">
                <FlipRevealItem flipKey="shirt">
                    <img
                        src="https://cdn.21st.dev/assets/mirror/3b/3bc43354d140ada41746bd886410fc46bdb6644861dec7c9bf1a7f222833aedb.jpg"
                        alt="Shirt"
                        className="size-20 rounded-md sm:size-24 xl:size-32"
                    />
                </FlipRevealItem>
                <FlipRevealItem flipKey="goggles">
                    <img
                        src="https://cdn.21st.dev/assets/mirror/e6/e65b411e7af375e672238e90a5b03ceec2e0092ceb5b4e9cd12712593304b9a3.jpg"
                        alt="Goggles"
                        className="size-20 rounded-md sm:size-24 xl:size-32"
                    />
                </FlipRevealItem>
                <FlipRevealItem flipKey="shoes">
                    <img
                        src="https://cdn.21st.dev/assets/mirror/f6/f6e618f49dd19a9926a611ee9919885ecf120088ac1460f2ee56472d03bc993e.jpg"
                        alt="Shoes"
                        className="size-20 rounded-md sm:size-24 xl:size-32"
                    />
                </FlipRevealItem>
                <FlipRevealItem flipKey="goggles">
                    <img
                        src="https://cdn.21st.dev/assets/mirror/31/317e3e40f5041aedb473a1fe7d723c41d9ee9596293686feb18a19e0ba0ca83f.jpg"
                        alt="Goggles"
                        className="size-20 rounded-md sm:size-24 xl:size-32"
                    />
                </FlipRevealItem>
                <FlipRevealItem flipKey="shirt">
                    <img
                        src="https://cdn.21st.dev/assets/mirror/ce/ce4ae05dd8e36fbf5664fb264bbd7a5a2f37d4bf1d12e63fc84e9daa37f7d232.jpg"
                        alt="Shirt"
                        className="size-20 rounded-md sm:size-24 xl:size-32"
                    />
                </FlipRevealItem>
                <FlipRevealItem flipKey="shoes">
                    <img
                        src="https://cdn.21st.dev/assets/mirror/1e/1efc662f7ded60e5cd43a0aa6ba1bf0bf6dd88b1c04213763b258d2f94da0449.jpg"
                        alt="Shoes"
                        className="size-20 rounded-md sm:size-24 xl:size-32"
                    />
                </FlipRevealItem>
                <FlipRevealItem flipKey="shirt">
                    <img
                        src="https://cdn.21st.dev/assets/mirror/2e/2eeb984008c57ad3bea3e6402ffb156e6c696a549c68da20e0e4f6d35f85db99.jpg"
                        alt="Goggles"
                        className="size-20 rounded-md sm:size-24 xl:size-32"
                    />
                </FlipRevealItem>{" "}
                <FlipRevealItem flipKey="shoes">
                    <img
                        src="https://cdn.21st.dev/assets/mirror/e1/e1aa8743a75ac224130401bd39559f8acf20116bfe08966f1617450800f3d4b1.jpg"
                        alt="Shoes"
                        className="size-20 rounded-md sm:size-24 xl:size-32"
                    />
                </FlipRevealItem>
                <FlipRevealItem flipKey="goggles">
                    <img
                        src="https://cdn.21st.dev/assets/mirror/04/04a5bdf78f95f37cf535659f9edc15ee76c0f1dfc8cb6c9db798863c5967e0d8.jpg"
                        alt="Goggles"
                        className="size-20 rounded-md sm:size-24 xl:size-32"
                    />
                </FlipRevealItem>
            </FlipReveal>
        </div>
    );
};

export default Demo;