superkey

superkey copied to clipboard

Getting Started   •   Examples   •   Contribute

👋 Introduction

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

✨ Features

• ✅ Easy to install.
• ✅ Support for keyboard navigation.
• ✅ Fully customizable.
• ✅ Fully tested, typed and reliable.

👨‍🚀 Getting Started

1. Install Superkey:

# with npm:
npm install superkey @headlessui/react

# with yarn:
yarn add superkey @headlessui/react

# with pnpm:
pnpm install superkey @headlessui/react

# with ultra:
ultra install superkey @headlessui/react

2. Add styles:

import "superkey/styles.css";

3. Create your first command palette component:

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>
  );
}

• 📚 All docs here.

🤝 Contributing

1. Fork and clone the repository:

git clone [email protected]:your-username/superkey.git

2. Install dependencies:

npm install
# or
yarn install
# or
ultra install
# or
pnpm install

3. Run turborepo:

npm run dev
# or
yarn dev
# or
ultra dev
# or
pnpm dev

• Open http://localhost:3000 with your browser to see app.

🔧 Stack

• Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
• Headless UI - Completely unstyled, fully accessible UI components.
• Next.js + Contentlayer - Content made easy for developers.
• SWC - Rust-based platform for the Web.

🔑 License

• MIT.