readymadeui logo
NewAI Editor, 22 themes and React export

NewAI Editor, 22 themes and React export

Pick a component. Make it yours. Ship the code.

500+ Tailwind components, blocks and e-commerce sections. Give the whole library your look with one of 22 themes, change anything by hand or by asking AI, then copy HTML or React that matches what you see.

Free to start · No installation · HTML & React · MIT licensed

The ReadymadeUI editor: a hero block in the Terminal theme with its heading selected, the element toolbar above it, and beside it the panel with Edit with AI, the theme, and the heading’s text.

One click restyles the whole library.

A theme sets color, type, corners and depth on every component at once, so your navbar, pricing table and checkout look like one product.

Two-column checkout · E-commerce · Prism
Loading...

Theme

Prism

Fintech indigo, floating cards

Set in Manrope

Light

Dark

Buttons

Depth

Click anything. Change it by hand, or just ask.

Every component opens in the editor. Change it in the panel or ask the AI, then copy HTML or React with every change already written in.

Ask AI to change anything

Select an element and say what you want: “make it shorter and bolder”, “add two more plans”. The AI makes a few exact edits to what you selected and leaves the rest of your code alone.

Edit in the panel

Colors, spacing, size, type and text for whatever you click. Free, with no prompts.

Every screen stays intact

Edits land on the screen you’re viewing. The others keep theirs, or take the edit in one click.

Prism theme
const plans = [
  { name: 'Pro', price: '$19' },
  { name: 'Teams', price: '$49' },
];

export default function Pricing() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      {plans.map((plan) => (
        <div key={plan.name} className="rounded-2xl border p-6 shadow-lg">
          <h3 className="text-lg font-semibold">{plan.name}</h3>
          <p className="mt-2 text-4xl font-semibold">{plan.price}</p>
        </div>
      ))}
    </div>
  );
}

Copy HTML or React

What you copy is what you see: your theme and every edit are written into the code. React keeps lists as .map() over data, and Light only drops every dark: class.

Swap any icon

Find Lucide’s icons and brand logos by name, or paste your own SVG. Size and color stay.

Edit the HTML yourself

Open a block’s markup, change it by hand and see it on the canvas. It all goes into the code you copy.

The parts of a real product, already built.

Components for the details, blocks for whole sections, and complete pages for when you need to launch this week.

Need the whole page?

Start from a finished landing page or a complete Next.js site.

Landing pages

Pages for a product, an app or a service, with every section already in place.

See landing pages

Next.js sites

Whole sites, from stores to blogs and docs, responsive from desktop to phone.

See Next.js sites

Don’t take our word for it.

I was able to build a full dashboard UI in a few hours. The consistency across components really makes a difference compared to AI-generated code.
Gabriel Netto
“What I like most is that these components actually feel production-ready. No need to fix spacing or accessibility issues.”
Hector Nava
“The ability to copy components with or without dark mode is super helpful. It keeps my code clean and saves extra effort.”
Mesut Aksak
“The UI designs are top-notch and very well thought out. They saved me a lot of time in my development process. Excellent resource!”
Ben Briggs
“The components are beautifully crafted and highly customizable. They perfectly matched my project’s branding needs. Great job!”
Samantha Lee
“Thank you for providing practical and working examples. The designs are not only functional but also beautifully elegant, enhancing the overall user experience.”
Marco Concas
“It is an excellent source of modern components ready for immediate use. It significantly reduced my design workload. Thank you!”
Robert
“Amazing work. The MIT license makes it even better. I really appreciate the flexibility and quality of the templates.”
Maguire
“These templates are exactly what I needed for my rapid application development projects. Thank you for the great work and dedication!”
Alisher

Start free. Subscribe when you want everything.

Both plans include the whole library and every theme.

Free

$0

Free for as long as you like

Browse free components

No AI credits

  • Free components and blocks
  • 12 themes
  • Edit free components in the panel
  • Copy HTML and React
  • MIT license

Starter

$12per month

Billed monthly, excluding tax

200 AI creditsevery month

  • The full library: 500+ components, landing pages and Next.js sites
  • All 22 themes and premium style controls
  • React for edited components
  • Save to My Library
  • Commercial license

14-day refund guarantee

Pro

Most AI credits

$25per month

Billed monthly, excluding tax

500 AI creditsevery month

  • The full library: 500+ components, landing pages and Next.js sites
  • All 22 themes and premium style controls
  • React for edited components
  • Save to My Library
  • Commercial license

14-day refund guarantee

Running low on credits?

Subscribers can add a credit pack, up to 3 a month. Pack credits never expire.

  • 100 credits

    $8

  • 300 credits

    $20

Questions, answered.

What is ReadymadeUI?

ReadymadeUI is a library of 500+ Tailwind CSS components, blocks and e-commerce sections, with landing pages and Next.js sites, and an editor to go with it: give everything your look with a theme, change any component by hand or with AI, and copy it as HTML or React.

What’s free, and what needs a plan?

The free components and blocks, 12 themes and the editor’s panel are free, with no account needed. A plan adds the full library with landing pages and Next.js sites, all 22 themes, AI edits, React for edited components and saving to My Library.

How does billing work?

Choose Starter ($12 a month or $99 a year) or Pro ($25 a month or $199 a year). Both include the whole library and every theme; they differ only in how many AI credits you get each month. Your plan renews each billing period, and you can change it or cancel anytime. When you cancel, you keep access until the end of the period you paid for.

How do AI credits work?

Credits go by the size of the edit. The smallest edits, like new text or a color, use 1 credit; bigger ones, like a new layout or a large component, use more. If an edit fails on our side, the credits go back. Monthly credits reset each billing period. Running low? Subscribers can add 100 credits for $8 or 300 credits for $20, up to 3 packs a month, and pack credits never expire.

Can I use ReadymadeUI in client projects?

Yes, in personal, client and commercial projects, as many as you like.

Which version of Tailwind CSS is it built on?

Tailwind CSS v4. Use the CDN script or your own build. There’s nothing else to install.

Do I get future updates?

Yes. New components, blocks, e-commerce sections, landing pages, Next.js sites and themes are added regularly, and the editor and its AI keep getting new features. All of it is yours while you’re subscribed.

What’s your refund policy?

You can ask for a refund within 14 days of your first subscription payment. Email support@readymadeui.com with your purchase details.

Still have a question?

Email us and we’ll get back to you.

support@readymadeui.com

In every component, whichever you pick

  • Responsive

    Laid out for desktop, tablet and mobile.

  • Dark mode

    Built into every component. Copy it with or without.

  • Accessible

    WCAG-friendly by default.

  • Tailwind CSS v4

    Plain utility classes, from the CDN or your own build.

  • HTML & React

    The same design in both, ready to paste.

  • MIT licensed

    Use it in personal, client and commercial work.

Browse componentsSee pricing