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.