Desk Bot: free React illustration

Install

Run this in any project set up for the shadcn CLI. It copies the Desk Bot source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/desk-bot.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { DeskBot } from "@/components/desk-bot";

export default function Page() {
  return <DeskBot />;
}

Built with

A free React illustration in the Characters collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

npm: motion

Props

Read from the Desk Bot source. Everything is optional unless it says required.

Prop	Type	Default
name	string	"Pip"
hue	DeskBotHue	"sky"
idleAfter	number	6000
onWake	() => void	—
onDoze	() => void	—
className	string	—

More in Characters

254

Carrier Bird

A round little bird hops beside a sealed letter; press send and it hops over, grabs the envelope and flaps off on a dotted trail before a tick confirms it's sent.

256

Keyboard Cat

Loading art with a cat loafing on a laptop: its paws knead the keys so they light up while code types out and the progress bar fills, then it stretches and hops off when the job is done.

257

Night Owl

An owl on a branch that follows your cursor and tilts its head at you. Wide awake under the moon in dark mode, heavy-lidded and snoozing in light mode.