Shadcn country region select

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.

Why

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!

Usage

import { useState } from "react"
import CountrySelect from "@/components/ui/country-select";
import RegionSelect from "@/components/ui/region-select";

function CountryRegion() {
  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>

CountrySelect properties

Prop	Type	Description
className	string	accept a class string
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

RegionSelect properties

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