Shadcn/UI is a component library built on Tailwind CSS and Radix UI primitives. Unlike traditional libraries, you copy components directly into your project, giving you full control over styling and behavior.

How do I install Shadcn/UI components?

Use the shadcn CLI to add components: npx shadcn@latest add [component-name]. This copies the component files directly into your project.

Can I customize Shadcn/UI components?

Yes, since components are copied into your project, you have complete control. Modify styling, add props, or change behavior as needed.

Is Shadcn/UI free to use?

Yes, Shadcn/UI is completely free and open-source. Components are MIT licensed and you can use them in any project, including commercial ones.

Native Select Component - shadcn/ui Examples

About the shadcn/ui Native Select Component

The Native Select component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add native-select` and copy it directly into your project.

Native Select Component — Frequently Asked Questions

When should I use Native Select instead of shadcn Select?

Use Native Select on mobile-first or performance-critical forms where the device's native picker is preferred. Also use it for simpler forms where Radix UI overhead isn't justified.

How do I add option groups to shadcn Native Select?

Use standard HTML `<optgroup label="Group">` inside `<NativeSelect>`. The groups example shows how to organize options into labeled categories.

How do I show a validation error state in Native Select?

Add the `invalid` class or use the `data-invalid` attribute. The invalid example shows the error styling pattern with red border and error message.