frosted-ui
v0.0.1-canary.159
Published
<h1 align="center">Frosted UI</h1>
Readme
[!WARNING] The design system is still a work in progress so you can expect some breaking changes.
Getting Started
Install Frosted UI:
$ pnpm add frosted-uiImport the global CSS file at the root of your application:
import 'frosted-ui/styles.css';Add the Theme component:
import { Theme } from 'frosted-ui';
export default function () {
return (
<html>
<body>
<Theme>
<MyApp />
</Theme>
</body>
</html>
);
}If 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:
import { Theme, Tooltip } from 'frosted-ui';
<Tooltip.Provider>
<Theme>
<MyApp />
</Theme>
</Tooltip.Provider>;This 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.
Emoji colors
getColorForEmoji and emojiColorMap live on their own subpath rather than the package root, because the generated lookup table is ~40 kB:
import { getColorForEmoji } from 'frosted-ui/helpers/emoji-colors';
const color = getColorForEmoji('❤️') ?? 'gray';Guides
Acknowledgments
Frosted UI is heavily based on Radix Themes design system and Radix Icons.