Proudly open-source
Our source code is available on GitHub - feel free to read, review, or contribute to it however you want!
The Open Source component provides a beautiful way to showcase your GitHub repository's stars and contributors. Perfect for open-source project landing pages, documentation sites, and portfolio projects.
Installation
Examples
Custom Title and Description
Join our community
PrismUI is built by the community, for the community. We'd love to have you join us!
Different Repository
Built with Next.js
Next.js is the foundation of our framework. Check out their repository to learn more.
Usage
Basic Usage
import OpenSource from "@/components/prismui/open-source"
export default function Example() {
return (
<OpenSource
repository="username/repository"
defaultStats={{
stars: 0,
contributors: []
}}
/>
)
}With GitHub Token
<OpenSource
repository="username/repository"
githubToken={process.env.GITHUB_TOKEN}
defaultStats={{
stars: 0,
contributors: []
}}
/>Custom Content
<OpenSource
repository="username/repository"
title="Custom Title"
description="Your custom description here"
buttonText="Custom Button Text"
defaultStats={{
stars: 0,
contributors: []
}}
/>Customization
Custom Styling
<OpenSource
className="custom-class"
// Add any custom styles or classes
/>Custom Default Stats
<OpenSource
defaultStats={{
stars: 100,
contributors: [
{
login: "username",
avatar_url: "https://github.com/username.png"
}
]
}}
/>Custom Loading State
<Suspense fallback={<YourCustomLoadingComponent />}>
<OpenSource {...props} />
</Suspense>Notes
- Built with Framer Motion for smooth animations
- Server Component with client-side fallback
- Automatic data fetching with caching
- Responsive design with mobile-first approach
- TypeScript support with proper types
- SSR compatible with "use client" directive
- Optimized performance with proper suspense boundaries
- ARIA attributes for accessibility
- Rate limit aware with proper error handling
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
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| repository | string | The GitHub repository in format "owner/repo" | Required |
| githubToken | string | Optional GitHub OAuth token for API requests | undefined |
| title | string | Custom title text | "Proudly open-source" |
| description | string | Custom description text | "Our source code is available..." |
| buttonText | string | Custom button text | "Star on GitHub" |
| className | string | Additional CSS classes | undefined |