shadcn-country-region-select v0.0.12

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, 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>

CountrySelect properties

RegionSelect properties