Welcome to Frosted UI

Frosted is the design system used and and built by Whop.

Getting Started

Prerequisites

• React installed
• Tailwind CSS installed and configured
• Font Awesome access configured (Only free license required)

Installation

Install package:

npm i @whop/frosted-ui

Configure your tailwind.config.ts to use the Frosted UI theme by wrapping your config with preset:

import preset from '@whop/frosted-ui/dist/preset';

const config = preset({
  // your config here
});

export default config;

Wrap your app in the TooltipProvider component and add the Toaster as well:

Note: this example is in Next.js but you can wrap the root of any React project.

import { TooltipProvider, Toaster } from '@whop/frosted-ui';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <TooltipProvider>
      <Component {...pageProps} />
      <Toaster />
    </TooltipProvider>
  );
}

That's it! You're ready to use Frosted UI. Checkout the documentation for more information about the components.