Robot components for shadcn/ui
Arms, cells and machines that solve their own kinematics in the browser. Install the source into your project, theme it with CSS variables, and set its size with a prop.
pnpm dlx shadcn@latest add https://robocn.dev/r/robot-arm.jsonmove your pointer
The machines
All componentsMicro duck
A biped that walks, pecks, and quacks.
Reachy mini
A head on six solved rods, eyes that follow.
Robot quadruped
Four solved legs, standing, walking, and trotting.
Linear actuator
Controlled stroke and a piston cutaway.
Servo motor
Positional shaft with three horn styles.
Rotary table
Indexing platter, fixtures, and workpieces.
Robot rover
Four or six wheels, heading, and steering.
Robot drone
Four or six rotors, guards, and blade angles.
Lidar scan
Your range data, plotted in polar coordinates.
Robot gripper
Parallel or angular fingers, controlled opening.
Conveyor belt
Wrapping travel, rollers, and workpieces.
Robot arm
Any number of links, eight tools, four mounts.
SCARA arm
Plan view, Z spindle, swept area.
Delta arm
Three biceps, real parallel kinematics.
Gantry arm
Independent axes, plotter trail.
Robot face
Eyes that follow the pointer. Six moods.
Robot loader
Pick and place as a progress indicator.
Four ways to draw one
variant changes how a machine is painted, never where its joints are. Blueprint adds the grid, the dimensions and the joint angles, because a drawing is what you want when you are explaining a mechanism rather than selling one.
solid
Painted machine.
outline
Line art.
blueprint
Grid, dimensions, joint angles.
wire
Skeleton.
Kinematics, not keyframes
Two links solve with the law of cosines; longer chains run FABRIK, seeded with the previous frame. Out-of-reach targets stretch toward the target instead of breaking the pose.
Themed like the rest of your UI
Four colour roles resolve prop first, then CSS variable, then a built-in default. Set --robot-shell once and every machine on the page follows.
Quiet when nothing moves
The animation loop stops once a pose settles, so a parked arm costs no renders. Reduced-motion settings skip the easing entirely.