Select paneladmin

Filterable single or multi select panel with an anchored popover or modal variant, selected-first ordering and remote filtering states.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/select-panel

의존 아이템button dialog faceted-filter locale popover style

Default

Assigned: bo

select-panel-demo.tsx

"use client";
import * as React from "react";import { SelectPanel, type SelectPanelItem } from "@/components/ui/select-panel";
const people: readonly SelectPanelItem[] = [  { value: "ana", label: "Ana Silva", description: "Front desk" },  { value: "bo", label: "Bo Chen", description: "Housekeeping" },  { value: "cy", label: "Cy Okafor", description: "Maintenance" },  { value: "di", label: "Di Novak", description: "Revenue", disabled: true },];
export default function SelectPanelDemo() {  const [value, setValue] = React.useState<string[]>(["bo"]);  return (    <div className="flex flex-col items-start gap-3">      <SelectPanel title="Assignees" items={people} multiple value={value} onValueChange={setValue} />      <p className="text-sm text-muted-foreground">Assigned: {value.join(", ") || "nobody"}</p>    </div>  );}