🍪 A stylized command menu for React.

Last update: Dec 31, 2022

Overview

🚧 Superkey is under development and is not ready for production. If you have any bugs or problems please create an issue. 🚧

Website (working 😊 ) • Getting Started • Examples • Contribute • Roadmap

👋 Introduction

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

🚀 Getting Started

🚧 Superkey is only compatible with React 18.

1. Install dependency:

npm install superkey

2. Import styles:

import "superkey/styles.css";

3. How to use:

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

function App() {
  return (
    <Command open={true}>
      <CommandInput />
      <CommandList>
        <CommandOption value="Option 1">
          <h1>Option 1</h1>
          <p>Description</p>
        </CommandOption>
        <CommandOption value="Option 2">
          <h1>Option 1</h1>
          <p>Description</p>
        </CommandOption>
      </CommandList>
    </Command>
  );
}

🤔 Check examples here.

📚 Props

Command

-	Prop	Description	Required
⚙️	`children`	Inside it uses the input, list and options components.	Required
⚙️	`open`	Open or close the command palette.	Required
⚙️	`commandFunction`	Function to be executed when click an option.	Optional
⚙️	`onClose`	Function to be executed when close the command palette.	Optional
⚙️	`afterLeave`	Function to be executed after close the command palette.	Optional
🎨	`className`	Class to be added to the command palette.	Optional
🎨	`overlayClassName`	Class to be added to the overlay.	Optional

CommandInput

-	Prop	Description	Type
⚙️	`onChange`	Action when the user types in the search field.	Required
⚙️	`placeholder`	The placeholder of the search text field.	Optional
🎨	`searchIcon`	Adds an icon to the search field.	Optional
🎨	`className`	Class to be added to the all component.	Optional
🎨	`inputClassName`	Class to be added to the input text field component.	Optional

CommandList

-	Prop	Description	Type
⚙️	`children`	Inside imports CommandOptions.	Required

CommandOption

-	Prop	Description	Type
⚙️	`value`	Value of each option.	Required
⚙️	`children`	Inside, the option information will be displayed.	Required
🎨	`className`	Modifies the styles of the option component.	Optional

🗒️ Roadmap

Improve light & dark mode.
Add dark mode.
Add more examples (using Remix).
Create website.

📦 Examples

🤝 Contributing

Fork & clone the project:

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

Install dependencies:

cd superkey
npm install

Make your changes, create commits and push to your fork:

git add .
git commit -m "My super changes"
git push origin [your-branch]

Open a pull request 🚀 .

🔑 License

MIT.

You might also like...

Radial Menu for FiveM,built with React

BCS Radial Menu This project is to freshen up the options for free radial menu f

13 Nov 7, 2022

📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀

React Native Hold Menu A performant, easy to use hold to open context menu for React Native powered by Reanimated. 🔥 This package is experimental and

1k Jan 6, 2023

Smart data-driven menu rendered in an overlay

React Data Menu Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other compon

106 Sep 11, 2022

:art: Off-canvas menus for React.

React Off-Canvas Off-canvas menus for React. Installation $ npm install --save react-offcanvas Usage Basic Usage OffCanvas width={300} transition

38 Nov 10, 2022

A react lib for building circular menus in a very easy and handy way.

react-planet A react lib for building circular menus in a very easy and handy way. Live-Demo: STORYBOOK Read the full story @ Medium or innFactory-Blo

140 Nov 16, 2022

A simple Hook for creating fully accessible dropdown menus in React

This Hook handles all the accessibility logic when building a dropdown menu, dropdown button, etc., and leaves the design completely up to you. It also handles the logic for closing the menu when you click outside of it.

111 Dec 22, 2022

React dismissable context and hook with layers (nesting) support

Context and hook to add support for nested, auto-dismissable layers. State can be globally controlled through context. Best used with react-popper.

13 Nov 15, 2022

Tiny react library for building tooltips, flyovers, menus and more

Postel 🌑 Postel is a single component that you can easily extend into customized tooltips, dropdowns, flyovers – any type of UI which would make sens

77 Dec 7, 2022

Navigation drawer built with the awesome react-motion

