DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

Tailwindcss version of Looms's beautiful Emoji Toolbar React component

loom/reactions

Tailwindcss version of Looms's beautiful Emoji Toolbar React component

This is the open-source Tailwindcss version of Looms’s beautiful Emoji Toolbar React component to react to anything.

Tailwindcss version of Looms's beautiful Emoji Toolbar React component

Demo

View the demo here: https://reaction-demo.vercel.app

Installation

Requirements

  • tailwindcss
  • tailwindcss-animate

It’s pretty easy to install. I made it a standalone component that you can copy in your codebase.

  1. Copy the toolbar component

  2. Add keyframes and animation to your tailwind.config.ts

  3. Import into your page

  4. Change the emojis in the REACTIONS object in toolbar.tsx

Future Ideas

  • onClick handler
  • size prop to adjust the size of the toolbar
  • dark mode support

Inspiration

  • Thanks to the @loom design team for the awesome component.
  • Thanks to @shadcn who gave me a new joy for UI design.

GitHub

View Github

Top comments (0)