Today we're publishing dock-ui on GitHub. About 55 React components, MIT-licensed, free for anyone to copy into their own app. No npm install. No signup. No telemetry. Take what you need, leave the rest.
Free, MIT-licensed copy-paste UI primitives for agent-native applications. Made by Dock.
This post covers what's in it, how it's different from the kits you already know, and why we decided to give it away.
Why we built these in the first place
When you build a product where humans and AI tools both write to the same data, you keep running into the same UI problems. How do you draw an AI tool? It's not a person, but it's also not just a "system" message. How do you show someone that an AI just edited the row they were looking at? How do you let teammates comment on a paragraph that the AI is actively rewriting? How do you tell a user that one of the AI tools running in their account is at 80 percent of its monthly usage?
When we started building Dock about a year ago, none of these had a settled answer. We checked existing component libraries. shadcn had Button and Dialog, and they were excellent, but they didn't have a way to render an AI tool's identity. Radix had primitives, but they assumed every actor in the UI was a single human. Headless UI was the same. So we built the missing pieces ourselves.
This is what we mean by "drawing an AI tool":
A glassy iridescent orb. Pass any color and it adopts it. The same recipe across every screen, so the same AI tool always reads as the same identity. We then needed a comment system that survived AI rewriting the surrounding text. An inbox card that picks up severity color when usage gets close to a limit. Six months in, we'd written about 55 components. They were solid, polished, and not in any open kit we knew of. So we figured: open-source them. If you're building any app where AI does real work for users, the chrome you need is mostly the chrome we already wrote.
What's in the kit
Six categories, around 55 components total.
Foundations. Seventeen components. The things every app needs: button, input, select, combobox, checkbox, radio, switch, slider, label, form, card, separator, badge, avatar, tooltip, popover, toast. Our take, not a fork of someone else's. Same visual quality you'd expect from shadcn or Radix.
Layout and overlays. Twelve components. Modal, dialog, side panel, command palette (the ⌘K search), sidebar, surface tab bar, tabs, accordion, breadcrumb, top bar, page shell, settings panel. The shell every app reaches for.
Data. Six components. The big one is DataTable, a virtualized typed-row table that stays at 60 fps past 100,000 rows. It supports drag-fill, range select, paste TSV from a spreadsheet, find-and-replace, CSV export. The same table that powers Dock's table mode. Plus TypedColumn (renderers for status, person, date, URL, longtext, number, checkbox), StatusChip, Pagination, Skeleton, EmptyState.
Doc. Seven components. DocEditor is a TipTap editor with everything we ship in Dock: Mermaid diagrams, KaTeX math, callout blocks, GitHub-style toggle blocks, embeds, cross-references. Plus DocToolbar, MentionPicker, Callout, Mermaid, KaTeX, and the toggle block on its own.
Brand. Four components. TierPalette (Scale gold, Pro color, Free greyscale tokens you can use for any tiered pricing UI), ThemeSwitcher (light/breeze/dark pill toggle), ThemeProvider, and the iridescent Logo recipe.
Agent. Twelve components. This is the section nobody else has. AgentOrb, principalColor, AgentTag, PresenceStack, RemoteWriterPill, ActivityFeed, CommentThread, InboxCard, CommentsRail, InboxClient, AgentBootstrap, and AgentInviteCard. We'll cover the interesting ones below.
That last category is the reason to use this kit instead of one you already trust.
A few of the novel ones, plain English
AgentOrb. The little glassy circle Dock uses to represent an AI tool. It's a real CSS recipe with four layers: a base radial gradient, a halo that pulses, an iridescent core with a conic gradient, and a tiny specular gloss in the top-left. Pass any color and the orb adopts it. The system reads prefers-reduced-motion and stops breathing if the user asked for less motion. Sized 12 to 72 pixels, drops anywhere.
principalColor. A small utility that hashes an AI tool's id into a stable color from a 12-hue palette. Why it matters: if you don't have something like this, every screen in your app picks colors arbitrarily, and the same AI tool ends up blue in the sidebar and purple in the activity feed. Your users notice. We know because we shipped that bug, fixed it, and built the helper to keep it fixed.
PresenceStack. Overlapping orbs of everyone currently editing a document, in one row, with a soft pulse on whoever's actively typing. Drop into any multiplayer surface, pair it with whatever realtime backend you use.
Comments that survive AI rewrites. When an AI tool rewrites a paragraph that a teammate has commented on, two things can happen. Either we re-anchor the comment to a stable text fragment that's still around, or, if the original phrase is gone, we show an "anchor changed" badge so the user knows the surrounding text moved. Comments are never silently orphaned. This is the kind of bug that's invisible until your users hit it, and then it's a deal-breaker.
InboxCard. A notification card that picks up severity color from the payload. Informational alerts get a blue dot, attention alerts (you're at 80 percent of your monthly usage) go pink, service-affecting alerts (sends paused, hard limit hit) go purple and pulse. Readers don't need to read the text to see what needs action. The sidebar inbox icon picks up the same color, so the cue is propagated across the whole app.
How you use it
dock-ui follows the same model shadcn made popular. There's no npm package. The components live in a public registry as plain .tsx files, and you copy them into your own repo.
npx dock-ui add agent-orb
That writes components/ui/agent-orb.tsx (and its CSS) directly into your project. From there you own the file. Edit it, fork it, ship it in a paid product, charge whatever you want. We don't ship breaking changes through your package.json. You decide when to update, if ever.
For people who don't want to install a CLI, every component is also a JSON manifest at https://ui.trydock.ai/r/<slug>.json. If you're driving an AI tool through MCP or building scripts, you can curl the manifest and write the file yourself. No CLI required.
What we believe about UI
The kit reflects six rules we follow inside Dock.
- Agents are first-class. Not bots, not chat windows, not commands. Every AI tool gets its own identity, its own color, its own audit trail. Your users should never wonder "did the AI do this, or did I?"
- Color is identity. Same agent, same color, every screen. Use
principalColor, never hand-pick. - Animation is felt, not flashed. 200 ms snaps read robotic. 400 to 1500 ms eases read alive. We breathe orbs and respect prefers-reduced-motion.
- Skeletons, never blanks. A loading state with no content is a broken state. Every async surface ships with a skeleton that mirrors the live shape, so the swap to real content is jump-free.
- Comments survive rewrites. When AI rewrites a paragraph, comments anchored inside re-attach to stable fragments or fire an "anchor changed" badge.
- Multiplayer by default. Every surface assumes multiple writers, humans and AI tools, working at the same time.
If a component disagrees with one of these, it doesn't ship.
What's next
Today's release is v0.1. The repo, the README, the registry index, and one fully-extracted component (AgentOrb) are live. Over the next few weeks we'll lift the rest in waves. Foundations first (Button, Input, Select, the primitives every app needs), then the agent group (presence and comment thread are next), then the data table and doc editor. The docs site at ui.trydock.ai follows.
If you want a specific component lifted faster, open a GitHub issue. If you find a bug, open a pull request. If you want to redesign one to fit your own brand, fork it; you own the code the moment you copy it.
Why we're giving it away
The honest answer: this is the chrome, not the moat. Dock's moat is the data model. A workspace where typed rows and rich-text docs sit on the same record, where every AI tool has a real identity and a permanent audit trail, where presence and attribution are baked in at the API layer. None of that is in this UI kit. What's in the kit is the visual grammar we use to render those ideas.
We'd rather every AI app in the world adopt that grammar than keep it for ourselves. The orb, the presence stack, the comment thread that survives rewrites, the severity-tinted inbox card. Pick them up, build something good with them, and tell us what we got wrong.