Things

The Combobox component is an autocomplete input that allows users to search and select from a list of options. It features bold borders and shadows that match the Things design system. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/combobox.json

Usage

tsx

import {
  Combobox,
  ComboboxTrigger,
  ComboboxContent,
  ComboboxInput,
  ComboboxList,
} from "@/components/ui/combobox"

const frameworks = [
  { value: "nextjs", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxtjs", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

function MyComponent() {
  return (
    <Combobox options={frameworks} placeholder="Select framework...">
      <ComboboxTrigger />
      <ComboboxContent>
        <ComboboxInput placeholder="Search framework..." />
        <ComboboxList />
      </ComboboxContent>
    </Combobox>
  )
}

Combobox

Quick Install

Usage

Examples