Real component code for your coding agent.

Clay UI searches shadcn/ui, Radix, Base UI, Magic UI, Aceternity UI and more, downloads the source of the best match, and your agent rewrites it into your project.

npx clayui init
Docs on GitHub

What happens when you ask

  1. You tell your agent

    “Add a date range picker to the hotel booking page. Show the price on each night.”

  2. It reads your project, then searches
    $ clayui search "date range picker booking" --available-only

kokonut/stay-picker  [complete]
  Date range picker for booking stays. Every night shows
  its price, sold-out nights are hatched.
shadcn/calendar  [complete]
  Select a date or a range of dates.
kokonut/slot-picker  [complete]
  Book a meeting on a day rail.
  3. You pick Stay Picker. It downloads the source
    $ clayui get kokonut/stay-picker

.clayui-examples/kokonut/stay-picker/
├── clayui.json
└── components/kokonutui/stay-picker.tsx   676 lines

needs: lucide-react, motion
license: MIT
  4. It rewrites that file into your repo

    Your folder structure, tokens and copy, wired to your prices. Then it deletes .clayui-examples.

You end up with a date range picker in your own codebase, with priced nights and sold-out dates already working. Clay UI is not a dependency of your app.

What lands on your machine

Written

.agents/skills/clay-ui/SKILL.md
.claude/skills/clay-ui/SKILL.md
Tells your agent how to use Clay UI.
~/.cache/clayui
Local index of components.
.clayui-examples/
Downloaded source, until your agent is done.

Good to know

  • Never runs a library’s install or add command. Your agent adds only packages the final code imports.
  • React web only. No native iOS, Android or React Native.
  • Works without a key, using keyword search. Set GEMINI_API_KEY for better semantic search.
  • Paid items are skipped. 21st.dev code needs API_KEY_21ST.
  • Needs Node 18.20.8 or newer.

Searches shadcn/ui, Radix, Base UI, Magic UI, Aceternity UI, Kokonut UI, 21st.dev, RareUI, Beautiful UI, Sonner, Vaul, cmdk and NumberFlow.

Mobbin shows the screen. Clay UI gets you the code.

Mobbin

Screens and flows from real apps.

Then, with Clay UI

Saw a checkout you like? Clay UI finds the form, stepper and order summary to build yours.

Refero

Real product screens, flows and styles your agent can search.

Then, with Clay UI

Your agent takes the direction from Refero and the working components from Clay UI.

Page Flows

Recordings of real user journeys.

Then, with Clay UI

Once the journey is clear, Clay UI brings the dialogs, drawers and toasts along the way.

Godly

Hand-picked websites with inventive design and motion.

Then, with Clay UI

Spotted an effect? Clay UI looks for an animated component close to it, with source you can change.

One ask, several real variants

Demo with sample data. The variant names are real components.

Then your agent restyles it

As downloaded

In your project

Short examples

  • A data table due tonight
  • Friendlier toasts
  • A shop carousel
  • A pricing section
  • A mobile cart drawer
  • A command palette
  • A hero of your own
  • A signup form
  • Numbers that move
  • One mold, two results
  • From picture to product
  • The idea and the code
  • Every step of a journey

Good clay. Your shape.

npx clayui init
Docs on GitHub