React Tailwind Select

A fully customizable, accessible, and lightweight select dropdown built with React and Tailwind CSS.

Features

• ✅ Fully customizable styles with Tailwind CSS
• ✅ Keyboard navigation (Arrow keys, Enter, Escape)
• ✅ Click outside to close dropdown
• ✅ Customizable icons
• ✅ Support for custom rendering of options
• ✅ TypeScript support

Installation

Install the package via npm:

npm install react-tw-select

Or using yarn:

yarn add react-tw-select

Usage

Basic Example

import { useState } from "react";
import { Select } from "react-tw-select";

const options = [
  { label: "Option 1", value: "1" },
  { label: "Option 2", value: "2" },
  { label: "Option 3", value: "3" },
];

export default function App() {
  const [selected, setSelected] = useState(null);

  return (
    <Select options={options} selected={selected} onChange={setSelected} />
  );
}

Customizing Styles

You can override default styles using Tailwind classes:

<Select
  options={options}
  selected={selected}
  onChange={setSelected}
  buttonClassName="bg-blue-500 text-white p-2 rounded"
  dropdownClassName="bg-gray-100 border border-gray-300"
  optionClassName="hover:bg-gray-300"
  selectedClassName="bg-blue-700 text-white"
/>

Custom Option Rendering

If you want to customize how options are displayed:

<Select
  options={options}
  selected={selected}
  onChange={setSelected}
  renderOption={(option, isSelected, isHighlighted) => (
    <div
      className={`p-2 ${isSelected ? "bg-green-500" : ""} ${
        isHighlighted ? "bg-gray-200" : ""
      }`}
    >
      {option.label}
    </div>
  )}
/>

Props

License

MIT License. Feel free to use and modify as needed!

Contributing

If you find any issues or want to contribute, feel free to open an issue or a pull request on GitHub.

Happy coding! 🚀