Native Select

Forms

About

A styled dropdown built on the native HTML select element with a chevron icon, supporting options and option groups.

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

Code

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

Usage.tsx

import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/ui/native-select";

export default function NativeSelectDemo() {
  return (
    <div className="flex min-h-[200px] items-center justify-center p-6">
      <div className="grid w-full max-w-xs gap-2">
        <label className="text-sm font-medium" htmlFor="framework">
          Framework
        </label>
        <NativeSelect id="framework" defaultValue="next" className="w-full">
          <NativeSelectOptGroup label="React">
            <NativeSelectOption value="next">Next.js</NativeSelectOption>
            <NativeSelectOption value="remix">Remix</NativeSelectOption>
            <NativeSelectOption value="gatsby">Gatsby</NativeSelectOption>
          </NativeSelectOptGroup>
          <NativeSelectOptGroup label="Vue">
            <NativeSelectOption value="nuxt">Nuxt</NativeSelectOption>
            <NativeSelectOption value="vue">Vue</NativeSelectOption>
          </NativeSelectOptGroup>
        </NativeSelect>
      </div>
    </div>
  );
}