Components
Loading preview...
Orbiting Avatars CTA Description: A visually engaging Call-to-Action (CTA) component that displays a central message, a button, and a configurable set of avatars that gently float and orbit around the content. It's designed to highlight community, contributors, or users in a dynamic way.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/orbiting-avatarsimport { OrbitingAvatarsCTA } from '@/components/ui/orbiting-avatars';
const Demo = () => {
const avatars = [
{ src: 'https://i.pravatar.cc/150?img=11', alt: 'User 1' },
{ src: 'https://i.pravatar.cc/150?img=12', alt: 'User 2' },
{ src: 'https://i.pravatar.cc/150?img=13', alt: 'User 3' },
{ src: 'https://i.pravatar.cc/150?img=14', alt: 'User 4' },
{ src: 'https://i.pravatar.cc/150?img=15', alt: 'User 5' },
{ src: 'https://i.pravatar.cc/150?img=16', alt: 'User 6' },
];
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
<OrbitingAvatarsCTA
title="Contribute to Our Community"
description="Our platform is built by a community of creators who want to share — from amateurs to professionals and everyone in between."
buttonText="Submit Your Work"
buttonProps={{ onClick: () => alert('Button Clicked!') }}
avatars={avatars}
orbitRadius={22}
orbitDuration={50}
/>
</div>
);
};
export default Demo;