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.
About the Icon Box component
Icon Box is a feature card with an icon tile, a title and a short description, the building block of feature and service grids. In the card style a soft light follows the pointer around the card's 1px border and across its surface, and the icon tile lifts and tilts slightly on hover. Given a link, the whole box becomes the link with a Learn more line and an arrow that nudges forward.
icon takes one of eight built-in icons (bolt, shield, chart, globe, layers, sparkles, lock, code) or your own element. title and description set the text, href and linkLabel turn it into a link, variant picks card or plain (no frame) and layout puts the icon above or beside the text. accent colors the pointer light and the glow under the icon tile. Keyboard focus plays the same lift as hover.
When to use it
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 @reactframe/icon-boxOr 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
npm dependencies
Installed for you by the shadcn CLI.
Icon Box 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.
- Why do my boxes show Instant deploys?
- title, description and icon have sample values for the demo. Pass your own title and description to every box.
