212
Components witha little goo in them.
277 free React components, blocks and screens on coss ui. Copy the source, install with the shadcn CLI, or hand a prompt to your AI editor.
devl.dev/components/liquid-sliderOpen
Try them
Every tile is the real thing. Hover, drag, click.
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.222
Magnetic
Buttons and icons lean toward your pointer as it comes near, labels drifting a little further than their buttons, then spring back the moment you move away.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.240
Liquid FAB
A round action button that squeezes out its actions as droplets: each one stretches away, pinches off into its own button and gets drawn back in when you close it, with labels as tooltips and full keyboard support.122
Magnify Dock
An app dock that swells under your pointer on a stiff spring, bounces apps as they launch, marks running ones with a dot, and works from the keyboard too.225
Confetti Burst
Confetti that blooms out of the button you pressed, hangs at the top of its arc in the air drag, flutters as each piece turns over and drifts down; reduced motion gets a quick check instead.234
Launch Pad
A little rocket venting steam on its pad – click and it lights up, lifts off on a trail of smoke, then drops back in on a retro burn and lands.210
Lava Lamp
Warm wax blobs that wander, melt into one another and drift apart behind your content, with one that lazily trails your cursor.068
Card Pile
Notifications stacked like a small deck of cards: flick the top one away, or press Delete, and the next one steps forward.232
Card Stack
Payment cards tucked in a stitched leather wallet – hover and they rise out in a fan, click the front one to lift it clear and flip it, or a peeking one to pull it forward.Screens
Whole apps you can start from, not just parts.
188
Drive
A cloud drive home with a sidebar of places and quick access, start-from-template cards, and folders that glide between a card grid and a tidy table when you switch views, with search, sort and stars.195
Calendar Week
A week calendar you can push around: drag events to move or stretch them on a 15-minute snap, drag empty time to create one, nudge with the arrow keys, and watch the now line creep down the day.187
Pipeline Today
A salesperson's morning view: drag deals between stages (or move them with the keyboard) while each column's weighted value and the forecast roll live, and a Focus rail tells you who to act on and why, with one-click email, call and snooze that update the deal.How it works
One file each. Yours the moment you add it.
Install with one command
Every piece is a shadcn registry item. The CLI drops a single file into your project, with the coss ui parts it needs.
npx shadcn@latest add https://devl.dev/r/drive.jsonOwn the code
No package to update, no wrapper to fight. It is one readable TypeScript file with typed props, so you change what you like.
import { Drive } from "@/components/drive";Or hand it to your AI
Copy a prompt from any page and your editor gets the source, the install command and the dependencies in one go.
devl.dev/llms.txtThe cutting room
Taste-tested means saying no.
A few of the pieces that didn't make it, and why. Hover one to stamp it again.
Booking Hero
Made it all the way onto the site. One look, one note back: “remove this one.”
Passkey Sign-in
A top bar, a footer and an account chip around one form. Too much page for signing in.
Became Sign In →Two Factor Challenge
A demo hint, a trust checkbox and two fallback menus. It only needed the code field.
Became Verify Email →Magic Link Inbox
Two different screens for waiting on an email was one too many.
Became Verify Email →