Vaibhav Kumar Singh

Shuffle Grid

Heroes 1.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

    2.1K
  • Event Manager

    Event Manager

    1.6K
  • Expanding Cards

    Expanding Cards

    1.5K
  • FAQ tabs

    FAQ tabs

    1.2K
  • Flip Links

    Flip Links

    1K
  • Category List

    Category List

    821
  • Color Change Card

    Color Change Card

    771
  • Dark Gradient Pricing

    Dark Gradient Pricing

    716

More in Heroes

View all
  • SaaS Template

    SaaS Template

    2.5K
  • Responsive Hero Banner

    Responsive Hero Banner

    2K
  • Hero

    Hero

    1.3K
  • Centered Hero with Image Fan

    Centered Hero with Image Fan

    975
  • Aero Hero-3

    Aero Hero-3

    579
  • Editorial Collage Hero

    Editorial Collage Hero

    460
  • Glass Fold

    Glass Fold

    305
  • HeroSectionWithGradient

    HeroSectionWithGradient

    351