{"slug": "brainless-shadcn-components-that-look-like-claude-code-codex-and-grok", "title": "Brainless: Shadcn components that look like Claude Code, Codex and Grok", "summary": "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.", "body_md": "❯add the brainless pricing block to our landing page\n\n## ⏺Bash(bunx shadcn add brainless/pricing)⏺⎿Added 1 block · 2 files\n\n⏺Update(app/page.tsx)\n\n⏺⎿Updated app/page.tsx with 3 additions\n\n```\n41   <Features />42+added:   <Pricing tiers={TIERS} />43   <Footer />\n```\n\n·Thinking…(0s · ↑ 0 tokens · esc to interrupt)\n\n◉ xhigh · /effort\n\n❯\n\n⏵⏵ auto mode on (shift+tab to cycle) · ← for agents\n\n>_OpenAI Codex(v0.132.0)\n\nmodel:gpt-6.9 low/modelto changedirectory:~/acme-site\n\n›add the brainless pricing section to the docs site\n\n## •Read app/(marketing)/page.tsx\n\n## •Edited components/pricing.tsx(+22 −0)\n\n•Running pnpm build(0s • esc to interrupt)\n\ngpt-6.9 low · ~/acme-site\n\nmain ~/acme-site\n\n16K / 500K│2/3 ✓ steps complete\n\nGrok Build Beta 0.2.93\n\nGrok 4.21 is here!\n\nGrok 4.21 is now available. Try it out in the /model picker.\n\nTip: Use Shift+Tab to cycle between modes, like Plan mode.\n\n❯put the brainless pricing block on the marketing page4:38 PM\n\n◆user_prompt_submit[hooks: 3/1]\n\n◆Thought for 0.4s\n\nI'll open the marketing page, drop in the pricing block, then verify the build.4:38 PM\n\nreadapp/(marketing)/page.tsx\n\n◆Run Write components/pricing.tsx[hooks: 3]\n\n41before: <Features />\n\n41after: <Pricing tiers={TIERS} />\n\n◆stop[hooks: 3/1]\n\nTurn completed in 9.2s.", "url": "https://wpnews.pro/news/brainless-shadcn-components-that-look-like-claude-code-codex-and-grok", "canonical_source": "https://brainless.swerdlow.dev", "published_at": "2026-07-15 19:42:53+00:00", "updated_at": "2026-07-15 19:58:09.208228+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools"], "entities": ["Shadcn", "Claude Code", "Codex", "Grok", "OpenAI"], "alternates": {"html": "https://wpnews.pro/news/brainless-shadcn-components-that-look-like-claude-code-codex-and-grok", "markdown": "https://wpnews.pro/news/brainless-shadcn-components-that-look-like-claude-code-codex-and-grok.md", "text": "https://wpnews.pro/news/brainless-shadcn-components-that-look-like-claude-code-codex-and-grok.txt", "jsonld": "https://wpnews.pro/news/brainless-shadcn-components-that-look-like-claude-code-codex-and-grok.jsonld"}}