cd /news/developer-tools/brainless-shadcn-components-that-loo… · home topics developer-tools article
[ARTICLE · art-61063] src=brainless.swerdlow.dev ↗ pub= topic=developer-tools verified=true sentiment=· neutral

Brainless: Shadcn components that look like Claude Code, Codex and Grok

A developer used Shadcn's 'brainless' component library to add a pricing block to a landing page, integrating with tools like Claude Code, Codex, and Grok. The update involved modifying a page.tsx file and adding a pricing component, demonstrating rapid UI development with AI-assisted coding tools.

read1 min views1 publishedJul 15, 2026
Brainless: Shadcn components that look like Claude Code, Codex and Grok
Image: source

❯add the brainless pricing block to our landing page

⏺Bash(bunx shadcn add brainless/pricing)⏺⎿Added 1 block · 2 files #

⏺Update(app/page.tsx)

⏺⎿Updated app/page.tsx with 3 additions

41   <Features />42+added:   <Pricing tiers={TIERS} />43   <Footer />

·Thinking…(0s · ↑ 0 tokens · esc to interrupt)

◉ xhigh · /effort

⏵⏵ auto mode on (shift+tab to cycle) · ← for agents

_OpenAI Codex(v0.132.0)

model:gpt-6.9 low/modelto changedirectory:~/acme-site

›add the brainless pricing section to the docs site

•Read app/(marketing)/page.tsx #

•Edited components/pricing.tsx(+22 −0) #

•Running pnpm build(0s • esc to interrupt)

gpt-6.9 low · ~/acme-site

main ~/acme-site

16K / 500K│2/3 ✓ steps complete

Grok Build Beta 0.2.93

Grok 4.21 is here!

Grok 4.21 is now available. Try it out in the /model picker.

Tip: Use Shift+Tab to cycle between modes, like Plan mode.

❯put the brainless pricing block on the marketing page4:38 PM

◆user_prompt_submit[hooks: 3/1]

◆Thought for 0.4s

I'll open the marketing page, drop in the pricing block, then verify the build.4:38 PM

readapp/(marketing)/page.tsx

◆Run Write components/pricing.tsx[hooks: 3]

41before: <Features />

41after: <Pricing tiers={TIERS} />

◆stop[hooks: 3/1]

Turn completed in 9.2s.

── more in #developer-tools 4 stories · sorted by recency
── more on @shadcn 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/brainless-shadcn-com…] indexed:0 read:1min 2026-07-15 ·