Night Owl: free React illustration

Install

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

npx shadcn@latest add https://devl.dev/r/night-owl.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 { NightOwl } from "@/components/night-owl";

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

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 Night Owl source. Everything is optional unless it says required.

Prop	Type	Default
name	string	"Ollie"
hue	NightOwlHue	"violet"
mode	NightOwlMode	"auto"
awakeTitle	string	"Working late?"
awakeDescription	string	"The night shift is better with company."
sleepyTitle	string	—
sleepyDescription	string	"Owls nap through the day. Switch to dark mode to wake him."
onHoot	() => 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.

255

Desk Bot

A little desk robot that follows your cursor with glowing eyes, perks its antenna when you come close, and nods off after a few quiet seconds until you tap it awake.

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.