> ## 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 our UI kit and tailwind design system. Frosted UI is Whop's comprehensive React component library and design system. It provides 60+ accessible components, a sophisticated color system, typography scale, and seamless dark mode support—all built on top of 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` DO NOT 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 Dark mode is managed through three appearance modes: * `"inherit"` (default) - Respects system preference * `"light"` - Forces light mode * `"dark"` - Forces dark mode The theme preference is stored in a cookie (`whop-frosted-theme`) and falls back to system preference if not set. ### Configuration Set 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` * And many more... *** ## 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";