arc1/selectkit
docsgithubx

<selectkit />

composable, accessible, and customizable select component for React

Static options

  • search
  • groups
  • clear button

Dynamic options

  • search
  • groups
  • clear button
  • load more button
  • loading state
  • error state

Installation

npx shadcn@latest add https://selectkit.arc1.io/r/selectkit.json

Usage

Try now

static options example

import {
  SelectKit,
  SelectKitTrigger,
  SelectKitValue,
  SelectKitContent,
  SelectKitSearch,
  SelectKitClear,
  SelectKitList,
  SelectKitGroup,
  SelectKitItem,
  SelectKitSeparator,
  SelectKitEmpty,
} from "@/components/ui/selectkit"
<SelectKit>
  <SelectKitTrigger>
    <SelectKitValue placeholder="Select an option..." />
    <SelectKitClear />
  </SelectKitTrigger>
  <SelectKitContent>
    <SelectKitSearch placeholder="Search..." />
    <SelectKitList>
      <SelectKitGroup heading="Group 1">
        <SelectKitItem value="1">Option 1</SelectKitItem>
        <SelectKitItem value="2">Option 2</SelectKitItem>
      </SelectKitGroup>
      <SelectKitSeparator />
      <SelectKitItem value="3">Option 3</SelectKitItem>
      <SelectKitItem value="4">Option 4</SelectKitItem>
      <SelectKitItem value="5">Option 5</SelectKitItem>
      <SelectKitEmpty>No options found</SelectKitEmpty>
    </SelectKitList>
  </SelectKitContent>
</SelectKit>

dynamic options example

import {
  SelectKit,
  SelectKitTrigger,
  SelectKitValue,
  SelectKitContent,
  SelectKitSearch,
  SelectKitClear,
  SelectKitList,
  SelectKitGroup,
  SelectKitItem,
  SelectKitSeparator,
  SelectKitEmpty,
  SelectKitLoading,
  SelectKitError,
  SelectKitLoadMore,
} from "@/components/ui/selectkit"
<SelectKit>
  <SelectKitTrigger>
    <SelectKitValue placeholder="Select an option..." />
    <SelectKitClear />
  </SelectKitTrigger>
  <SelectKitContent>
    <SelectKitSearch placeholder="Search..." />
    <SelectKitList>
      {/* your options here */}
      <SelectKitEmpty>No options found</SelectKitEmpty>
      <SelectKitLoading>Loading...</SelectKitLoading>
      <SelectKitLoadMore onLoadMore={() => {}}>Load more</SelectKitLoadMore>
      <SelectKitError onRetry={() => {}}>Error loading options</SelectKitError>
    </SelectKitList>
  </SelectKitContent>
</SelectKit>