base-select-default

PreviousNext
Docs
reuicomponent

Preview

Loading preview…
registry/default/components/base-select/default.tsx
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/base-select';

const items = [
  {
    label: 'Apple',
    value: 'apple',
  },
  {
    label: 'Banana',
    value: 'banana',
  },
  {
    label: 'Cherry',
    value: 'cherry',
  },
  {
    label: 'Orange',
    value: 'orange',
  },
  {
    label: 'Grape',
    value: 'grape',
  },
];

export default function DefaultDemo() {
  return (
    <Select items={items}>
      <SelectTrigger className="w-60">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        {items.map((item) => (
          <SelectItem key={item.value} value={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

Installation

npx shadcn@latest add @reui/base-select-default

Usage

import { BaseSelectDefault } from "@/components/base-select-default"
<BaseSelectDefault />