Shadcn Country & Region Select is a select input component built as part of the Shadcn design system. It offers a blend of customization and out-of-the-box styling, adhering to Shadcn's sleek and modern design principles.
I needed a country - region select component for a project. I looked around for any country - region select components that used Shadcn's design system, but I couldn't find any. So, I decided to make one myself. I hope you find it useful!
[!WARNING] Before you dive in, just double-check that you're using installing the shadcn correctly!
import { useState } from "react"
import { CountrySelect, RegionSelect } from "shadcn-country-region-select";
function App() {
const [countryCode, setCountryCode] = useState("");
return (
<div className="flex items-center flex-col w-full mt-20">
<CountrySelect
classname="w-[180px]"
onChange={(value) => setCountryCode(value)}
priorityOptions={["US"]}
placeholder="Country"
></CountrySelect>
<RegionSelect
onChange={(value) => console.log(value)}
classname="w-[180px] mt-2"
countryCode={countryCode}
></RegionSelect>
</div>| Prop | Type | Description |
|---|---|---|
| classname | object |
configuration object for the manifest |
| onChange | func |
callback function fired when the select value changed |
| placeholder | string |
placeholder value, default "Country" |
| priorityOptions | string[] |
Array of countries prioritized in the select list |
| whiteList | string[] |
Array of allowed countries |
| blackList | string[] |
Array of banned countries |
| Prop | Type | Description |
|---|---|---|
| classname | string |
accept a class string |
| onChange | func |
callback function fired when the select value changed |
| placeholder | string |
placeholder value, default "Region" |
| priorityOptions | string[] |
Array of regions prioritized in the select list |
| whiteList | string[] |
Array of allowed regions |
| blackList | string[] |
Array of banned regions |