🍪 A stylized command menu for React.

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

GitHub releases GitHub stars GitHub issues GitHub license

👋 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

  1. Fork & clone the project:
git clone [email protected]:[your-user]/superkey.git
  1. Install dependencies:
cd superkey
npm install
  1. Make your changes, create commits and push to your fork:
git add .
git commit -m "My super changes"
git push origin [your-branch]
  1. Open a pull request 🚀 .

🔑 License

You might also like...
Radial Menu for FiveM,built with React
Radial Menu for FiveM,built with React

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

📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀
📱 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

Smart data-driven menu rendered in an overlay
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

: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

A react lib for building circular menus in a very easy and handy way.
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

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.

React dismissable context and hook with layers (nesting) support
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.

Tiny react library for building tooltips, flyovers, menus and more
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

Navigation drawer built with the awesome react-motion
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

Releases(v0.2.0)
  • v0.2.0(Dec 29, 2022)

  • 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)

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

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

  • 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.
Pablo Hdez
Left navigation menu. Get data from JSON file and display simple form menu.

Left Navbar Menu Left navigation menu. Get data from JSON file and display simple form menu. User Interface created using React and Typescript. App st

Wojtek 5 May 24, 2021
Animated hamburger menu icons for React (1.5 KB) 🍔

‌ ‌ Animated hamburger menu icons for React Hamburger menu icons for React, with CSS-driven transitions. Created to be as elegant and performant as po

Luuk de Vlieger 709 Dec 31, 2022
React Dropdown Menu

React Dropdown Menu

Mikkel Laursen 142 Dec 3, 2022
Hamburger Menu React JS Using Third Party Package ReactJS - Popup

In this project, let's build a Hamburger Menu app by applying the concepts we have learned till now. Refer to the image below: Design Files Click to v

null 2 Dec 6, 2021
Simple Context menu component for react showing all parent's node menus in theirs contexts.

Simple Context menu component for react showing all inherited parents menu with SSR compatibility.

Nathan Braun 6 Nov 13, 2022
A simple, data-driven, light-weight React Tree Menu component

React Simple Tree Menu Inspired by Downshift, a simple, data-driven, light-weight React Tree Menu component that: does not depend on any UI framework

Huang-Ming Chang 120 Dec 1, 2022
A simple sliding side menu component for React

Cheeseburger Menu A simple sliding side menu component for React. This component provides the sliding menu only, not the hamburger button. For your bu

Eddie McLean 19 May 27, 2022
React dropdown menu components

react-menu-list This project is a set of components for building menus. This project works well for dropdown and autocomplete menus. The menus are cor

Streak 79 Nov 16, 2022
Add a context menu to your react app with ease

Documentation Go here. Installation Using yarn $ yarn add react-contexify Using npm $ npm install --save react-contexify The gist import React from 'r

Fadi Khadra 868 Jan 8, 2023
A react component that displays an unlimited deep menu

react-infinity-menu An unlimited deep side menu Live Demo Demo Installation npm install react-infinity-menu How to use import InfinityMenu from "react

Social Tables 58 Dec 5, 2022