Search the docs

Find a page or a component

Figma

Get started

Introduction Showcase Installation Figma sync Changelog

Foundations

Colors Typography Radius Surfaces Motion

Patterns

Agent rail Change card Metric card Funnel node A/B test Status pill

Actions

Button Button Group Toggle Toggle Group

Forms

Input Input Group Input OTP Textarea Field Label Select Native Select Combobox Checkbox Radio Group Switch Slider Calendar

Overlays

Dialog Alert Dialog Sheet Drawer Popover Hover Card Tooltip Dropdown Menu Context Menu Menubar Command Command Menu Toast

Navigation

Sidebar Navigation Menu Tabs Breadcrumb Pagination

Layout

Card Item Accordion Collapsible Separator Scroll Area Resizable Aspect Ratio Carousel Direction

Data display

Table Chart Avatar Badge Kbd

Feedback

Alert Empty Progress Skeleton Spinner

Chat and agents

Message Bubble Message Scroller Trace Attachment Code Block Questionnaire Marker

PreviousSelect Next Combobox

This system

Version1.0.0

FigmaIn sync

IconsCentral Icons

FontAspekta

Native Select

The browser's own select, styled to match. Best on touch devices.

FormsOpen in Figma

Installation#

Terminal

npx shadcn@latest add @zellify/native-select

Usage#

native-select.tsx

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

Examples#

API reference#

Exports NativeSelect NativeSelectOptGroup NativeSelectOption. Every part takes its element's usual props and a className.

Native Select

The browser's own select, styled to match. Best on touch devices.

FormsOpen in Figma

Installation#

Terminal

npx shadcn@latest add @zellify/native-select

Usage#

native-select.tsx

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

Examples#

Basic

With Groups

Sizes

With Field

Country

Select your country of residence.

Disabled

Invalid

API reference#

Exports NativeSelect NativeSelectOptGroup NativeSelectOption. Every part takes its element's usual props and a className.