@whop/frosted-ui NPM

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.