Icon Box React component
A feature box with an icon, title and text for features and services grids: in the card style a light follows the pointer along the border, the icon tile lifts and tilts on hover, and a linked box nudges its arrow forward.
When to use the Icon Box component
Use Icon Box for feature and service grids on landing pages, product overviews and pricing pages: each box is one idea with an icon, a short title and a sentence.
Give boxes an href when each feature has its own page; the whole box becomes the link, with a clear 'Learn more' affordance.
Installation
Add the Icon Box component to your project with the shadcn CLI. It lands in components/icon-box.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/icon-box.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<IconBox /> accepts 10 props, all optional.
| Prop | Type | Default |
|---|---|---|
| icon One of the built-in icons or your own node. | "bolt" | "shield" | "chart" | "globe" | "layers" | "sparkles" | "lock" | "code" | React.ReactNode | "bolt" |
| title | string | "Instant deploys" |
| description | string | "Push to main and your site is live worldwide in under ten seconds, with a preview link f… |
| href Makes the whole box a link, with a "Learn more" line. | string | — |
| linkLabel | string | "Learn more" |
| variant card: bordered with a light that follows the pointer. plain: no frame. | "card" | "plain" | "card" |
| layout vertical: icon above the text. horizontal: icon beside it. | "vertical" | "horizontal" | "vertical" |
| accent Colour of the icon tile's glow and the pointer light. | string | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- icon
One of the built-in icons or your own node.
"bolt" | "shield" | "chart" | "globe" | "layers" | "sparkles" | "lock" | "code" | React.ReactNodeDefault: "bolt" - titlestringDefault: "Instant deploys"
- descriptionstringDefault: "Push to main and your site is live worldwide in under ten seconds, with a preview link f…
- href
Makes the whole box a link, with a "Learn more" line.
string - linkLabelstringDefault: "Learn more"
- variant
card: bordered with a light that follows the pointer. plain: no frame.
"card" | "plain"Default: "card" - layout
vertical: icon above the text. horizontal: icon beside it.
"vertical" | "horizontal"Default: "vertical" - accent
Colour of the icon tile's glow and the pointer light.
string - theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- How does the border light work?
- The box stores the pointer position in two CSS variables, and a radial gradient masked to the 1px border follows it. Nothing re-renders while the pointer moves, so a grid of boxes stays smooth.
- Can I use my own icons?
- Yes. Pass any node as icon; the eight built-in ones are just stroke paths for quick starts.
- Does it work without a pointer?
- Keyboard focus triggers the same lift and arrow nudge as hover, and linked boxes are ordinary links for screen readers.
