Select Components

13 premium select variants with search, animations, and beautiful interactions for every use case.

13 Variants

CLI Install

Country Select

Searchable country selector with flags, dial codes, and keyboard navigation. Perfect for forms requiring location input.

Select Your Country

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/country-select.json

Multi Select

Select multiple items with removable tag chips. Supports search and max selection limit.

Select Technologies

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/multi-select.json

Timezone Select

Select timezones with UTC offsets and searchable city names. Great for scheduling apps.

Select Timezone

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/timezone-select.json

Language Select

Select languages with flags and native names. Perfect for internationalization settings.

Select Language

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/language-select.json

Color Select

Visual color picker with a beautiful grid layout. Ideal for theme customization.

Choose Color

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/color-select.json

Currency Select

Select currencies with symbols, flags, and codes. Perfect for payment forms.

Select Currency

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/currency-select.json

User Select

Select users with colorful avatars and role badges. Great for assignment features.

Assign To

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/user-select.json

Grouped Select

Options organized into categories with visual separators. Perfect for complex selections.

Select Technology

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/grouped-select.json

Icon Select

Beautiful icon grid with colorful visuals. Great for customization features.

Choose Icon

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/icon-select.json

Rating Select

Interactive star rating with hover preview and labels. Perfect for reviews.

Your Rating

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/rating-select.json

Status Select

Status selector with animated dots and color coding. Ideal for workflow management.

Set Status

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/status-select.json

Payment Select

Payment method selector with card details and icons. Essential for checkout flows.

Payment Method

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/payment-select.json

GSAP Select

Basic select with staggered entrance animations and smooth hover effects.

Framework

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/gsap-select.json

Dependencies

GSAP

Required for all select animations

npm install gsap

Lucide React

Icon library for select components

npm install lucide-react