Vaibhav Kumar Singh

Shuffle Grid

Heroes 1K

About

An eye-catching presentation element which you can use to showcase your clients, users, features or whatever you like.

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

Code

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

Usage.tsx

import { ShuffleHero } from "@/components/ui/shuffle-grid";

const ShuffleHeroDemo = () => {
  return (
    <div className="flex w-full h-screen justify-center items-center">
      <ShuffleHero />
    </div>
  );
};

export { ShuffleHeroDemo };

Dependencies

More by Vaibhav Kumar Singh

View all
  • Stagger Testimonials

    Stagger Testimonials

    2K
  • Event Manager

    Event Manager

    1.6K
  • Expanding Cards

    Expanding Cards

    1.4K
  • FAQ tabs

    FAQ tabs

    1.2K
  • Flip Links

    Flip Links

    1K
  • Category List

    Category List

    820
  • Color Change Card

    Color Change Card

    758
  • Dark Gradient Pricing

    Dark Gradient Pricing

    709

More in Heroes

View all
  • SaaS Template

    SaaS Template

    2.4K
  • Hero

    Hero

    1.2K
  • Responsive Hero Banner

    Responsive Hero Banner

    2K
  • Centered Hero with Image Fan

    Centered Hero with Image Fan

    921
  • HeroSectionWithGradient

    HeroSectionWithGradient

    335
  • Editorial Collage Hero

    Editorial Collage Hero

    425
  • Hero 03

    Hero 03

    314
  • Glass Fold

    Glass Fold

    198