WinSelect

A native <select> dropdown styled with the Win2k sunken bevel.

When to use

Use WinSelect for dropdown selection inputs where the native browser dropdown is acceptable.

When not to use

Do not use WinSelect when you need a custom dropdown with filtering or multi-select. Use a custom solution instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinSelect } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Default

Choose an option

Disabled

System (locked)

Props

All available props for the WinSelect component.

Prop	Type	Default	Description
`...props`	`SelectHTMLAttributes`	`—`	All standard HTML select attributes.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinSelect } from 'win2k-ui'

export function Example() {
  return (
    <WinSelect>
      <option value="">Select an option...</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </WinSelect>
  )
}