key-value-demo

PreviousNext
Docs
diceuiexample

Preview

Loading preview…
examples/key-value-demo.tsx
import {
  KeyValue,
  KeyValueAdd,
  KeyValueItem,
  KeyValueKeyInput,
  KeyValueList,
  KeyValueRemove,
  KeyValueValueInput,
} from "@/registry/default/ui/key-value";

export default function KeyValueDemo() {
  return (
    <KeyValue>
      <KeyValueList>
        <KeyValueItem>
          <KeyValueKeyInput />
          <KeyValueValueInput placeholder="Test" />
          <KeyValueRemove />
        </KeyValueItem>
      </KeyValueList>
      <KeyValueAdd />
    </KeyValue>
  );
}

Installation

npx shadcn@latest add @diceui/key-value-demo

Usage

import { KeyValueDemo } from "@/components/key-value-demo"
<KeyValueDemo />