DEDUPED Hot AI repos. Real use cases. What people build. Get the Monday 5

How to add tested UI recipes to a React project with Oa Design

Copy type-checked Open Analytics components like tab bars and toasts into your app with one command.

Short answer: Open a terminal in your project folder; then run npx getopen-design list to see the available recipes; run npx getopen-design add tab-bar toast to copy those recipes into ./oa-design. All steps.

Who it is forA front-end developer building a React dashboard who wants polished navigation, dialogs and toasts without designing the motion from scratch.

The problemBuilding tab bars, dialogs, toasts and skeleton loaders with matching spacing, springs and focus states takes days of tuning.

The outcomeSelected recipes land in ./oa-design as source you own, ready to import into your pages.

What you need first

  • npm, for the npx commands
  • git, for cloning the repository
  • A React and Tailwind v4 project, which the values were written against (the README says the values are plain CSS and can be ported)
  • A coding agent such as Claude Code, Cursor, or Codex, if you want the agent to apply the design

Steps

  1. Open a terminal in your project folder.
  2. Run npx getopen-design list to see the available recipes.
  3. Run npx getopen-design add tab-bar toast to copy those recipes into ./oa-design.
  4. Ask your agent to import the copied components into one page and check the result in your dev server.
  5. Replace any values that clash with your own design system, since the README says your system wins.

Prompt for your agent

In the repo <project-path>, use the oa-design recipes from the getopen-design CLI (repo OpenLabs-so/oa-design) to add a tab bar and a toast to the page <page-file>. Expected output: the components are imported and the page renders with no type errors. Verify by running the project's typecheck script.

Caveat. The README says the recipes were written against React, Tailwind v4 and motion, so other stacks need porting work.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for OpenLabs-so/oa-design and "Add tested UI recipes to a React project"

Add Deduped to Claude Code once

claude mcp add --transport http deduped https://dedupedai.com/mcp

Cursor, ChatGPT, others

Share: X LinkedIn Hacker News Email Copy link

Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer