Frosted UI

Design system used by Whop

Install Frosted UI:

$ pnpm add frosted-ui

Import the global CSS file at the root of your application:

import 'frosted-ui/styles.css';

Add the Theme component:

import { Theme } from 'frosted-ui';

export default function () {
  return (
    <html>
      <body>
        <Theme>
          <MyApp />
        </Theme>
      </body>
    </html>
  );
}

If your app uses Tooltip, also mount TooltipProvider at the root. It puts every tooltip in a shared delay group, so moving from one trigger to an adjacent one opens the tooltip instantly instead of waiting out the delay again:

import { Theme, TooltipProvider } from 'frosted-ui';

<TooltipProvider>
  <Theme>
    <MyApp />
  </Theme>
</TooltipProvider>;

This stays opt-in and out of Theme. TooltipProvider is the only way to mount the delay group, and importing it does not include the tooltip popup.

getColorForEmoji and emojiColorMap live on their own subpath rather than the package root, because the generated lookup table is ~40 kB:

import { getColorForEmoji } from 'frosted-ui/helpers/emoji-colors';

const color = getColorForEmoji('❤️') ?? 'gray';

• Setup steps
• Tailwind plugin
• Typography
• Color system
• Breakpoints

Frosted UI is heavily based on Radix Themes design system and Radix Icons.