Twemoji

Render Unicode emoji as Twemoji SVG images inline with text.

Hello from Viet Nam

Built with and

Loading…

import { Twemoji } from "@/components/twemoji/twemoji"
 
export default function TwemojiDemo() {
  return (
    <div className="flex flex-col gap-4 text-center">
      <p className="text-lg">
        <Twemoji>👍 ❤️ 🤣 😲 😭 😡</Twemoji>
      </p>
      <p className="text-lg">
        <Twemoji>Hello from Viet Nam 🇻🇳</Twemoji>
      </p>
      <p className="text-base">
        <Twemoji>Built with 💛 and ☕️</Twemoji>
      </p>
    </div>
  )
}

Features

Consistent emoji rendering across all platforms and browsers.
Customizable image source for self-hosting or alternative CDNs.
Server component compatible.

Installation

$ pnpm dlx shadcn@latest add @ncdai/twemoji

Usage

import { Twemoji } from "@/components/twemoji"

<Twemoji>Hello from Viet Nam 🇻🇳</Twemoji>

API Reference

Twemoji

Prop

Type

Examples

Custom Source

<Twemoji
  source={(cp) =>
    `https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/${cp}.svg`
  }
>
  Hello from Viet Nam 🇻🇳
</Twemoji>

Command Palette

Twemoji