Frosted App Icons React component
A home-screen card of frosted-glass app icons over drifting colour: a soft light follows the pointer behind the glass, icons lift with a specular highlight that tracks the cursor, opening an app ripples it and pops its unread badge, and a frosted dock sits underneath.
About the Frosted App Icons component
Frosted App Icons is a little home screen made of frosted glass. Colour drifts slowly behind the icons and a soft light follows your pointer, so you can see the glass blur and pick up whatever is behind it.
Each icon lifts when you point at it, with a highlight that slides across the glass, and opening one sends out a ripple and pops its unread badge. It's built from plain buttons, so it works with the keyboard and announces what was opened.
When to use it
Use it to show off an app, an integrations list or a 'works with everything' section, as a playful launcher for a personal site, or as a hero visual for a mobile product.
It's decorative-first: if people need to compare integrations or read details, a list with descriptions works better.
Installation
Add the Frosted App Icons component to your project with the shadcn CLI. It lands in components/frosted-app-icons.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/frosted-app-iconsOr copy the source by hand and install its dependencies:
npm install lucide-react clsx tailwind-mergeProps
<FrostedAppIcons /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| apps | { id: string; label: string; icon: LucideIcon; tint: string; badge?: number }[] | APPS |
| dock | { id: string; label: string; icon: LucideIcon; tint: string; badge?: number }[] | DOCK |
| colors Colours of the light blobs drifting behind the glass. | [string, string, string] | — |
| time Clock shown in the status row; pass null to hide the row. | string | null | "9:41" |
| followLight Light that follows the pointer behind the glass. | boolean | true |
| theme | "dark" | "light" | "dark" |
| onOpen | (app: FrostedApp) => void | — |
- apps{ id: string; label: string; icon: LucideIcon; tint: string; badge?: number }[]Default: APPS
- dock{ id: string; label: string; icon: LucideIcon; tint: string; badge?: number }[]Default: DOCK
- colors
Colours of the light blobs drifting behind the glass.
[string, string, string] - time
Clock shown in the status row; pass null to hide the row.
string | nullDefault: "9:41" - followLight
Light that follows the pointer behind the glass.
booleanDefault: true - theme"dark" | "light"Default: "dark"
- onOpen(app: FrostedApp) => void
npm dependencies
Installed for you by the shadcn CLI.
Frosted App Icons FAQ
- Can I use my own icons?
- Yes. icon takes any React component that accepts size and className, such as a Lucide icon or your own SVG component, and tint sets the colour washed into its glass.
- How do badges work?
- Give an app a badge number. Opening the app pops the badge and clears it; onOpen tells you which app was opened.
- Does the frosted glass work everywhere?
- backdrop-filter is supported in all current browsers. Where it isn't, the icons still show their tinted gradient, just without the blur.
- Can I change the colours behind the glass?
- Pass colors with three colours for the drifting blobs, and followLight={false} to turn off the light under the pointer.
