{"id":27814596,"url":"https://github.com/r4ultv/ui","last_synced_at":"2026-05-10T03:34:51.865Z","repository":{"id":287145234,"uuid":"963519497","full_name":"R4ULtv/ui","owner":"R4ULtv","description":"A collection of UI components built with Shadcn UI.","archived":false,"fork":false,"pushed_at":"2025-05-01T12:05:10.000Z","size":666,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-01T12:46:45.919Z","etag":null,"topics":["components-react","icon-picker","react","ui"],"latest_commit_sha":null,"homepage":"https://ui.raulcarini.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/R4ULtv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-09T20:01:47.000Z","updated_at":"2025-05-01T12:05:14.000Z","dependencies_parsed_at":"2025-04-17T09:14:50.734Z","dependency_job_id":null,"html_url":"https://github.com/R4ULtv/ui","commit_stats":null,"previous_names":["r4ultv/ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R4ULtv%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R4ULtv%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R4ULtv%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R4ULtv%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/R4ULtv","download_url":"https://codeload.github.com/R4ULtv/ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251879109,"owners_count":21658689,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components-react","icon-picker","react","ui"],"created_at":"2025-05-01T12:47:51.152Z","updated_at":"2026-05-10T03:34:51.859Z","avatar_url":"https://github.com/R4ULtv.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![UI Components Library](./public/og-image.png)\n\nThis is a collection of UI components built with Shadcn UI, featuring customizable Icon Picker and Github Contributions components.\n\n## Features\n\n### Icon Picker Components\n\nComprehensive icon picker components with search functionality, supporting single/multiple selection, custom colors, and various virtualization implementations for optimal performance. Available in basic, popover, and virtualized variants.\n\n[View Icon Picker Examples →](https://ui.raulcarini.dev/icon-picker)\n\n### Github Contributions Components\n\nInteractive GitHub-style contribution calendar components that visualize activity data in a heatmap grid. Features basic and advanced variants with optional client-side data fetching capabilities.\n\n[View Github Contributions Examples →](https://ui.raulcarini.dev/github-contributions)\n\n### Music Player Components\n\nFully-featured music player components with essential playback controls, progress tracking, and modern UI designs. Available in generic, Spotify-inspired, and Apple Music-inspired variants.\n\n[View Music Player Examples →](https://ui.raulcarini.dev/music-player)\n\n### Search Bar Components\n\nURL query-aware search components with client-side state management. Features basic search functionality and advanced autosuggestion capabilities using Nuqs for URL synchronization.\n\n[View Search Bar Examples →](https://ui.raulcarini.dev/search-bar)\n\n### Rating Group Components\n\nInteractive rating components for collecting user feedback with star-based interfaces. Supports basic and advanced configurations including half-ratings, read-only modes, and custom icons.\n\n[View Rating Group Examples →](https://ui.raulcarini.dev/rating-group)\n\n### Theme Switch Components\n\nTheme switching components for toggling between light and dark modes with smooth transitions. Available as button and toggle switch variants with next-themes integration.\n\n[View Theme Switch Examples →](https://ui.raulcarini.dev/theme-switch)\n\n## Technologies\n\n- Next.js (App Router) v15\n- React v19\n- TypeScript\n- Tailwind CSS v4\n- Shadcn UI\n- Lucide React (for icons)\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js\n- pnpm or npm or yarn\n\n### Installation\n\nClone the repository then install dependencies:\n\n```bash\ngit clone https://github.com/r4ultv/ui\ncd ui\npnpm install\n```\n\n### Running the Development Server\n\n```bash\npnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Component Usage\n\n### Registry Configuration\n\nBefore adding components to your project, configure the registry in your `components.json`:\n\n```json\n{\n  \"registries\": {\n    \"@ui\": \"https://ui.raulcarini.dev/r/{name}.json\"\n  }\n}\n```\n\n### Adding Components via Registry\n\nOnce the registry is configured, you can add any variant using shadcn/cli with the namespace format:\n\n```bash\npnpx shadcn@latest add @ui/icon-picker\npnpx shadcn@latest add @ui/github-contributions\npnpx shadcn@latest add @ui/music-player\npnpx shadcn@latest add @ui/search-bar\npnpx shadcn@latest add @ui/rating-group\npnpx shadcn@latest add @ui/theme-switch\n```\n\nOr you can still use the direct URL format:\n\n```bash\npnpx shadcn@latest add https://ui.raulcarini.dev/r/icon-picker.json\npnpx shadcn@latest add https://ui.raulcarini.dev/r/github-contributions.json\npnpx shadcn@latest add https://ui.raulcarini.dev/r/music-player.json\npnpx shadcn@latest add https://ui.raulcarini.dev/r/search-bar.json\npnpx shadcn@latest add https://ui.raulcarini.dev/r/rating-group.json\npnpx shadcn@latest add https://ui.raulcarini.dev/r/theme-switch.json\n```\n\nCheck the examples below for an overview of how to integrate each variant:\n\n\u003e NOTE: For optimal performance and to reduce initial bundle size, it is recommended to use dynamic import.\n\n```tsx\nconst IconPicker = dynamic(() =\u003e import(\"@/components/icon-picker\"));\n```\n\n### Basic Icon Picker\n\n```tsx\nimport IconPicker from \"@/components/icon-picker\";\n\nfunction MyComponent() {\n  const [selectedIcon, setSelectedIcon] = React.useState\u003cstring | null\u003e(null);\n  return (\n    \u003cIconPicker selectedIcon={selectedIcon} setSelectedIcon={setSelectedIcon} /\u003e\n  );\n}\n```\n\n### Github Contributions\n\n```tsx\nimport GithubContributions from \"@/components/github-contributions\";\n\nfunction MyComponent() {\n  // Example data - replace with your actual contribution data\n  const dummyData = [\n    // ... your contribution data array here\n    { date: \"2023-10-26\", count: 1, level: 1 },\n    { date: \"2023-10-27\", count: 3, level: 3 },\n    { date: \"2023-10-28\", count: 0, level: 0 },\n    // ... more data\n  ];\n\n  return \u003cGithubContributions data={dummyData} /\u003e;\n}\n```\n\n### Music Player\n\n```tsx\nimport MusicPlayer from \"@/components/music-player\";\n\nfunction MyComponent() {\n  return (\n    \u003cMusicPlayer\n      song={{\n        name: \"Bean (Kobe) [feat. Chief Keef]\",\n        artists: [\"Lil Uzi Vert\", \"Chief Keef\"],\n        album: {\n          name: \"Eternal Atake (Deluxe) - LUV vs. The World 2\",\n          image:\n            \"https://i.scdn.co/image/ab67616d00001e02bd5f03953f9f1d3b833369c0\",\n        },\n        duration: 238,\n      }}\n    /\u003e\n  );\n}\n```\n\n### Search Bar\n\n```tsx\nimport { NuqsAdapter } from \"nuqs/adapters/next/app\";\nimport SearchBar from \"@/components/search-bar\";\n\nfunction MyComponent() {\n  return (\n    \u003cNuqsAdapter\u003e\n      \u003cSearchBar /\u003e\n    \u003c/NuqsAdapter\u003e\n  );\n}\n```\n\n### Rating Group\n\n```tsx\nimport RatingGroup from \"@/components/rating-group\";\n\nfunction MyComponent() {\n  const [rating, setRating] = React.useState\u003cnumber\u003e(0);\n  return (\n    \u003cRatingGroup\n      value={rating}\n      onValueChange={setRating}\n      maxRating={5}\n    /\u003e\n  );\n}\n```\n\n### Theme Switch\n\n```tsx\nimport ThemeSwitch from \"@/components/theme-switch\";\n\nfunction MyComponent() {\n  return \u003cThemeSwitch /\u003e;\n}\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- [Shadcn UI](https://ui.shadcn.com/)\n- [Lucide React](https://lucide.dev/)\n- [Virtua](https://github.com/inokawa/virtua)\n- [Tanstack Virtual](https://tanstack.com/virtual/latest)\n- [React Virtualized](https://github.com/bvaughn/react-virtualized)\n- [Github Contributions API](https://github.com/grubersjoe/github-contributions-api)\n- [Nuqs](https://nuqs.47ng.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr4ultv%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fr4ultv%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr4ultv%2Fui/lists"}