shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/base/native-select.jsonnpx shadcn@latest add https://kit.dev/r/base/native-select.jsonpnpm dlx shadcn@latest add https://kit.dev/r/base/native-select.jsonyarn shadcn@latest add https://kit.dev/r/base/native-select.jsonInstall the following dependencies:
bun add lucide-react tailwind-variantsnpm install lucide-react tailwind-variantspnpm add lucide-react tailwind-variantsyarn add lucide-react tailwind-variantsCopy and paste the following code into your project.
import { ChevronDownIcon } from "lucide-react";
import type React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
export const nativeSelectVariants = tv({
base: "cn-native-select outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
defaultVariants: {
size: "md",
},
variants: {
// biome-ignore assist/source/useSortedKeys: size scale sm→lg
size: {
sm: "",
md: "",
lg: "",
},
},Update the import paths to match your project setup.
Usage
import {
NativeSelect,
NativeSelectOption,
} from "@/components/ui/native-select";<NativeSelect>
<NativeSelectOption value="">Select status</NativeSelectOption>
<NativeSelectOption value="todo">Todo</NativeSelectOption>
<NativeSelectOption value="in-progress">In Progress</NativeSelectOption>
<NativeSelectOption value="done">Done</NativeSelectOption>
<NativeSelectOption value="cancelled">Cancelled</NativeSelectOption>
</NativeSelect>Demos
Groups
Options organized into labeled optgroups.
Disabled
Disabled native select.
Invalid
Invalid state via aria-invalid.
Rtl
Right-to-left native select. See the RTL configuration guide for document direction.
API Reference
NativeSelect
PropType
AttributeType
data-size?stringNativeSelectOption
PropType
AttributeType
NativeSelectOptGroup
PropType
AttributeType