Brainless ships a set of Shadcn components that replicate the visual style of Claude Code, Codex, and Grok chat interfaces. The project surfaced on Hacker News where it earned 77 points and 15 comments.
What It Is
Brainless extends the existing Shadcn component library with three themed variants. Each variant matches the typography, spacing, and accent colors of one target AI coding tool. Components include chat bubbles, code blocks, file trees, and prompt inputs.
The library stays fully compatible with Tailwind and React. No new dependencies are required beyond standard Shadcn setup.
How It Works
Developers import the themed components the same way they import any Shadcn piece. A single prop switches between Claude, Codex, or Grok styling. The underlying markup and accessibility attributes remain identical across themes.
Color tokens and font stacks are defined in a small CSS file that overrides Tailwind variables. This keeps bundle size under 8 KB gzipped for all three themes combined.
How to Try It
Visit the live demo at brainless.swerdlow.dev to preview each theme.
Clone the repo and run the standard Shadcn init command, then copy the desired component files into your project.
Swap the theme by passing the variant prop: variant="claude", variant="codex", or variant="grok".
Pros and Cons
- Matches popular AI interfaces without custom CSS work
- Zero additional runtime dependencies
- Maintains Shadcn accessibility baseline
- Limited to three fixed themes
- Requires manual updates when upstream Shadcn changes
- No built-in dark-mode variants beyond the source tools
Alternatives and Comparisons
Standard Shadcn offers neutral styling. Other options include Vercel’s Geist and custom Tailwind kits from LangChain templates.
| Feature | Brainless | Standard Shadcn | Geist + Tailwind |
|---|---|---|---|
| AI-themed styles | 3 presets | None | None |
| Bundle size | +8 KB | Baseline | +12 KB |
| React + Tailwind | Yes | Yes | Yes |
| Accessibility | Shadcn baseline | Shadcn baseline | Manual |
Who Should Use This
Teams building internal AI coding tools or demo interfaces gain immediate visual consistency with Claude, Codex, or Grok. Solo developers prototyping prompt UIs save hours on styling. Skip it if your product already uses a distinct design system or targets non-technical users who expect conventional UI patterns.
Bottom line: Brainless removes the visual gap between production AI coding tools and custom interfaces built on Shadcn.
The library fills a narrow but recurring need for developers who want their tools to feel native inside existing AI workflows.
Top comments (0)