Skip to content

A shorter path to shipping

Find a component you love. Bring it into your project. Make it your own.

Start with a good foundation.

The library is designed for React and TypeScript projects, including Next.js. Open any component to see it running, its style, what its prompt carries, and its full source before adding it to your app.

Your project

Use a working React or Next.js project with TypeScript. Configure Tailwind CSS when it is listed on the component.

Your dependencies

None to install. Every component is one file that imports only React; it needs React 18 or newer and Tailwind CSS v4.

Components are editable source files. They do not require a MadeByIliyan® API key or runtime subscription.

Your agent. Your workflow.

Use the same source with Claude Code, OpenAI Codex, or Cursor. The marketplace prepares instructions for you to copy; it does not connect to your agent or change your project automatically.

  1. 1

    Discover a component

    Search the library, filter by your stack, and use the live preview to try the interaction. Check the mobile and tablet preview sizes.

  2. 2

    Copy the installation prompt

    Open the Installation tab and select your agent. The Copy action includes the integration instructions and complete component source.

  3. 3

    Paste into your project’s agent

    Open your existing codebase in Claude Code, Codex, or Cursor and paste the copied prompt. Ask the agent to preserve your current design system.

  4. 4

    Review it in your app

    Check the changes, install only required dependencies, and run your app. Verify keyboard interaction, responsive behavior, and reduced motion.

Prefer to do it yourself?

Use Copy code in the Code tab or Download component to save the TypeScript source, and Copy styles in the Styles tab for its block of CSS. Add the file to your components directory, paste the block into your global stylesheet, and render the component.

Example · the styles go below the Tailwind import
/* app/globals.css */
@import "tailwindcss";

/* …the block from the Styles tab… */
Example · render your downloaded component
import { Pricing } from '@/components/neo-brutal/pricing';

export default function Page() {
  return <main><Pricing plans={plans} /></main>;
}

Replace the import path with your actual filename. Keep the 'use client' directive when the source uses state, event handlers, or other browser features in Next.js.

Keep the good finds close.

  • Use the heart button to save a favorite. Find it again under Workspace → Favorites.
  • Save a collection to keep a curated group together. Unsave it from your dashboard or the collection page.
  • Downloaded components appear in your download history with a link back to their code.
  • Edit your profile, see your plan or change your theme in Settings.
Your library is kept with your account: sign in on any device and it is there. A free account takes three new components a day; a component you already took never counts again.

A few quick fixes.

The copy button cannot access my clipboard.
Browser permissions may block clipboard access. Select the source in the Code tab and copy it manually, or download the component file.
The styles look different in my app.
Confirm that Tailwind is configured and scans your component directory. Then check your app’s font, theme tokens, and global CSS. Component source is intended to be adapted to your design system.
My favorites disappeared.
Favorites, downloads and collections belong to your account. Check that you are signed in with the email address you saved them with.
I have used up today’s free downloads.
They come back at midnight UTC, and everything you already took stays open in your downloads. Pro and Team have no limit: pay on the site by card or with PayPal, and cancel from Settings whenever you like.
Find your first componentYour downloads