> ## Documentation Index > Fetch the complete documentation index at: https://docs.whop.com/llms.txt > Use this file to discover all available pages before exploring further. # Frosted UI > Use Whop's UI kit and Tailwind design system. Frosted UI is Whop's comprehensive React component library and design system. It provides more than 60 components that meet accessibility standards. It also includes a sophisticated color system, typography scale, and seamless dark mode support—all built on Radix UI primitives and Tailwind CSS. ## Installation ```bash pnpm theme={null} pnpm add @whop/react ``` ```bash npm theme={null} npm install @whop/react ``` ```bash yarn theme={null} yarn add @whop/react ``` ```bash bun theme={null} bun install @whop/react ``` The `@whop/react` package includes Frosted UI and all necessary dependencies. Wrap your application with the `WhopApp` component in your root layout. This sets up the theme and iframe SDK. ```tsx theme={null} // app/layout.tsx import { WhopApp } from "@whop/react"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` Use the `withWhopAppConfig` wrapper in your Next.js configuration: ```typescript theme={null} // next.config.ts import type { NextConfig } from "next"; import { withWhopAppConfig } from "@whop/react/next.config"; const nextConfig: NextConfig = { // your config options }; export default withWhopAppConfig(nextConfig); ``` This configures server actions and optimizes Frosted UI imports. If you're using Tailwind CSS, add the Frosted UI plugin to access design tokens: ```javascript theme={null} // tailwind.config.js import { frostedThemePlugin } from "@whop/react/tailwind"; export default { content: ["./src/**/*.{js,ts,jsx,tsx}"], plugins: [frostedThemePlugin()], }; ``` Frosted UI is now set up and ready to use. *** ## Typography Frosted UI provides a comprehensive typography system with two main components: `Heading` and `Text`. ### Type scale Both components use a 10-step size scale (0-9): | Size | Font Size | Usage | | ---- | --------- | ------------------- | | 0 | 10px | Smallest text | | 1 | 12px | Small labels | | 2 | 14px | Body text (small) | | 3 | 16px | Body text (default) | | 4 | 18px | Emphasized text | | 5 | 20px | Subheadings | | 6 | 24px | Headings | | 7 | 28px | Large headings | | 8 | 32px | Display text | | 9 | 40px | Hero text | ### Text component ```tsx theme={null} import { Text } from "@whop/react"; This is body text Small muted text Form Label ``` **Props:** * `size`: `"0"` through `"9"` (default: `"3"`) * `weight`: `"light"` | `"regular"` | `"medium"` | `"bold"` * `align`: `"left"` | `"center"` | `"right"` * `color`: Any accent color or `"gray"` * `highContrast`: Increases contrast for accessibility * `as`: `"span"` | `"div"` | `"p"` | `"label"` ### Heading component ```tsx theme={null} import { Heading } from "@whop/react"; Page Title Section Heading ``` **Props:** * `size`: `"0"` through `"9"` (default: `"6"`) * `weight`: `"light"` | `"regular"` | `"medium"` | `"bold"` * `align`: `"left"` | `"center"` | `"right"` * `as`: `"h1"` | `"h2"` | `"h3"` | `"h4"` | `"h5"` | `"h6"` * `color`: Any accent color or `"gray"` * `highContrast`: Increases contrast for accessibility ### Other typography components ```tsx theme={null} import { Code, Strong, Em, Kbd } from "@whop/react"; const example = "code"; Bold text Italic text ⌘ K ``` *** ## Colors Frosted UI uses Radix color scales, providing 12-step color palettes with both solid and alpha variants. ### Accent colors 27 accent colors are available: **Regular Colors:** `tomato`, `red`, `ruby`, `crimson`, `pink`, `plum`, `purple`, `violet`, `iris`, `indigo`, `blue`, `cyan`, `teal`, `jade`, `green`, `grass`, `brown`, `orange` **Bright Colors:** `sky`, `mint`, `lime`, `yellow`, `amber`, `lemon`, `magenta` **Metallic Colors:** `gold`, `bronze` ### Gray colors 6 gray scales with different color temperatures: * `gray` - Pure neutral gray * `mauve` - Slightly purple-tinted * `slate` - Cool blue-tinted * `sage` - Subtle green-tinted * `olive` - Warm olive-tinted * `sand` - Warm sandy-tinted * `auto` - Automatically matches accent color ### Semantic colors Pre-configured colors for common use cases: * **Danger:** `red` (default), `tomato`, `ruby` * **Warning:** `amber` (default), `yellow` * **Success:** `green` (default), `teal`, `jade`, `grass` * **Info:** `sky` (default), `blue` ### Using colors ```tsx theme={null} import { Button, Badge, Text } from "@whop/react"; Active Muted text ``` ### Tailwind color classes With the Tailwind plugin, you can use Frosted UI colors directly: ```tsx theme={null}
Blue themed box
Red with alpha background
``` **Color Scale:** * Steps 1-3: Backgrounds and subtle fills * Steps 4-6: Borders and separators * Steps 7-9: Interactive elements * Steps 10-12: Text and high contrast elements **Alpha Variants:** * Use `{color}-a1` through `{color}-a12` for transparency With the `frostedUiPlugin()` added to your tailwind config, the default tailwind colors like `bg-blue-200` don't work. Use `bg-blue-2` instead according to the above documentation. *** ## Dark mode Frosted UI includes automatic dark mode support that respects system preferences and user choices. ### How it works Manage dark mode through three appearance modes: * `"inherit"` (default) - Respects system preference * `"light"` - Forces light mode * `"dark"` - Forces dark mode The browser stores the theme preference in a cookie (`whop-frosted-theme`) and falls back to the system preference when none exists. ### Configuration Configure the appearance in your `WhopApp` component: ```tsx theme={null} {children} ``` Or create nested themes with different appearances: ```tsx theme={null} import { Theme } from "@whop/react";
This section is always light
This section is always dark
 ``` ### Tailwind dark mode classes Use the `dark:` prefix for dark mode styles: ```tsx theme={null}
