Pickers components
8 Pickers components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Appearance pickers, Calendar, ColorPicker, DatePicker, EmojiPicker, IconPicker, Time fields, TimeRangePicker.
- Appearance pickersPickers for how an app looks and reads. A gallery of named themes with mini previews, reading settings for text size, line width and spacing with a live sample, and a wallpaper picker with upload and dimming. They hold the choice; you apply and save it.
- CalendarMonth grid for picking a day or a date range. Native Date and Intl only; locale-aware week start, labels and RTL keyboard.
- ColorPickerSwatch trigger that opens a popover with a swatch grid (tag palette by default), a validated hex field and an optional native colour input.
- DatePickerInput-looking trigger that opens a Calendar in a popover to pick a date or a range, plus a segmented TimePicker. Field-aware, locale and RTL aware.
- EmojiPickerEmoji picker in a popover, with search, categories, skin tones, RTL-aware keyboard navigation and lazily loaded emoji data.
- IconPickerA popover or inline panel to choose a lucide icon with search in English and Arabic, categories, recent icons, a capped grid with show more and full keyboard navigation. Returns the icon name.
- Time fieldsFields for clock times and time zones. A 24 hour time you type into (930 becomes 09:30), a start and end span, a live clock for one zone and a time zone picker with a ticking clock on every row. Everything comes from Intl, no zone table is shipped.
- TimeRangePickerPicks the window a dashboard covers with relative presets (1h, 6h, 24h, 7d, 30d), a week navigator, custom days and an optional comparison period. The value is plain data that reads and writes to a URL, and days are read in a named time zone.
Tooltip
Short supplementary label shown on hover and keyboard focus of a trigger. Shorthand plus composable parts over Base UI Tooltip.
Appearance pickers
Pickers for how an app looks and reads. A gallery of named themes with mini previews, reading settings for text size, line width and spacing with a live sample, and a wallpaper picker with upload and dimming. They hold the choice; you apply and save it.