Components

Meshball

3D network globe rendered on Canvas with depth-aware nodes, Fibonacci sphere distribution, and glassmorphic overlay primitives.

Loading

Installation

pnpm dlx shadcn@latest add @toui/meshball

Examples

Network Monitor

Loading

Minimal

Loading

API Reference

Meshball

PropTypeDefault
sizenumber480
nodeCountnumber120
radiusnumber175
rotationSpeednumber0.0004
connectionThresholdnumber0.38
childrenReact.ReactNode

MeshballChip

PropTypeDefault
labelstring
valuestring
activebooleanfalse

MeshballCallout

PropTypeDefault
metricstring
titlestring
subtitlestring

MeshballStatus

PropTypeDefault
labelstring
onlinebooleantrue

Credits

  • Sphere distribution via Fibonacci sphere algorithm.
  • Built with Canvas 2D API and Motion.

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.