Adapts to theme
``` *** ## Breakpoints Frosted UI uses a mobile-first responsive system with 5 breakpoints. ### Breakpoint scale | Name | Min Width | Usage | | --------- | --------- | ---------------- | | `initial` | 0px | Mobile (default) | | `xs` | 520px | Large mobile | | `sm` | 768px | Tablet | | `md` | 1024px | Small desktop | | `lg` | 1280px | Desktop | | `xl` | 1640px | Large desktop | ### Responsive props Many components support responsive values using an object syntax: ```tsx theme={null} import { Text, Box } from "@whop/react"; Responsive text size; ``` ### Tailwind responsive classes ```tsx theme={null}
Responsive padding
Responsive text
``` *** ## Icons Frosted UI includes an icon system through the `@frosted-ui/icons` package. ### Using Icons ```tsx theme={null} import { IconButton } from "@whop/react"; import { MagnifyingGlassIcon, Cross2Icon } from "@frosted-ui/icons"; ``` ### Common Icons Frosted UI uses Radix Icons, which includes icons like: * Navigation: `ChevronRightIcon`, `ChevronDownIcon`, `ArrowRightIcon` * Actions: `Cross2Icon`, `CheckIcon`, `PlusIcon`, `MinusIcon` * UI: `MagnifyingGlassIcon`, `GearIcon`, `PersonIcon` * More icons are available in the library. *** ## Tailwind plugin The Frosted UI Tailwind plugin provides design tokens as Tailwind utilities. ### What's Included **Typography:** ```tsx theme={null}

Styled with Frosted UI tokens

``` **Colors:** ```tsx theme={null}
Blue themed
``` **Spacing & Layout:** ```tsx theme={null}
Responsive padding
``` ### Key differences from standard Tailwind 1. **Font Size Scale:** Uses 0-9 instead of xs/sm/base/lg 2. **Line Height Scale:** Matches font size scale (0-9) 3. **Color System:** 12-step Radix color scales with alpha variants 4. **Semantic Colors:** Built-in danger, warning, success, info colors 5. **Design Tokens:** All values use CSS variables for theme consistency *** ## Common components ### Button ```tsx theme={null} import { Button } from "@whop/react"; ``` **Props:** * `size`: `"1"` | `"2"` | `"3"` | `"4"` * `variant`: `"solid"` | `"soft"` | `"surface"` | `"ghost"` | `"classic"` * `color`: Any accent color * `highContrast`: Enhanced contrast * `loading`: Shows loading spinner * `disabled`: Disables interaction ### Input ```tsx theme={null} import { TextInput, TextArea } from "@whop/react";