select-scrollable.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-scrollable",
  "type": "registry:example",
  "author": "shadcn (https://ui.shadcn.com)",
  "registryDependencies": [
    "select"
  ],
  "files": [
    {
      "path": "examples/select-scrollable.tsx",
      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function SelectScrollable() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[280px]\">\n        <SelectValue placeholder=\"Select a timezone\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>North America</SelectLabel>\n          <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n          <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n          <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n          <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n          <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n          <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Europe & Africa</SelectLabel>\n          <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n          <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n          <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n          <SelectItem value=\"west\">\n            Western European Summer Time (WEST)\n          </SelectItem>\n          <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n          <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Asia</SelectLabel>\n          <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n          <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n          <SelectItem value=\"cst_china\">China Standard Time (CST)</SelectItem>\n          <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n          <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n          <SelectItem value=\"ist_indonesia\">\n            Indonesia Central Standard Time (WITA)\n          </SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Australia & Pacific</SelectLabel>\n          <SelectItem value=\"awst\">\n            Australian Western Standard Time (AWST)\n          </SelectItem>\n          <SelectItem value=\"acst\">\n            Australian Central Standard Time (ACST)\n          </SelectItem>\n          <SelectItem value=\"aest\">\n            Australian Eastern Standard Time (AEST)\n          </SelectItem>\n          <SelectItem value=\"nzst\">New Zealand Standard Time (NZST)</SelectItem>\n          <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>South America</SelectLabel>\n          <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n          <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n          <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n          <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}