🌈 Building an Animated and Accessible Command Menu in React

• kmenu

  2 718 6.4 TypeScript

  :rainbow: An animated and accessible command menu

With that, there are a few different approaches for adding a command menu to your website: you can use an open source library (like kmenu, cmdk, or kbar), use a proprietary tool such as CommandBar, or build your own. This tutorial focuses on building your own implementation, however you may not need to depending on whether or not you're satisfied with the other options available.

• Albert-Sans

  1 89 7.3 Python

This is also the time to import in any fonts. For my project, I'm going to use Albert Sans, the brand new font on Google Fonts!

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• vercel

  481 12,167 9.8 TypeScript

  Develop. Preview. Ship.

  

// ... import { SiFramer, SiTailwindcss, SiApple, SiVercel, SiTwitter, SiTesla, SiArchlinux, SiDeno, SiFlutter, SiGithub, SiNike, SiDiscord, } from 'react-icons/si' export const commands: Command[] = [ { icon: , text: 'Framer Motion', perform: () => window.open('https://framer.com/motion', '_blank'), }, { icon: , text: 'TailwindCSS', perform: () => window.open('https://tailwindcss.com', '_blank'), }, { icon: , text: 'Apple', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Arch Linux', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Vercel', perform: () => window.open('https://vercel.com', '_blank'), }, { icon: , text: 'Tesla', perform: () => window.open('https://tesla.com', '_blank'), }, { icon: , text: 'Deno', perform: () => window.open('https://deno.land', '_blank'), }, { icon: , text: 'Discord', perform: () => window.open('https://discord.com', '_blank'), }, { icon: , text: 'Flutter', perform: () => window.open('https://flutter.dev/', '_blank'), }, { icon: , text: 'GitHub', perform: () => window.open('https://github.com/', '_blank'), }, { icon: , text: 'Nike', perform: () => window.open('https://nike.com/', '_blank'), }, { icon: , text: 'Twitter', perform: () => window.open('https://twitter.com', '_blank'), }, ]

• murder

  1,345 11 10.0 Ruby

  Large scale server deploys using BitTorrent and the BitTornado library (by ervinb)

// ... import { SiFramer, SiTailwindcss, SiApple, SiVercel, SiTwitter, SiTesla, SiArchlinux, SiDeno, SiFlutter, SiGithub, SiNike, SiDiscord, } from 'react-icons/si' export const commands: Command[] = [ { icon: , text: 'Framer Motion', perform: () => window.open('https://framer.com/motion', '_blank'), }, { icon: , text: 'TailwindCSS', perform: () => window.open('https://tailwindcss.com', '_blank'), }, { icon: , text: 'Apple', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Arch Linux', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Vercel', perform: () => window.open('https://vercel.com', '_blank'), }, { icon: , text: 'Tesla', perform: () => window.open('https://tesla.com', '_blank'), }, { icon: , text: 'Deno', perform: () => window.open('https://deno.land', '_blank'), }, { icon: , text: 'Discord', perform: () => window.open('https://discord.com', '_blank'), }, { icon: , text: 'Flutter', perform: () => window.open('https://flutter.dev/', '_blank'), }, { icon: , text: 'GitHub', perform: () => window.open('https://github.com/', '_blank'), }, { icon: , text: 'Nike', perform: () => window.open('https://nike.com/', '_blank'), }, { icon: , text: 'Twitter', perform: () => window.open('https://twitter.com', '_blank'), }, ]

• Tailwind CSS

  1,281 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

Since we'll be using Tailwind CSS, I suggest you start by installing and configuring that. Skip over this if your project already uses Tailwind.

• Sentry

  266 36,886 10.0 Python

  Developer-first error tracking and performance monitoring

  

Companies such as Vercel, GitHub, Sentry, Linear, Railway, Raycast and MANY other web applications ended up adding a command menu to their websites as well. Even desktop applications such as Discord, Figma or Slack feature a command menu to help users navigate their complex interfaces with ease.

