Project Selector

Cards 13

About

Here is modern project selector component

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

Code

How Project Selector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import { useState } from 'react';
import { FolderIcon } from 'lucide-react';
import ProjectSelector, { projects } from '@/components/ui/project-selector';
import type { Project } from '@/components/ui/project-selector';

const ProjectSelectorDemo = () => {
   const [project, setProject] = useState<Project | undefined>(projects[0]);

   const SelectedIcon = project ? project.icon : FolderIcon;

   return (
      <div className="flex w-full flex-col items-center justify-center gap-10 p-4">
         <div className="flex flex-col items-center gap-2 text-center">
            <h2 className="text-lg font-semibold">Project Selector</h2>
            <p className="text-sm text-muted-foreground">Select a project from the dropdown.</p>
         </div>

         <ProjectSelector project={project} onChange={setProject} projectList={projects} />

         <div className="flex w-full max-w-xs flex-col items-center gap-3 rounded-lg border bg-background p-6 shadow-sm">
            <h3 className="text-base font-medium text-muted-foreground">Current Project</h3>
            <div className="flex items-center gap-3 text-lg font-semibold">
               <SelectedIcon className="size-6 text-foreground" />
               <span>{project ? project.name : 'No Project'}</span>
            </div>
         </div>
      </div>
   );
};

export { ProjectSelectorDemo as DemoOne };