\n\n> [!WARNING]\n> The design system is still a work in progress so you can expect some breaking changes.\n\n\n\n## Getting Started\n\nInstall Frosted UI:\n\n```sh\n$ pnpm add frosted-ui\n```\n\nImport the global CSS file at the root of your application:\n\n```tsx\nimport 'frosted-ui/styles.css';\n```\n\nAdd the Theme component:\n\n```tsx\nimport { Theme } from 'frosted-ui';\n\nexport default function () {\n return (\n \n \n \n \n \n \n \n );\n}\n```\n\nIf 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:\n\n```tsx\nimport { Theme, Tooltip } from 'frosted-ui';\n\n\n \n \n \n;\n```\n\nThis 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.\n\n### Emoji colors\n\n`getColorForEmoji` and `emojiColorMap` live on their own subpath rather than the package root, because the generated lookup table is ~40 kB:\n\n```tsx\nimport { getColorForEmoji } from 'frosted-ui/helpers/emoji-colors';\n\nconst color = getColorForEmoji('❤️') ?? 'gray';\n```\n\n## Guides\n\n- [Setup steps](https://storybook.whop.dev/?path=/docs/guides-1-getting-started--docs)\n- [Tailwind plugin](https://storybook.whop.dev/?path=/docs/guides-5-tailwind-plugin--docs)\n- [Typography](https://storybook.whop.dev/?path=/docs/guides-2-typography--docs)\n- [Color system](https://storybook.whop.dev/?path=/docs/guides-3-color--docs)\n- [Breakpoints](https://storybook.whop.dev/?path=/docs/guides-4-breakpoints--docs)\n\n## Acknowledgments\n\nFrosted UI is heavily based on [Radix Themes](https://www.radix-ui.com/) design system and [Radix Icons](https://github.com/radix-ui/icons).\n","readmeFilename":"README.md"}