• React

  1,696 221,803 9.9 JavaScript

  The library for web and native user interfaces.

  

Hey everyone! Over the past few months, I've been building my very own command menu component for React called kmenu! In this post, I want to go over how you can also create your OWN command menu.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• react-icons

  91 11,061 8.1 TypeScript

  svg react icons of popular icon packs

  

First, we'll create a commands.tsx file at components/Menu, which will store all of our commands. I'm using react-icons, which essentially just bundles together all popular icon packs for easy use.

• templates

  273 325 4.3

  Railway starters (by railwayapp)

  

Companies such as Vercel, GitHub, Sentry, Linear, Railway, Raycast and MANY other web applications ended up adding a command menu to their websites as well. Even desktop applications such as Discord, Figma or Slack feature a command menu to help users navigate their complex interfaces with ease.

• kbar

  9 4,610 5.9 TypeScript

  fast, portable, and extensible cmd+k interface for your site

With that, there are a few different approaches for adding a command menu to your website: you can use an open source library (like kmenu, cmdk, or kbar), use a proprietary tool such as CommandBar, or build your own. This tutorial focuses on building your own implementation, however you may not need to depending on whether or not you're satisfied with the other options available.

• Puts Debuggerer

  3,155 91 5.5 Ruby

  Ruby library for improved puts debugging, automatically displaying bonus useful information such as source line number and source code.

// ... import { SiFramer, SiTailwindcss, SiApple, SiVercel, SiTwitter, SiTesla, SiArchlinux, SiDeno, SiFlutter, SiGithub, SiNike, SiDiscord, } from 'react-icons/si' export const commands: Command[] = [ { icon: , text: 'Framer Motion', perform: () => window.open('https://framer.com/motion', '_blank'), }, { icon: , text: 'TailwindCSS', perform: () => window.open('https://tailwindcss.com', '_blank'), }, { icon: , text: 'Apple', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Arch Linux', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Vercel', perform: () => window.open('https://vercel.com', '_blank'), }, { icon: , text: 'Tesla', perform: () => window.open('https://tesla.com', '_blank'), }, { icon: , text: 'Deno', perform: () => window.open('https://deno.land', '_blank'), }, { icon: , text: 'Discord', perform: () => window.open('https://discord.com', '_blank'), }, { icon: , text: 'Flutter', perform: () => window.open('https://flutter.dev/', '_blank'), }, { icon: , text: 'GitHub', perform: () => window.open('https://github.com/', '_blank'), }, { icon: , text: 'Nike', perform: () => window.open('https://nike.com/', '_blank'), }, { icon: , text: 'Twitter', perform: () => window.open('https://twitter.com', '_blank'), }, ]

• framer/motion

  43 22,054 9.8 TypeScript

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

  

// ... import { SiFramer, SiTailwindcss, SiApple, SiVercel, SiTwitter, SiTesla, SiArchlinux, SiDeno, SiFlutter, SiGithub, SiNike, SiDiscord, } from 'react-icons/si' export const commands: Command[] = [ { icon: , text: 'Framer Motion', perform: () => window.open('https://framer.com/motion', '_blank'), }, { icon: , text: 'TailwindCSS', perform: () => window.open('https://tailwindcss.com', '_blank'), }, { icon: , text: 'Apple', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Arch Linux', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Vercel', perform: () => window.open('https://vercel.com', '_blank'), }, { icon: , text: 'Tesla', perform: () => window.open('https://tesla.com', '_blank'), }, { icon: , text: 'Deno', perform: () => window.open('https://deno.land', '_blank'), }, { icon: , text: 'Discord', perform: () => window.open('https://discord.com', '_blank'), }, { icon: , text: 'Flutter', perform: () => window.open('https://flutter.dev/', '_blank'), }, { icon: , text: 'GitHub', perform: () => window.open('https://github.com/', '_blank'), }, { icon: , text: 'Nike', perform: () => window.open('https://nike.com/', '_blank'), }, { icon: , text: 'Twitter', perform: () => window.open('https://twitter.com', '_blank'), }, ]

