Skip to content

Vite demo examples#213

Draft
aidenybai wants to merge 1 commit intomainfrom
cursor/vite-demo-examples-d722
Draft

Vite demo examples#213
aidenybai wants to merge 1 commit intomainfrom
cursor/vite-demo-examples-d722

Conversation

@aidenybai
Copy link
Owner

@aidenybai aidenybai commented Mar 5, 2026

Add 3 practical demo examples to the Vite playground with intentional, obvious UI bugs to showcase React Grab's workflow.

These examples (User Profile Card, Pricing Cards, Notification Feed) are styled with shadcn/ui CSS variables and each contains multiple glaring bugs (e.g., vanishing hover states, misaligned elements, inconsistent styling, invisible text) that are designed to be easily identifiable and fixable using a coding agent with React Grab.


Open in Web Open in Cursor 


Summary by cubic

Adds three interactive demo examples to the Vite playground to showcase React Grab. Each demo includes obvious UI bugs designed for quick fixing.

  • New Features

    • Replaced the TodoList with User Profile, Pricing, and Notifications demos in the Vite playground.
    • Updated index.css with shadcn/ui-style CSS variables and @theme inline tokens.
    • Intentional bugs:
      • User Profile: Follow button turns white-on-white on hover; Posts stat is smaller than others.
      • Pricing: Pro card has square corners; Pro checkmarks are blue instead of green.
      • Notifications: Success text is too light on white; no hover transitions; unread dot is clipped.
  • Dependencies

    • pnpm-workspace.yaml: added ignoredBuiltDependencies for @parcel/watcher, esbuild, sharp, spawn-sync, unrs-resolver.

Written for commit 552cd7c. Summary will update on new commits.

- User Profile Card: Follow button vanishes on hover (white-on-white), Posts stat misaligned (text-lg vs text-2xl)
- Pricing Cards: Pro card has square corners (rounded-none vs rounded-xl), Pro checkmarks are blue (should be green)
- Notification Feed: Success text invisible (text-green-200 on white), no hover transitions, unread dot clipped by overflow-hidden
- Updated index.css with shadcn CSS variables and @theme inline
- Replaced TodoList with all 3 examples in App.tsx

Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
@cursor
Copy link

cursor bot commented Mar 5, 2026

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
Learn more about Cursor Agents

@vercel
Copy link
Contributor

vercel bot commented Mar 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-grab-website Ready Ready Preview, Comment Mar 5, 2026 4:03am

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 5, 2026

Open in StackBlitz

@react-grab/cli

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/cli@213

grab

npm i https://pkg.pr.new/aidenybai/react-grab/grab@213

@react-grab/ami

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/ami@213

@react-grab/amp

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/amp@213

@react-grab/claude-code

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/claude-code@213

@react-grab/codex

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/codex@213

@react-grab/copilot

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/copilot@213

@react-grab/cursor

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/cursor@213

@react-grab/droid

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/droid@213

@react-grab/gemini

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/gemini@213

@react-grab/opencode

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/opencode@213

react-grab

npm i https://pkg.pr.new/aidenybai/react-grab@213

@react-grab/relay

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/relay@213

@react-grab/utils

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/utils@213

commit: 2cca633

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants