# 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.

Source: https://docs.nasaqui.com/components/groups/pickers

- [Appearance pickers](https://docs.nasaqui.com/components/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.
- [Calendar](https://docs.nasaqui.com/components/calendar): Month grid for picking a day or a date range. Native Date and Intl only; locale-aware week start, labels and RTL keyboard.
- [ColorPicker](https://docs.nasaqui.com/components/color-picker): Swatch trigger that opens a popover with a swatch grid (tag palette by default), a validated hex field and an optional native colour input.
- [DatePicker](https://docs.nasaqui.com/components/date-picker): Input-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.
- [EmojiPicker](https://docs.nasaqui.com/components/emoji-picker): Emoji picker in a popover, with search, categories, skin tones, RTL-aware keyboard navigation and lazily loaded emoji data.
- [IconPicker](https://docs.nasaqui.com/components/icon-picker): A 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 fields](https://docs.nasaqui.com/components/time-fields): Fields 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.
- [TimeRangePicker](https://docs.nasaqui.com/components/time-range-picker): Picks 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.