Open Source

A beautiful and interactive open-source project showcase component with animations and contributor statistics. Features: • Real-time GitHub stats • Animated star count • Contributor avatars with hover effects • Responsive layout • Custom content support • GitHub API integration • Error handling • Loading states • TypeScript support • SSR compatibility • Accessibility features Notes: • Built with Framer Motion for smooth animations • Server Component with client-side fallback • Automatic data fetching with caching • Responsive design using a mobile-first approach • TypeScript support with proper types • SSR compatible using the "use client" directive • Optimized performance with proper suspense boundaries • ARIA attributes for accessibility • Rate limit awareness with proper error handling

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

"use client";

import { OpenSource } from "@/components/blocks/open-source";

function OpenSourceBasic() {
  return (
    <OpenSource
      repository="codehagen/prismui"
      title="Proudly open-source"
      description="Our source code is available on GitHub - feel free to read, review, or contribute to it however you want!"
      buttonText="Star on GitHub"
      defaultStats={{
        stars: 300,
        contributors: [
          {
            login: "codehagen",
            avatar_url: "https://cdn.21st.dev/assets/mirror/ca/caab2bc9184d87cbabb0eb679f5072c0d86de17c18c095a06fbd056f5d431ccd.jpg",
          },
        ],
      }}
    />
  );
}

export { OpenSourceBasic };