https://github.com/pheralb/superkey

🔭 A beautifully command menu for React. Built with headlessUI.
https://github.com/pheralb/superkey

command-menu component hacktoberfest headlessui nextjs react reactjs tailwind tailwindcss turbo

Last synced: 28 days ago
JSON representation

🔭 A beautifully command menu for React. Built with headlessUI.

• Host: GitHub
• URL: https://github.com/pheralb/superkey
• Owner: pheralb
• License: mit
• Created: 2022-10-25T19:37:57.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-24T18:58:28.000Z (over 1 year ago)
• Last Synced: 2024-08-04T10:02:44.505Z (4 months ago)
• Topics: command-menu, component, hacktoberfest, headlessui, nextjs, react, reactjs, tailwind, tailwindcss, turbo
• Language: TypeScript
• Homepage: https://superkey.vercel.app
• Size: 3.71 MB
• Stars: 132
• Watchers: 2
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-command-palette - Superkey:

README

        










Getting Started

  •  

Examples

  •  

Contribute

![Superkey Minzip Package Size](https://img.shields.io/bundlephobia/minzip/superkey)

![GitHub releases](https://img.shields.io/github/release/pheralb/superkey)

![GitHub stars](https://img.shields.io/github/stars/pheralb/superkey)

![GitHub issues](https://img.shields.io/github/issues/pheralb/superkey)

![GitHub license](https://img.shields.io/github/license/pheralb/superkey)



## 👋 Introduction

[**Superkey**](https://superkey.vercel.app/) is a stylized command palette component built with [React](https://reactjs.org/), [Tailwind CSS](https://tailwindcss.com/) & [HeadlessUI](https://headlessui.com/) 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:**

```bash

# 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:**

```jsx

import "superkey/styles.css";

```

3. Create your first command palette component:

```jsx

import { useState } from "react";

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

function App() {

  const [open, setOpen] = useState(false);

  return (

     {

        setOpen(false);

      }}

    >

       {

          console.log(e.target.value);

        }}

      />

      

        

          
Option 1

          
Description

        

        

          
Option 2

          
Description

        

      

    

  );

}

```


- 📚 [All docs here](https://superkey.vercel.app/docs/getting-started).

## 🤝 Contributing

1. [Fork](https://github.com/pheralb/superkey/fork) and clone the repository:

```bash

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

```

2. Install dependencies:

```bash

npm install

# or

yarn install

# or

ultra install

# or

pnpm install

```

3. Run [turborepo](https://turbo.build/repo):

```bash

npm run dev

# or

yarn dev

# or

ultra dev

# or

pnpm dev

```

- Open [http://localhost:3000](http://localhost:3000) with your browser to see app.

## 🔧 Stack

- [Tailwind CSS](https://tailwindcss.com/) - Rapidly build modern websites without ever leaving your HTML.

- [Headless UI](https://headlessui.com/) - Completely unstyled, fully accessible UI components.

- [Next.js + Contentlayer](https://www.contentlayer.dev/) - Content made easy for developers.

- [SWC](https://swc.rs/) - Rust-based platform for the Web.

## 🔑 License

- [MIT](https://github.com/pheralb/superkey/blob/main/LICENSE).