▲ Usage with Next.js

1. Create a new Next.js project:

npx create-next-app@latest --ts
cd your-project

🎉 Superkey is also compatible with app directory.

2. Install Superkey:

npm install superkey @headlessui/react

3. Import in _app.tsx (or _app.js):

import type { AppProps } from "next/app";

import "superkey/styles.css";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

4. Create a component:

import { useState } from "react";
import { Command, CommandInput, CommandList, CommandOption } from "superkey";

export default function CommandPalette() {
  const [open, setOpen] = useState(false);
  return (
    <Command
      open={open}
      onClose={() => {
        setOpen(false);
      }}
    >
      <CommandInput
        onChange={(e) => {
          console.log(e.target.value);
        }}
      />
      <CommandList>
        <CommandOption value="Option 1">
          <h1>With Nextjs 🚀</h1>
          <p>Description</p>
        </CommandOption>
      </CommandList>
    </Command>
  );
}

5. Run your project:

npm run dev

🥳 Ready.