engineering

1 min read

Radix UI tips

Written By

QI

Qing

Creator, Quotion

Published on

1/10/2024

primitives_c7a6ad

Radix UI is a popular React library to build accessible products. Here is a neat tip I found very useful.

Group tooltips

Use TooltipProvider to group all tooltips together, to get a better transition experience. See my demo (The brand color example isn’t grouped, the background color example is grouped)👇

Code example:

export function BackgroundColor() {
  return (
    <div>
      // ✅ Lift it here
      <TooltipProvider>
        <ul className="flex flex-wrap gap-x-6 gap-y-4">
          {COLORS.map(({ name, className, hex }) => (
            <li key={name}>
              // ❌ Don't use TooltipProvider here
              <Tooltip>
                <TooltipTrigger
                  className={clsx(
                    'h-7 w-7 rounded-sm border',
                    FOCUS_RING_ERROR_SHADOW_XS,
                    className,
                  )}
                  type="button"
                />
                <TooltipContent>
                  <p className="pb-1.5 text-xs font-medium text-gray-500">
                    {name}
                  </p>
                  <p className="text-sm font-semibold text-gray-600">{hex}</p>
                </TooltipContent>
              </Tooltip>
            </li>
          ))}
        </ul>
      </TooltipProvider>
    </div>
  );
}

Thanks to RadixUI’s consistency, this tip can be applied to many other Radix components as well, for example: hover-card.

engineering

Create your blogs directly from Apple Notes.

Say goodbye to complex CMS updates and management issues!

You focus on creating quality content while Quotion takes care of the rest.

Learn moreTry it free

Latest

More from the blog

View all posts