GlassIcons
glass-iconsPresents icon actions on layered glass tiles with 3D hover movement.
Usage
Basic usage
Incoming items (Icon + Label + Color), hover/focus See glass 3D Lift up with label slide out.
import { Heart, Star, Bell, Cloud, Zap, Settings } from "lucide-react";
<GlassIcons
columns={3}
items={[
{ icon: <Heart />, label: "Collection", color: "red" },
{ icon: <Star />, label: "Star", color: "orange" },
{ icon: <Bell />, label: "Notification", color: "blue" },
{ icon: <Cloud />, label: "Cloud", color: "indigo" },
{ icon: <Zap />, label: "Lightning", color: "purple" },
{ icon: <Settings />, label: "Settings", color: "green" },
]}
/>Number of grid columns
columns controls the number of grid columns, and narrow screens automatically fall back to 2 columns.
<GlassIcons
columns={2}
items={[
{ icon: <Heart />, label: "Collection", color: "red" },
{ icon: <Star />, label: "Star", color: "orange" },
{ icon: <Bell />, label: "Notification", color: "blue" },
{ icon: <Cloud />, label: "Cloud", color: "indigo" },
]}
/>Monochrome theme color
color passes 'primary' to let the luminous panel take the main color of the theme and automatically adapt to light and shade.
<GlassIcons
columns={2}
items={[
{ icon: <Heart />, label: "Like", color: "primary" },
{ icon: <Star />, label: "Collection", color: "primary" },
]}
/>Custom gradient color
color In addition to the default name, you can also pass any CSS gradient string.
<GlassIcons
columns={2}
items={[
{
icon: <Cloud />,
label: "Aurora",
color: "linear-gradient(135deg, var(--color-chart-1), var(--color-chart-4))",
},
{
icon: <Zap />,
label: "Warm Orange",
color: "linear-gradient(135deg, var(--color-chart-3), oklch(0.72 0.2 30))",
},
]}
/>When to Use
Use it for a grid of labeled glass-like shortcuts with dimensional hover and focus feedback, such as feature entry points, category navigation, or quick actions. Use BorderBeam or ShineBorder to light one element's border, and GlareHover for a reflected sweep. Each GlassIcons item is interactive and needs an accessible name.
Import
import { GlassIcons } from "@hulianui/ui"Props
GlassIconsProps
| Name | Type | Default | Description |
|---|---|---|---|
| items* | GlassIconItem[] | — | A list of icon items, rendered as glass buttons in order according to the grid |
| columns | number | 3 | Number of grid columns, narrow screen will automatically fall back to fewer columns |
| className | string | — | Forward the root grid container className (can cover the number of columns/spacing/alignment) |
| style | CSSProperties | — | Forward the root container inline style |
GlassIconItem · Props
| Name | Type | Default | Description |
|---|---|---|---|
| label* | string | — | hover/focus slides out the text and also acts as a button aria-label |
| color | string | "primary" | Backside glow color, default name primary|blue|purple|red|indigo|orange|green, or any CSS color/gradient |
| className | string | — | Transmit this button className |
GlassIconItem · Events
| Event | Type | Description |
|---|---|---|
| onClick | () => void | Callback when the icon button is clicked |
GlassIconItem · Slots
| Slot | Type | Description |
|---|---|---|
| icon* | ReactNode | Icon node (usually lucide-react), rendered in the center of the glass front layer, aria-hidden |
Usage Guidelines
labelis both slide-out text andaria-label, required, do not leave blank for visual - otherwise the button will lose its accessibility name.- Glass luminescence is only clear on dark backgrounds, and the effect is weak on light backgrounds;
colormust be prefixed with--color-when feeding tokens/gradients. - The container needs to be
overflow-visible, otherwise the 3D lift and label slide out will be cut off.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
import { Heart, Star, Bell } from "lucide-react";
<GlassIcons
columns={3}
items={[
{ icon: <Heart />, label: "Collection", color: "red" },
{ icon: <Star />, label: "Star", color: "orange" },
{ icon: <Bell />, label: "Notification", color: "blue" },
]}
/>