ARCHIVED because I didn't have time nor use for this for a long time. I'd be happy to transfer ownership if someone is interested. react-motion-drawer

219 Aug 9, 2022

Releases(v0.2.0)

v0.2.0(Dec 29, 2022)
📦 What's Changed

CommandInput: rename 'searchIcon' prop, now is 'icon' | #11

Command: design (default colors) & commandFunction prop improvements | #11

Source code(tar.gz)
Source code(zip)
v0.1.3(Dec 18, 2022)
📦 What's Changed

⚒️ Fixed modify default styles in CommandOption.

🚧 The default styles have been removed when CommandOption is set to 'active'. Use the prop activeClassName to add your styles (default colors).

Source code(tar.gz)
Source code(zip)
v0.1.1(Dec 13, 2022)
📦 What's Changed

Removed unnecessary ternary operator from components by @DerianCordobaPerez in #7

Destructuring the props parameter by @DerianCordobaPerez in #7

🚀 New Contributors

@DerianCordobaPerez made their first contribution in #7

Source code(tar.gz)
Source code(zip)
v0.1(Dec 8, 2022)
✨ Light / Dark mode.

📦 Improvements for Command, CommandInput, CommandList & CommandOption.

And new docs website 🥳
Source code(tar.gz)
Source code(zip)
v0.1.0-rc.5(Nov 5, 2022)
⚡ Superkey now compiles using SWC.

⚒️ Bug fixes & design improvements.

Source code(tar.gz)
Source code(zip)
v0.1.0-rc.4(Nov 2, 2022)
⚒️ Fix CommandOption style.

⚒️ Fix background-color in dark mode.

🎨 Overlay effect improvements.

Source code(tar.gz)
Source code(zip)
v0.1.0-rc.3(Oct 31, 2022)
🎨 Add support for dark mode (using Tailwind CSS).

⚒️ Fix background color & opacity.

📦 Added the option to modify the styles to: Command, CommandInput, CommandOption.

Source code(tar.gz)
Source code(zip)
v0.1.0-rc.2(Oct 30, 2022)
🚧 Superkey is under development, it will probably not work correctly in your project.

Built with Tailwind CSS + Headless UI & Typescript.

First design (currently in light mode).

Add Command, CommandInput, CommandList, CommandOption components.

Source code(tar.gz)
Source code(zip)

Owner

Pablo Hdez

⚡ Building amazing things.

GitHub https://twitter.com/pheralb_

🍪 A stylized command menu for React.

Related tags

Overview

👋 Introduction

🚀 Getting Started

1. Install dependency:

2. Import styles:

3. How to use:

📚 Props

Command

CommandInput

CommandList

CommandOption

🗒️ Roadmap

📦 Examples

🤝 Contributing

🔑 License

You might also like...

Radial Menu for FiveM,built with React

📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀

Smart data-driven menu rendered in an overlay

:art: Off-canvas menus for React.

A react lib for building circular menus in a very easy and handy way.

A simple Hook for creating fully accessible dropdown menus in React

React dismissable context and hook with layers (nesting) support

Tiny react library for building tooltips, flyovers, menus and more

Navigation drawer built with the awesome react-motion

Releases(v0.2.0)

v0.2.0(Dec 29, 2022)

📦 What's Changed

v0.1.3(Dec 18, 2022)

📦 What's Changed

v0.1.1(Dec 13, 2022)

📦 What's Changed

🚀 New Contributors

v0.1(Dec 8, 2022)

v0.1.0-rc.5(Nov 5, 2022)

v0.1.0-rc.4(Nov 2, 2022)

v0.1.0-rc.3(Oct 31, 2022)

v0.1.0-rc.2(Oct 30, 2022)

Owner

Pablo Hdez

Left navigation menu. Get data from JSON file and display simple form menu.

Animated hamburger menu icons for React (1.5 KB) 🍔

React Dropdown Menu

Hamburger Menu React JS Using Third Party Package ReactJS - Popup

Simple Context menu component for react showing all parent's node menus in theirs contexts.

A simple, data-driven, light-weight React Tree Menu component

A simple sliding side menu component for React

React dropdown menu components

Add a context menu to your react app with ease

A react component that displays an unlimited deep menu