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

    769
  • Dark Gradient Pricing

    Dark Gradient Pricing

    716

More in Heroes

View all
  • SaaS Template

    SaaS Template

    2.5K
  • Hero

    Hero

    1.3K
  • Responsive Hero Banner

    Responsive Hero Banner

    2K
  • Editorial Collage Hero

    Editorial Collage Hero

    458
  • Centered Hero with Image Fan

    Centered Hero with Image Fan

    970
  • Aero Hero-3

    Aero Hero-3

    577
  • Hero 03

    Hero 03

    329
  • Minimalist Hero Fashion

    Minimalist Hero Fashion

    297