001
Components with a little goo in them.
Things I build for real products, cleaned up and shared. Built on coss ui, one file each, yours to steal.
- in this shelf
- 149
- categories
- 16
- across devl
- 277· 35 cut
Liquid8
002
Liquid Switch
A toggle whose thumb stretches as it crosses, trails two droplets behind it and swallows them back up the moment it lands.003
Liquid Segments
A row of options where the selected pill is a soft blob that stretches, splits and joins back up as it slides, and you can drag it straight to the one you want.004
Drip Tabs
Vertical settings tabs where the highlight runs down the rail like a bead of water, trailing a little drop that catches up and sinks back in.005
Drip Badge
A notification count made of liquid: a new one makes a droplet drip off the bottom, reading one pinches a piece off the side, and the number rolls either way.006
Liquid Checkbox
A checkbox that fills with a little pour of liquid before the tick draws in, and drains when you uncheck it. A select-all box can sit part full as a list gets done.007
Liquid Progress
A progress bar filled with liquid: each jump surges forward and the rounded front wobbles before it settles, and when there's no telling how long it'll take, a slug of it sloshes end to end.008
Liquid Slider
A range slider whose thumb is a droplet: it stretches when you drag fast, melts into the filled track, and buds off a little value bubble while you hold it.Conversation13
009
Prompt Bar
A prompt box that grows as you type, with attachments, a model menu, an approval toggle and a mic that opens into a live level meter, plus a send button that only lights up when there's something to send.010
Streamed Reply
An answer that reads its sources first, then softly streams in word by word, with little numbered chips you can hover to peek at each source, all in a card that holds its size the whole time.coss ui
The kit every devl component is built on — Base UI + Tailwind, copy-paste, open source.
011
Footnoted Answer
An answer whose footnotes really point somewhere: hover a number and its sentence lights up in the source's colour, click it and the quoted passage unfolds with the matching words marked.012
Reply Toolbar
The quiet row under an AI reply where every small action gives something back: copy draws a check, regenerate opens a version switcher, a thumb asks what worked and read aloud turns into an equaliser.013
Model Switcher
A model menu that helps you choose: hover a model to compare speed, quality and cost, turn on thinking to set the effort, and watch latency and price count to their new values, inline or from a pill trigger.014
Fill-in Prompts
Saved prompts you fill in right inside the sentence, each blank growing with its text in its own colour, with quick picks for common answers and a Use button that waits until every gap is filled.015
Working Out Loud
Lets people watch an agent think: a running clock, steps that tick off along a rail, sources that slide in as they're found, and a tidy one-line summary once it's done.016
Status Pill
A tiny working indicator that rolls through what it's doing, from Reading to Searching to Writing, eases to fit each word and lands on a green check when it's finished.017
Chat Branches
A conversation you can fork from any message, with a little branch map up top that shows every path you tried and hops between them in one click.018
Mention Picker
Type @ in a message and a picker opens right at the caret with people, files and channels; what you pick lands as a token that moves and deletes as one piece.019
Slash Menu
A writing surface where typing / opens a command menu right at the caret, narrows as you type and drops in a styled block: heading, to-do, callout, code and more.020
Typing Indicators
Four quiet ways to say a reply is coming: a dotted bubble, a named line, a stack of faces for busy threads and a soft shimmer for an assistant at work.021
Voice Note
A chat voice message you can scrub like a waveform, with a play button that morphs to pause, a speed chip that rolls, and a transcript that follows along word by word.Mission Control10
022
Run List
Keep an eye on every background agent from one calm list, with live clocks, counts by status and a click to see the last few steps or sign off the work.023
Departures
An airport departures board for your agents: each row flips letter by letter as work boards, runs, gets delayed or lands, hand-offs show as connecting flights, and the one waiting on you glows amber with an Approve button.024
Constellation
Your agents and the tools they reach for, drawn as a small constellation: each call and its answer travel the line as a spark, busy lines glow brighter, and an agent that needs you turns amber with Approve right underneath.025
Spawn Tree
See which agent started which, with each one's time and cost ticking on its card and every branch adding up what it spent.026
Conveyor
A job queue on a little conveyor belt: jobs drop on, ride into whichever worker frees up and land in Done or Failed, and when a rate limit hits the belt stops while the backlog chart shows the pile-up and the drain.027
Swarm
A big job split across workers as a honeycomb: each cell fills with honey as its tasks finish, retries shimmer, failures crack, and done, failed, cost and time left roll along up top.028
Flame Profile
An agent run as a flame graph, one stacked frame per call and as wide as it took; switch the lens to tokens or cost and the frames spring to their new sizes, click any frame to zoom in, and the slowest one is flagged for you.029
Drift Chart
An agent's plan drawn as dashed outlines with the real work filling in over them: when a step runs long it spills into amber, nudges everything after it to the right and drags the finish line with it.030
Tool Receipt
Every tool call your agent makes prints as a little thermal receipt with its time, tokens and cost; tap one to unroll the arguments and result, failed calls get a red VOID stamp and a Retry, and a whole run stacks up on a spike with a running total.031
Token Budget
See exactly what's filling your model's context, as a field of cells or a treemap of the same parts; hover anything to light it in both, drop a file you don't need, and Compact folds older turns into a short summary.Trust & Control7
032
Go / No-go
A clear yes or no for risky agent actions that shows the exact command or diff, answers to Y and N, and folds into a one-line receipt you can undo.033
Access Pass
When an agent wants more access it hands you a boarding pass that says who, what and why; pick once, an hour or always, approve, and the stub tears off along the perforation into a little pass with a countdown and Revoke.034
Triage Desk
Work through agent output one card at a time, riskiest first, with the shaky parts marked and explained and a single key to approve, edit, reject or skip.035
Rewind
Scrub back through everything an agent changed on one timeline: later changes ghost out and show what they'd go back to, the ones that can't be undone pin the playhead with a lock and say why, and Rewind to here comes with an Undo.036
Backseat
Nudge an agent while it works: type a note and it joins the plan as soon as the current step wraps up, or hit Interrupt to stop it right where it is.037
Plan Review
Look over an agent's plan before it starts, rename, reorder or drop steps, then follow each one on its own timer and pick up again from the step that broke.038
Recall
Everything the assistant remembers about you, sorted into groups you can filter, with each memory yours to edit, pause or forget, and an undo if you slip.Writing3
039
Redline
Suggested edits marked up right inside your sentence, so you can keep or drop each one with a click or a key, and undo any call you change your mind on.040
Draft Review
An email the assistant wrote for you to check before it goes: change who it's to or how it sounds, tweak the words, and send with a few seconds to take it back.041
Nudge
One clear suggestion with an honest read on how sure it is, a couple of alternatives a tap away, and a short window to undo once you accept.Forms16
042
People Picker
Find people and teams in one grouped list, see what you typed highlighted in each match, add as many as you like as springy avatar chips, or create someone new right there.043
Range Calendar
Pick a range from two months side by side or a one-click preset, watch it preview as you hover, and line it up against the period before with a single tap.044
Upload Tray
Drop files in and each one fans out into its own card with a coloured type badge, live progress and time left, while a failed upload waits patiently for a retry.045
Code Entry
A six-digit code field with a ring that glides from slot to slot, room to paste the whole code, a small shake when it's wrong and slots that flow together into a “Verified” pill when it's right.046
Facets
Filters tucked into collapsible checkbox groups and echoed above as chips you can pop off one by one, with search, Clear all and full arrow-key control.047
Step Flow
A three-step sign-up card where the progress bar pours into each step as you reach it, the card grows or shrinks to fit what's next and each field tells you what's missing as you go.048
Phase Builder
Lay out one stretch of a contract with its products, cadence, discount and minimum, and watch each month's invoice settle into place as you go.049
Invite Teammates
Paste a whole list of emails and they sort themselves into chips, each with its own role, with typos caught before anyone gets a broken invite.050
Colour Field
An OKLCH colour picker that shows you the real shape of sRGB for each hue, tells you how the colour reads on white and black, and copies it as OKLCH or hex.051
Money Input
An amount field that groups digits as you type without ever losing your caret, follows each currency's own rules (yes, lakh grouping and zero-decimal yen), and keeps the limits in view.052
Password Strength
A password field that explains itself: it spots common words, years and keyboard runs, says how long a crack would take, and ticks off what's left in plain words.053
Phone Field
A phone number field with a searchable country picker: it formats the number the local way as you type, drops the habitual leading zero, and spots the country when you paste a +44.054
Signature Pad
A place to sign with a finger, mouse or pen: strokes come out smooth and swell with pressure or slow down, with undo, a typed fallback and a stamped, timestamped signed state.055
Star & Emoji Rating
Two ways to ask how it went: stars with half steps that pop when you pick, and a little face that morphs from grumpy to delighted as you slide across the scale.056
Tag Input
Type to add tags with grouped suggestions, paste a comma list to add a bunch at once, and backspace to pull the last one back for editing. Each group keeps its own colour.057
Time Wheel
A drum-style time picker: flick the hours and minutes and they spin with momentum, curl away on a 3D wheel and snap onto the row, by touch, trackpad, mouse or keys.Filters9
q
Built on Qnot — a fast, typed query builder for any framework. Rules stay one shape from the UI to SQL, flags and search.
on Qnot
058
Alert Rules
An alert you write as a sentence: when error rate is above 2% for at least 5 minutes, only for checkout in production, page the on-call. A 30-day timeline shows which past incidents it would have caught, and warns you before it gets noisy.on Qnot
059
Filter Bar
Linear-style filter chips you build from one menu: Status is not Done, Labels include Bug, Assignee is me. Click any part of a chip to change it, press F to add one, Backspace to drop it, and the issue list re-sorts itself as you go.on Qnot
060
Flag Playground
Paste a user as JSON and watch every flag decide, rule by rule: each condition ticks or crosses, the winning rule lights up, later ones grey out, and the served variant swaps in. Broken JSON and wrong types get called out instead of quietly failing.on Qnot
061
Flag Targeting
Targeting rules for a feature flag, per environment: if beta and in Europe serve the new checkout, roll out to 10% of everyone else, fall back when it's off, and see who gets what across 2,000 simulated users while you edit.on Qnot
062
Routing Rules
Routing for a booking form: if company size is over 50 and the region is Europe, send it to Sales EU. Drag routes into order, see what share of last month each one caught, test a response to watch it land, and export the lot as one CASE WHEN.on Qnot
063
Rule Builder
A nested query builder that reads like a sentence: Where, and, or, groups inside groups, drag or arrow-key rules into place, undo anything, and watch the parameterised SQL, JSON and plain English rewrite themselves as you type.on Qnot
064
Saved Views
Filters you keep as named views on a crisp tab bar: tweak one and a dot says it's unsaved, then save, discard or fork it. Every view travels as a share link with the filter in the URL hash, and links that no longer fit the schema are cleaned up instead of breaking.on Qnot
065
Segment Builder
Describe an audience in a few rules and watch it form: the head count rolls, the size bar slides, and real people from your sample glide in and out of the list as each rule tightens or loosens.on Qnot
066
Smart Search
One search box that speaks filter: type status:open owner:me priority>2 webhook and it becomes chips and a filtered table, with Tab to complete fields and values, minus to negate, ranges like priority:2..3, and typos flagged right on the chip.Status6
067
Toast Deck
Notifications that settle into a tidy deck, fan open when you hover, swipe away to the side and turn from a spinner into a check when the work behind them finishes.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.069
Credit Gauge
See where this month's credits went: a split bar by category with a warning line and a hard limit, daily spend against budget, and a plan button that gets more insistent as you close in on the cap.070
Incident Banner
A dismissible status banner that moves through investigating, identified, monitoring and resolved: its colour, icon and progress track change with each update, and the timeline unfolds underneath.071
Quota Ring
A small usage ring that turns amber, then red, as it crosses its thresholds, with a tooltip that breaks the number down and counts down to the reset.072
Uptime Bars
A status-page block with 90 days of daily bars per service: hover or arrow along a row to read that day's uptime and incidents, with a headline that names whatever is broken right now.Numbers13
073
Metric Card
One number with its own hand-drawn chart: switch the range and the lines reshape, scrub with a pointer or the arrow keys for exact figures, and the headline follows wherever you are.074
Split Card
A total and what it's made of, in one small card: switch the period and the figures roll, the bar re-proportions and the ranked rows quietly trade places.075
Stacked Explorer
Twelve months of stacked bars you can re-cut by measure and by slice: segments settle at their new heights, hovering a month breaks it down, and the table below lights up the series under your pointer.076
Since You Left
What moved while you were away, one metric per row: a tiny trend line, the number now, and a change chip that knows when down is the good news.077
Mini Sheet
A pocket spreadsheet on coss ui table styles: drag or shift-select a range, type to edit, copy and paste straight from your sheets app, sort with rows that slide into order, and undo any of it.078
Cohort Grid
A retention triangle by signup week: hover or arrow through any cell to light its row and column, read it against the average, and flip between percentages and head counts.079
Donut Legend
A donut and its legend wired both ways: point at a slice or a row and the slice swells, the rest step back and the centre figure rolls to it; click a row to take it out of the total.080
Funnel
A conversion funnel where each bar keeps a hatched ghost of what the step before had, so drop-off reads at a glance; flip between counts and percentages and hover a step for its channel split.081
Latency Histogram
Request latency as a histogram with p50, p95 and p99 marked on it; drag a brush across the bars (or Shift-arrow) to see how many requests fall in any window.082
Leaderboard
A ranked list that reshuffles itself when scores land: rows glide to their new places, gains flash beside the rolling totals, and your own row stays pinned below with the gap to the next person.083
Radial Gauge
A dial with threshold bands and a target notch: the needle springs to each new reading, the fill takes the colour of the band it lands in, and hovering a band names its range.084
Sparkline Table
A dense endpoint table where every row carries its own 24-hour sparkline, a delta that knows lower is better, and a status; sort any column and the rows glide into order.085
Streak Heatmap
A year of daily activity as a calendar heatmap: hover or arrow through any day, see which streak it belongs to, and point at a streak callout to light up its run.Charts17
bk
Every chart here is made by bklit — the open-source React chart library by uixmat, built on visx and motion. Install straight from them, and give them a star.
by bklit
086
Revenue Area
bklit's area chart in a revenue card: a soft gradient fill, a 7/30/90-day switch, and a headline that follows your cursor to read out any day.by bklit
087
Cloud Spend Bars
bklit's bar chart breaking monthly cloud spend into compute, storage and network against a budget line, with a switch that regroups the stack side by side and a tooltip that totals each month.bklit — open-source charts for React
Every chart on this page is bklit. Built on visx + motion, MIT.
by bklit
088
Ticker Candlesticks
bklit's candlestick chart as a stock card: green and red sessions, a crosshair that takes the colour of the candle under it, OHLC in the tooltip and a 1M/3M range switch.by bklit
089
Visitors Map
bklit's choropleth chart shading a world map by visitors per country, with a hover tooltip, a colour key, a top-countries list underneath, and proper loading and retry states while the map loads.by bklit
090
Orders Trend
bklit's composed chart pairing weekly order bars with a rolling-average line on one time axis, so the noise and the trend read together in a single tooltip.by bklit
091
Checkout Funnel
bklit's layered funnel chart walking visitors to paid: switch weeks to compare, hover a stage to see how many it kept and lost, and the biggest drop-off is called out underneath.by bklit
092
Error Budget Gauge
bklit's notched gauge reading out an SLO error budget per service: switch services and the number rolls while the notches refill, turning green, amber or red as the budget burns.by bklit
093
Deploy Heatmap
bklit's calendar heatmap counting production deploys per day: quiet weekends, a visible change freeze, the busiest weekday up top, and a Less-to-More legend that dims in step with the cell you hover.by bklit
094
Active Users Line
bklit's line chart comparing weekly active users with last year: a quiet grey line for 2025, a dashed tail for this week's projection, and a legend that toggles the comparison.by bklit
095
Live Traffic Line
bklit's live line chart streaming requests per second: the line glides in as each sample lands, a value badge rides the tip, you can scrub back to any second, and pause freezes the window to read it.by bklit
096
Storage Donut
bklit's pie chart as a storage donut: slices grow on hover, the centre rolls to the slice you're on, and the legend list and the chart highlight each other both ways.by bklit
097
Model Eval Radar
bklit's radar chart comparing two models across six evals: the big model's reach against the small one's speed and cost, with a legend that lifts one polygon and reads out its scores.by bklit
098
Target Rings
bklit's ring chart tracking quarterly revenue targets: one ring per goal, a centre that switches to the ring you hover, and a legend that lights up its ring in return.by bklit
099
Signup Flow Sankey
bklit's sankey chart following a month of sessions from each channel to paid, trial ended or bounced, with gradient links that light up every path through what you hover and a tooltip that gives each flow's share.by bklit
100
Build Times Scatter
bklit's scatter chart as a CI strip plot: every build a jittered dot, green under a dashed target line and red over it, with the commit and branch in the tooltip and p50/p95 up top.by bklit
101
KPI Sparklines
bklit's sparklines in a four-tile KPI overview: area, line and bar minis coloured by whether the trend is good, with each tile's number following your cursor to any day.by bklit
102
Cost Sunburst
bklit's sunburst chart breaking a month of cloud costs down by team and service: click a team or its chip to zoom in, read any slice in the header, and step back out with the path above or the centre.Together11
103
Ghostwriters
A shared draft with a few ghostwriters in it: each agent's cursor glides in with its name, picks a phrase and types its suggestion right there in the text, and you keep or toss each one, or let them settle on their own.104
Thread
A comment and its replies in one tidy card, where @mentions stand out and an assistant's reply opens up to show each step it took.105
Review Feed
Every comment on a page in one list: filter by open or resolved, tick one off and watch it slide away, or type / to summarise them all or turn them into tasks.106
Social Pill
A like, comment, repost and share pill where each icon pops and fills with a tiny burst and every count rolls over digit by digit.107
Project Pulse
A project in two lines that opens into its tasks: the ring gives every task its own arc in its owner's colour, tap a face to see just their work, and the status chip opens a picker.108
Handoff Card
Pass work to a teammate with the summary, open questions and links in one card; when they accept, it flips over to show who owns it now.109
Live Poll
Write a poll right in the thread, then watch it fill: bars spring to their share as votes land, your pick stays marked, and closing it locks in the winner.110
Presence Bar
A live facepile for shared docs: status rings, a rolling “viewing” count, faces that spring in and out, and a click to follow someone around the page.111
Quote Reply
Highlight any part of a message to get a small Quote action; the snippet rides along in the composer until you send or dismiss it, and tapping it later jumps back to the source.112
Reaction Picker
Tap or hold the smiley and a tray of emoji pours out of it like liquid; slide to one and let go, and it lands on the message as a counted chip with yours lit up.113
Read Receipts
Tiny faces that glide down a conversation as people catch up, stacking under the last message they saw and folding into +N when it gets crowded.Workspace14
114
Launcher
A search button that grows into a keyboard launcher, with grouped actions and their shortcuts, your recent picks, a highlight that glides as you arrow through and pages you can step into.115
File Tree
A project tree that feels like your editor: arrow keys to open folders, git changes marked in colour, F2 to rename and drag to tidy things up.116
Week Agenda
Your week on one strip and your day on a timeline, where you can drag a meeting to a new time and see straight away if it clashes with another.117
Task Card
A task card you can read at a glance: checklist progress, who's on it, and a due date that warms from grey to amber to red as it slips.118
Account Card
The card behind your avatar: who you're signed in as, how far your profile has come and the one step to do next, plus your menu and theme.119
Connector Search
Type to find a service, step through with the arrow keys, and open one to check how its sync is doing or connect it right there.120
Connection Card
Everything one connected service needs on a single card, its key, its site and its time zone, with a save bar that only turns up once you've changed something.121
Browser Tabs
A browser tab strip: drag tabs to reorder, close one and its neighbours slide in under your pointer, pin from the right-click menu, and scroll when the strip overflows.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.123
Notification Centre
A bell whose panel grows out of it: tabs for all, mentions and unread, grouped by day, approve requests inline, archive with undo and a badge that rolls as you read.124
Overflow Breadcrumb
Breadcrumbs that fold their middle crumbs into a menu as space runs out and unfold as it returns, with a last crumb you can rename in place.125
Shortcut Sheet
A keyboard cheat sheet that slides up when you press ? inside your app: searchable by action or key, grouped, with sequences and Mac or Windows keys.126
Split Button
A primary action with a menu of alternatives beside it: pick one and it runs, then takes the primary slot, its label springing to the new width.127
Theme Studio
A live theme customiser: pick an accent hue, drag the corner radius, set the density, watch a sample card restyle as you go, then copy the CSS variables.Dev Tools11
128
Branch Graph
A git log drawn as a graph: each branch gets its own coloured lane, merges sweep in on smooth curves, refs and tags sit on their commits, and hovering a row slides a detail card along with you.129
Code Block
A code viewer with file tabs, hand-rolled syntax colour, click-to-highlight lines, a diff view that works out the +/− itself, wrap and copy, and long files that fold behind a fade.130
Cron Builder
Edit a cron expression field by field or with friendly controls, read it back as a plain sentence, see the next five runs in your timezone update as you type, and get told exactly why a schedule is invalid or can never run.131
Deploy Pipeline
Install, build, test and deploy as stages that light up and connect as they pass, live timers, a log peek that follows the running stage, a failed stage you can retry in place, and the preview URL as a chip when it’s ready.132
Env Editor
Environment variables as a table with a column per environment: secrets masked until you reveal them, click-to-edit cells, paste a whole .env to bulk import, and every unsaved edit tinted until you save or discard.133
Flag Board
Feature flags per environment: flip a flag, drag its rollout and see how many people that is, target segments with chips, and a kill switch you have to press and hold, with undo, before it turns everything off.134
JSON Explorer
A JSON tree you can actually read: types in colour, key and item counts, inline previews of folded branches, copy-any-path, and a search that opens the tree down to every match and steps through them.135
Log Stream
Live logs that stay readable: level filters with counts, search that highlights as it filters, pause and follow with a “new lines” pill, and bursts of the same error folded into one “12 similar” row.136
Request Builder
A small API playground: pick a method, type a URL whose :path params and query light up and turn into fields, toggle headers, check the JSON body as you type, then send for a status pill, timing, size and a pretty response.137
Terminal
A terminal that replays a session: commands typed at the prompt, output streamed in real ANSI colour, braille spinners that resolve to a tick, and a status bar that keeps time, with skip and replay.138
Webhook Inspector
Incoming webhook deliveries with status and latency at a glance, a detail pane for payload, headers and your endpoint’s response, and Redeliver that slides a new attempt into the list and lets you watch it land.Commerce4
139
Cart Drawer
A slide-over bag with quantity steppers, line totals and subtotal that roll digit by digit, a free-shipping bar that fills as you add, and a friendly empty state.140
Coupon Field
A promo code field that checks your code, then either folds it into a tag while the savings line slides in and the total rolls down, or shakes once and says exactly why it failed.141
Order Tracker
A shipment card with a live ETA, a step rail whose current stop gently pulses, carrier scans that slide in as they arrive, and a small spray of confetti when it lands.142
Swatch Card
A product card whose drawn bottle recolours as you hover the swatches and grows with the size you pick, with a price that rolls and an add button that turns into a stepper.Empty & Error5
274
No Results
A search that comes up empty: it repeats the query, suggests the spelling fix, names the filter that is hiding matches and offers popular searches. Removing a filter springs the results back in.277
Connection Lost
An offline banner for apps: it counts the changes kept on the device, rolls a retry countdown with backoff, shows liquid dots while reconnecting, then turns into Back online with a drawn check and slides away.278
Upload Failed
A batch upload where each failed file says exactly why, too large, wrong type or a dropped connection, next to the fix for it, and a retry picks up where the upload stopped.279
Limit Reached
An in-app quota state for when a team runs out of AI runs: a full meter, a countdown to the reset with rolling digits, what still works and what's paused, and an upgrade that rescales the meter in place.280
Payment Failed
A billing state for a declined renewal that names the card and the reason, counts down the grace period, and puts the fixes right there: retry, switch to a saved card or add a new one.Getting Started2
143
Launch List
A getting-started list in tidy groups with a ring that fills as you go, where each task ticks and strikes through once it's done.144