Graytell Labs · AI safety research platform
Introducing Gray UI
Built like a frontier model — the design layer for everything you code. 168 composable, accessible React components with sensible defaults — 55 shadcn/ui primitives, all 48 AI elements, 12 agent blocks and animated loaders in a strict monochrome registry. Every piece arrives as source code you can bend, extend and rebuild.
Buttons
6 variants · group · icons
- copy-paste components
- 168
- shadcn/ui primitives
- 55
- AI elements
- 48
- agent blocks
- 12
Gray UI registry stats: 168 copy-paste components, 55 shadcn/ui primitives, 48 AI elements and 12 agent blocks.
Registry
Copy, paste,
and it is yours
Gray UI is a shadcn-style registry, not a dependency. Add it with the standard shadcn CLI and the component lands in your repo as readable source code — no custom tooling, no package lock-in, no version drift, no waiting on upstream.
- One command away
- npx shadcn@latest add @gray/button — the same CLI you already run. The component and its dependencies arrive as files you own.
- Zero lock-in
- Fork it, restyle it, delete half of it. Because the code lives in your repo, your design system answers to you.
- TypeScript-first
- Strict types, typed variants and sensible props defaults on every component — autocomplete is part of the API.
$ npx shadcn@latest add @gray/button
→ Resolving @gray → gray-ui.vercel.app/r/button.json
✓ button.tsx — copied into your repo
One-time setup, in components.json
{ "registries": { "@gray": "https://gray-ui.vercel.app/r/{name}.json" } }
Now yours, in components/
components/ui/button.tsx — edit freely
components/ui/dialog.tsx — restyle freely
Design system
Strict monochrome,
on purpose
A design system that removed hue so contrast could speak. Gray UI clamps every token to a grayscale scale, then engineers accessible pairs on top — the same system running on this very page.
- Grayscale tokens
- Background, foreground, muted, accent — one disciplined ramp instead of forty ad-hoc grays.
- Accessible by default
- Composable, accessible React components with sensible defaults — focus rings, labels and contrast ship in the box.
- Dark-mode native
- Dark-first tokens with a light map included. The docs site and this landing page share one theme layer.
One hue: none.
Contrast-first
Every pair ships WCAG-checked. Accessible by default, not by audit.
Dark-mode native
Tokens are defined dark-first — this site runs on the same system.
AI Elements
AI-native, out
of the box
The full chat UI stack is included: conversation, message, prompt-input, reasoning, sources, tool calls — 60 components in the AI category. Ship AI interfaces without reinventing the primitives — streaming-ready and composable by default.
- 48 streaming-ready elements
- Reasoning steps, inline citations, tool invocation cards and loaders — the parts AI UIs are actually made of.
- Composable by default
- Every element is a plain React component. Compose them into chat panes, research timelines or copilots.
- Battle-tested
- They render the Graytell research agent — the same stack we ship in production at Graytell Labs.
Which registry should we ship next?
Assistant
The forms registry is trending. Want me to scaffold the docs page?1
- Reasoning steps
- Inline citations
- Tool invocations
- Streaming loaders
Inside the registry
One registry, every layer
A component is a role, not a snippet. Browse by layer, add only what you need, and keep the rest out of your bundle.
Primitives
Buttons, badges, avatars, tooltips — the atoms, each with typed variants and sensible defaults.
Forms & inputs
Inputs, selects, checkboxes, sliders and validation states that stay accessible without extra work.
Data display
Charts, progress, stats and tables for dashboards that need to be readable at a glance.
Overlays & navigation
Dialogs, sheets, dropdowns, command menus and nav patterns — keyboard-aware and focus-safe.
AI Elements
All 48 Vercel AI Elements: conversation, reasoning, sources, tool calls and streaming states.
Blocks & loaders
12 agent blocks — plan cards, file diffs, message scrollers — plus a full library of animated loaders. Copy them whole and make them yours.
Engineering
Built like infrastructure
Gray UI is the design system Graytell Labs ships its own products on — every decision here is one we live with in production.
TypeScript-first
Every component ships strict types and typed variants. Your editor becomes part of the design review.
Rides the shadcn CLI
npx shadcn@latest add @gray/button — the same CLI you already use. No custom tooling to install; readable source lands straight in your repo.
Token theming
CSS variables for every role — background, foreground, muted, accent. Restyle the system by editing one file.
Dark-mode native
Tokens defined dark-first with a complete light map. The same layer that renders this page.
MIT licensed
Use Gray UI in commercial products, client work and forks. Attribution appreciated, never required.
No runtime lock-in
No package to pin, no peer-dependency maze. The code is in your repo — upgrades are pull requests you approve.
Questions
Asked, then answered
Ship your next interface in gray
The registry is MIT-licensed and the source is open, so you can read exactly how every component works before you ship it. Start with one primitive — or adopt the whole monochrome system.