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
"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://avatars.githubusercontent.com/u/12345678?v=4",
},
],
}}
/>
);
}
export { OpenSourceBasic };
Part of Prism UI — browse the full library on 21st.dev.