This is a collection of UI components built with Shadcn UI, featuring customizable Icon Picker and Github Contributions components.

Comprehensive 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.

View Icon Picker Examples →

Interactive 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.

View Github Contributions Examples →

Fully-featured music player components with essential playback controls, progress tracking, and modern UI designs. Available in generic, Spotify-inspired, and Apple Music-inspired variants.

View Music Player Examples →

URL query-aware search components with client-side state management. Features basic search functionality and advanced autosuggestion capabilities using Nuqs for URL synchronization.

View Search Bar Examples →

Interactive rating components for collecting user feedback with star-based interfaces. Supports basic and advanced configurations including half-ratings, read-only modes, and custom icons.

View Rating Group Examples →

Theme switching components for toggling between light and dark modes with smooth transitions. Available as button and toggle switch variants with next-themes integration.

View Theme Switch Examples →

• Next.js (App Router) v15
• React v19
• TypeScript
• Tailwind CSS v4
• Shadcn UI
• Lucide React (for icons)

• Node.js
• pnpm or npm or yarn

Clone the repository then install dependencies:

git clone https://github.com/r4ultv/ui
cd ui
pnpm install

pnpm run dev

Open http://localhost:3000 with your browser to see the result.

Before adding components to your project, configure the registry in your components.json:

{
  "registries": {
    "@ui": "https://ui.raulcarini.dev/r/{name}.json"
  }
}

Once the registry is configured, you can add any variant using shadcn/cli with the namespace format:

pnpx shadcn@latest add @ui/icon-picker
pnpx shadcn@latest add @ui/github-contributions
pnpx shadcn@latest add @ui/music-player
pnpx shadcn@latest add @ui/search-bar
pnpx shadcn@latest add @ui/rating-group
pnpx shadcn@latest add @ui/theme-switch

Or you can still use the direct URL format:

pnpx shadcn@latest add https://ui.raulcarini.dev/r/icon-picker.json
pnpx shadcn@latest add https://ui.raulcarini.dev/r/github-contributions.json
pnpx shadcn@latest add https://ui.raulcarini.dev/r/music-player.json
pnpx shadcn@latest add https://ui.raulcarini.dev/r/search-bar.json
pnpx shadcn@latest add https://ui.raulcarini.dev/r/rating-group.json
pnpx shadcn@latest add https://ui.raulcarini.dev/r/theme-switch.json

Check the examples below for an overview of how to integrate each variant:

NOTE: For optimal performance and to reduce initial bundle size, it is recommended to use dynamic import.

const IconPicker = dynamic(() => import("@/components/icon-picker"));

import IconPicker from "@/components/icon-picker";

function MyComponent() {
  const [selectedIcon, setSelectedIcon] = React.useState<string | null>(null);
  return (
    <IconPicker selectedIcon={selectedIcon} setSelectedIcon={setSelectedIcon} />
  );
}

import GithubContributions from "@/components/github-contributions";

function MyComponent() {
  // Example data - replace with your actual contribution data
  const dummyData = [
    // ... your contribution data array here
    { date: "2023-10-26", count: 1, level: 1 },
    { date: "2023-10-27", count: 3, level: 3 },
    { date: "2023-10-28", count: 0, level: 0 },
    // ... more data
  ];

  return <GithubContributions data={dummyData} />;
}

import MusicPlayer from "@/components/music-player";

function MyComponent() {
  return (
    <MusicPlayer
      song={{
        name: "Bean (Kobe) [feat. Chief Keef]",
        artists: ["Lil Uzi Vert", "Chief Keef"],
        album: {
          name: "Eternal Atake (Deluxe) - LUV vs. The World 2",
          image:
            "https://i.scdn.co/image/ab67616d00001e02bd5f03953f9f1d3b833369c0",
        },
        duration: 238,
      }}
    />
  );
}

import { NuqsAdapter } from "nuqs/adapters/next/app";
import SearchBar from "@/components/search-bar";

function MyComponent() {
  return (
    <NuqsAdapter>
      <SearchBar />
    </NuqsAdapter>
  );
}

import RatingGroup from "@/components/rating-group";

function MyComponent() {
  const [rating, setRating] = React.useState<number>(0);
  return (
    <RatingGroup
      value={rating}
      onValueChange={setRating}
      maxRating={5}
    />
  );
}

import ThemeSwitch from "@/components/theme-switch";

function MyComponent() {
  return <ThemeSwitch />;
}

This project is licensed under the MIT License - see the LICENSE file for details.

• Shadcn UI
• Lucide React
• Virtua
• Tanstack Virtual
• React Virtualized
• Github Contributions API
• Nuqs