Pixel Select

Forms

About

A dropdown select menu with a pixel-art highlight that springs between options, type-ahead-by-letter search, and an animated rolling label for the chosen value.

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

Code

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

Usage.tsx

import { PxSelect } from "@/components/ui/px-select";

export default function PxSelectDemo() {
  return (
    <div className="flex w-full max-w-sm items-center justify-center p-10">
      <PxSelect
        name="model"
        label="Model"
        hint="You can change this per chat"
        defaultValue="medium"
        options={[
          { value: "large", label: "Large", description: "Most capable" },
          { value: "medium", label: "Medium", description: "Balanced" },
          { value: "small", label: "Small", description: "Fastest" },
        ]}
      />
    </div>
  );
}