Adding a Command Palette to Your Website

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • SonarQube - Static code analysis for 29 languages.
  • Scout APM - Less time debugging, more time building
  • react-arrow-key-navigation-hook

    A React hook & associated functions to implement arrow key navigation through a component

    For this, we'll be using a handy React hook called react-arrow-key-navigation-hook.

  • react-detect-click-outside

    Detects clicks outside React components to close them. Also handles keypresses.

    You can create your own hook for this following this tutorial, however, for the sake of this tutorial I'll just use react-detect-click-outside.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • berry

    📦🐈 Active development trunk for Yarn ⚒

    Using npx or yarn, create a new Next.js or React project

  • React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

    Since I'm in love with it, I'll be doing this project in Next.js with TypeScript - however, the procedure for implementing this in other React frameworks shouldn't be too different.

  • react-icons

    svg react icons of popular icon packs

    While we're at it, let's also download some icons from React Icons, and import them up top.

  • Next.js

    The React Framework

    Since I'm in love with it, I'll be doing this project in Next.js with TypeScript - however, the procedure for implementing this in other React frameworks shouldn't be too different.

  • monkeytype

    The most customizable typing website with a minimalistic design and a ton of features. Test yourself in various modes, track your progress and improve your speed.

    MonkeyType is an open-source, minimalistic, and customisable typing test. It's designed to be accessed from just your keyboard, eliminating the need to switch back and forth with your mouse.

  • SonarQube

    Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.

  • framer/motion

    Open source, production-ready animation and gesture library for React

    Animations using Framer Motion

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts