🚀 Getting Started

Superkey is a stylized command palette component built with React, Tailwind CSS & HeadlessUI ready to be used in your next project.

🛫 Guides:

1. Install:

🚧 Superkey only works with React 18 or higher. It also requires headlessUI to be installed.

npm install superkey @headlessui/react
# or
yarn add superkey @headlessui/react
# or
pnpm install superkey @headlessui/react
# or
ultra install superkey @headlessui/react

2. Import styles:

import "superkey/styles.css";

3. How to use:

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

function App() {
  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>Option 1</h1>
          <p>Description</p>
        </CommandOption>
        <CommandOption value="Option 2">
          <h1>Option 2</h1>
          <p>Description</p>
        </CommandOption>
      </CommandList>
    </Command>
  );
}