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 Tooltip.Provider 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, Tooltip } from 'frosted-ui';

<Tooltip.Provider>
  <Theme>
    <MyApp />
  </Theme>
</Tooltip.Provider>;

This is deliberately opt-in rather than built into Theme: the provider is only reachable through a Base UI namespace export that bundlers cannot tree-shake, so mounting it unconditionally would add ~34 kB gzipped to apps that never render a tooltip.

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.