Status Selector

Buttons 11

About

Here is modern Status Selector component

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

Code

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

Usage.tsx

// demo.tsx
'use client';

import * as React from 'react';
import StatusSelector, { allStatus } from '@/components/ui/status-selector';
import type { Status } from '@/components/ui/status-selector';

const StatusSelectorDemo = () => {
   const [currentStatus, setCurrentStatus] = React.useState<Status>(allStatus[1]);

   const handleStatusChange = (newStatus: Status) => {
      setCurrentStatus(newStatus);
   };

   const CurrentStatusIcon = currentStatus.icon;

   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">
            <h2 className="text-lg font-semibold">Status Selector Demo</h2>
            <p className="text-sm text-muted-foreground">
               Click the icon to change the current status.
            </p>
         </div>

         <StatusSelector status={currentStatus} onChange={handleStatusChange} />

         <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 Status</h3>
            <div
               className="flex items-center gap-2.5 text-lg font-semibold"
               style={{ color: currentStatus.color }}
            >
               <CurrentStatusIcon className="size-5" />
               <span>{currentStatus.name}</span>
            </div>
         </div>
      </div>
   );
};

export { StatusSelectorDemo as DemoOne };