• Flutter

  1,203 161,805 10.0 Dart

  Flutter makes it easy and fast to build beautiful apps for mobile and beyond

  

// ... import { SiFramer, SiTailwindcss, SiApple, SiVercel, SiTwitter, SiTesla, SiArchlinux, SiDeno, SiFlutter, SiGithub, SiNike, SiDiscord, } from 'react-icons/si' export const commands: Command[] = [ { icon: , text: 'Framer Motion', perform: () => window.open('https://framer.com/motion', '_blank'), }, { icon: , text: 'TailwindCSS', perform: () => window.open('https://tailwindcss.com', '_blank'), }, { icon: , text: 'Apple', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Arch Linux', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Vercel', perform: () => window.open('https://vercel.com', '_blank'), }, { icon: , text: 'Tesla', perform: () => window.open('https://tesla.com', '_blank'), }, { icon: , text: 'Deno', perform: () => window.open('https://deno.land', '_blank'), }, { icon: , text: 'Discord', perform: () => window.open('https://discord.com', '_blank'), }, { icon: , text: 'Flutter', perform: () => window.open('https://flutter.dev/', '_blank'), }, { icon: , text: 'GitHub', perform: () => window.open('https://github.com/', '_blank'), }, { icon: , text: 'Nike', perform: () => window.open('https://nike.com/', '_blank'), }, { icon: , text: 'Twitter', perform: () => window.open('https://twitter.com', '_blank'), }, ]

• customdiscordrpc

  1,201 14 4.9 C#

  Customizable Discord Rich Presence Client for Windows.

Companies such as Vercel, GitHub, Sentry, Linear, Railway, Raycast and MANY other web applications ended up adding a command menu to their websites as well. Even desktop applications such as Discord, Figma or Slack feature a command menu to help users navigate their complex interfaces with ease.

• deno

  448 92,975 9.9 Rust

  A modern runtime for JavaScript and TypeScript.

  

// ... import { SiFramer, SiTailwindcss, SiApple, SiVercel, SiTwitter, SiTesla, SiArchlinux, SiDeno, SiFlutter, SiGithub, SiNike, SiDiscord, } from 'react-icons/si' export const commands: Command[] = [ { icon: , text: 'Framer Motion', perform: () => window.open('https://framer.com/motion', '_blank'), }, { icon: , text: 'TailwindCSS', perform: () => window.open('https://tailwindcss.com', '_blank'), }, { icon: , text: 'Apple', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Arch Linux', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Vercel', perform: () => window.open('https://vercel.com', '_blank'), }, { icon: , text: 'Tesla', perform: () => window.open('https://tesla.com', '_blank'), }, { icon: , text: 'Deno', perform: () => window.open('https://deno.land', '_blank'), }, { icon: , text: 'Discord', perform: () => window.open('https://discord.com', '_blank'), }, { icon: , text: 'Flutter', perform: () => window.open('https://flutter.dev/', '_blank'), }, { icon: , text: 'GitHub', perform: () => window.open('https://github.com/', '_blank'), }, { icon: , text: 'Nike', perform: () => window.open('https://nike.com/', '_blank'), }, { icon: , text: 'Twitter', perform: () => window.open('https://twitter.com', '_blank'), }, ]

• cmdk

  12 8,555 8.3 TypeScript

  Fast, unstyled command menu React component.

With that, there are a few different approaches for adding a command menu to your website: you can use an open source library (like kmenu, cmdk, or kbar), use a proprietary tool such as CommandBar, or build your own. This tutorial focuses on building your own implementation, however you may not need to depending on whether or not you're satisfied with the other options available.

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

Suggest a related project