Documentation

Select

Stone-textured trigger and window-panel dropdown (Base UI Select).

import { useState } from "react";

import { Select, SelectIcon, SelectItem, SelectList, SelectPopup, SelectTrigger, SelectValue } from "./index";

const GAMEMODES = ["生存", "创造", "冒险", "旁观"] as const;

/**
 * Select 预览用例：游戏模式选择
*/
export function SelectDemo() {
  const [mode, setMode] = useState<null | string>("生存");

  return (
    <div className="flex flex-col gap-8">
      <Select<string> onValueChange={setMode} value={mode}>
        <SelectTrigger aria-label="游戏模式">
          <SelectValue />
          <SelectIcon />
        </SelectTrigger>
        <SelectPopup aria-label="游戏模式选项">
          <SelectList>
            {GAMEMODES.map(name => (
              <SelectItem key={name} value={name}>
                {name}
              </SelectItem>
            ))}
          </SelectList>
        </SelectPopup>
      </Select>
    </div>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/select

npm install

$pnpm add @tennantite/ui

npm installs the compiled package; use the CLI copy above to adapt the source.

Usage

npm import

import { Select, SelectIcon, SelectItem, SelectList, SelectPopup, SelectTrigger, SelectValue } from "@tennantite/ui";

CLI copy import

import { Select, SelectIcon, SelectItem, SelectList, SelectPopup, SelectTrigger, SelectValue } from "@/components/tennantite/select";

import { useState } from "react";

import { Select, SelectIcon, SelectItem, SelectList, SelectPopup, SelectTrigger, SelectValue } from "./index";

const GAMEMODES = ["生存", "创造", "冒险", "旁观"] as const;

/**
 * Select 预览用例：游戏模式选择
*/
export function SelectDemo() {
  const [mode, setMode] = useState<null | string>("生存");

  return (
    <div className="flex flex-col gap-8">
      <Select<string> onValueChange={setMode} value={mode}>
        <SelectTrigger aria-label="游戏模式">
          <SelectValue />
          <SelectIcon />
        </SelectTrigger>
        <SelectPopup aria-label="游戏模式选项">
          <SelectList>
            {GAMEMODES.map(name => (
              <SelectItem key={name} value={name}>
                {name}
              </SelectItem>
            ))}
          </SelectList>
        </SelectPopup>
      </Select>
    </div>
  );
}

API Reference

Prop	Type	Description
className	string	Class name appended to the root and trigger elements.

Source

packages/ui/src/primitives/select/index.tsx

The npm package keeps the source tree, so you can copy and adapt it directly.