Getting Started

Thanks for you interest in CommandKey, please follow this guide to get started.

First, you need to have Node.js installed on your computer (version 18 or above) and a React.js project:

npm create vite@latest commandkey-test -- --template react-ts
cd commandkey-test
npm install

Tailwind CSS Setup

Since v0.2.9, you need to install Tailwind CSS in your project to use it.

npm install -D tailwindcss postcss autoprefixer tailwind-merge
npx tailwindcss init -p

Edit tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/commandkey/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add directives to your src/index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now install commandkey to start using it:

npm install commandkey

Go to src/App.tsx and add the following code:

import { Command, CommandList, CommandInput, CommandOption } from 'commandkey';
import { useState } from 'react';

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open modal</button>

      <Command open={open} onClose={() => setOpen(false)}>
        <CommandInput placeholder="Search" />

        <CommandList>
          <CommandOption>Apple</CommandOption>
          <CommandOption>Orange</CommandOption>
          <CommandOption>Pear</CommandOption>
        </CommandList>
      </Command>
    </>
  );
}

Start the project:

npm run dev

Result

Open modal