MagicBento
magic-bentoBuilds a bento card grid with a pointer spotlight, glowing borders, and optional tilt.
Usage
Basic usage
Input card data, radial spotlight + stroke light appear when the cursor moves into the card; colSpan controls the bento layout of different sizes across columns.
Data Insights
Track user behavior and funnels
Overview Panel
Centralized data view
Teamwork
Seamless real-time collaboration
Automation
Streamline repetitive workflows
Security Protection
Enterprise-level permissions and auditing
<MagicBento
items={[
{ label: "Insights", title: "Data Insights", description: "Tracking user behavior and funnel", colSpan: 2 },
{ label: "Overview", title: "Overview Panel", description: "Centralized Data View" },
{ label: "Teamwork", title: "Team collaboration", description: "Seamless real-time collaboration" },
]}
/>3D Tilt
enableTilt Makes the card slightly tilt along with the cursor position, enhancing stereo feedback.
Data Insights
Track user behavior and funnels
Overview Panel
Centralized data view
Teamwork
Seamless real-time collaboration
Automation
Streamline repetitive workflows
Security Protection
Enterprise-level permissions and auditing
<MagicBento items={items} enableTilt />Customized glow color
glowColor To feed the halo/stroke light, you must use token with the prefix --color-; spotlightRadius to adjust the focus range.
Data Insights
Track user behavior and funnels
Overview Panel
Centralized data view
Teamwork
Seamless real-time collaboration
Automation
Streamline repetitive workflows
Security Protection
Enterprise-level permissions and auditing
<MagicBento
items={items}
glowColor="var(--color-chart-2)"
spotlightRadius={420}
/>Close interaction
disableAnimations renders a static mesh (equivalent to reduced-motion) without any cursor feedback.
Data Insights
Track user behavior and funnels
Overview Panel
Centralized data view
Teamwork
Seamless real-time collaboration
Automation
Streamline repetitive workflows
Security Protection
Enterprise-level permissions and auditing
<MagicBento items={items} disableAnimations />When to use
Use MagicBento for a landing-page or dashboard hero containing differently sized feature cards with spotlight and border effects. Use TiltedCard for one tilting card, or PixelCard for a pixel-wave hover effect.
Import
import { MagicBento } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | MagicBentoItem[] | Built-in examples | Card data; omission renders built-in preview cards. |
| columns | number | 4 | Number of grid columns, before item spans are applied. |
| glowColor | string | var(--color-primary) | Spotlight and border color. Use a real --color- token or any CSS color. |
| spotlightRadius | number | 280 | Spotlight radius in pixels. |
| enableSpotlight | boolean | true | Enables the pointer-following radial spotlight. |
| enableBorderGlow | boolean | true | Brightens borders near the pointer. |
| enableTilt | boolean | false | Enables subtle 3D pointer tilt. |
| disableAnimations | boolean | false | Disables all animation and interaction, equivalent to reduced motion. |
| className | string | — | Class name forwarded to the grid root. |
| style | CSSProperties | — | Inline styles forwarded to the grid root. |
MagicBentoItem is { label?, title?, description?: ReactNode; children?: ReactNode; colSpan?: number; rowSpan?: number }. children replaces the default label, title, and description layout.
Usage notes
- [[hulian-token-color-var-needs-color-prefix]]: use
var(--color-primary)orvar(--color-chart-2). Barevar(--primary)does not resolve under Tailwind v4. - Keep
colSpanandrowSpanwithin the configured grid; a span larger thancolumnsoverflows. - Reduced motion or
disableAnimationsproduces a static grid. - Built-in descriptions are Chinese:
"\u8ffd\u8e2a\u7528\u6237\u884c\u4e3a"(“Track user behavior”),"\u96c6\u4e2d\u5f0f\u6570\u636e\u89c6\u56fe"(“Centralized data view”),"\u65e0\u7f1d\u534f\u4f5c"(“Seamless collaboration”),"\u7cbe\u7b80\u5de5\u4f5c\u6d41"(“Streamlined workflows”),"\u8fde\u63a5\u5e38\u7528\u5de5\u5177"(“Connect common tools”), and"\u4f01\u4e1a\u7ea7\u9632\u62a4"(“Enterprise-grade protection”). Passitemsfor production copy.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
Data Insights
Track user behavior and funnels
Overview Panel
Centralized data view
Teamwork
Seamless real-time collaboration
Automation
Streamline repetitive workflows
Security Protection
Enterprise-level permissions and auditing
<MagicBento
columns={4}
spotlightRadius={280}
enableSpotlight={true}
enableBorderGlow={true}
enableTilt={false}
disableAnimations={false}
items={[
{ label: "Insights", title: "Data Insights", description: "Track User Behavior", colSpan: 2 },
{ label: "Overview", title: "Overview Panel", description: "Centralized Data View" },
// …
]}
/>