Proposal for React-Component-Marketplace (addons)

[rajatsandeepsen]

trafficstars

React-Component-Marketplace (addons)

When @shadcn/ui becomes popular, users like the idea of distributing components straight to the code base.

So my proposal is to expand and allow other creators to publish their ui components (addons which uses shadcn, tailwind & radix as primitives). I modified the CLI, so users can add these "addons" straight to their codebase.

It's like NPM, but for react components. Creator will login and publish their creativity as addons. These addons stays in @/components/addons/example-component-name/index.tsx.

And shadcn-ui@latest CLI can identify shadcn and non-shadcn components. No need to specify addons path in component.config.json

Overall folder structure.

root
 ├─┬ app
 │ ├── layout.tsx
 │ └── page.tsx
 ├─┬ components
 │ ├─┬ ui
 │ │ ├── alert-dialog.tsx
 │ │ ├── button.tsx
 │ │ ├── dropdown-menu.tsx
 │ │ └── ...
 │ └─┬ addons
 │   └─┬ example-component-name
 │     ├── index.tsx
 │     └── README.md
 ├─┬ lib
 │ └── utils.ts
 ├─┬ styles
 │ └── globals.css
 ├── component.config.json
 ├── package.json
 ├── postcss.config.js
 ├── tailwind.config.js
 └── tsconfig.json

Purpose

Purpose was to enable distribution of customizable react components straight to your codebase instead of npm install.

Perspective of Creators

Creators build bigger components with shadcn and publish straight to shadcn-marketplace. Creator requires to have gtihub account and unique name for addons.

1. Goto /marketplace
2. Login with Github
3. Goto /marketplace/create
4. Name the addon, Drop the parent folder of addon (📁 example-component-name).
5. Add required NPM dependencies and Registry dependencies (shadcn ui components).
6. Publish

  └─┬ addons
    └─┬ example-component-name 📁 
      ├── other-important-folders
      ├── index.tsx
      └── README.md

NB: one of the README.md file is used for the documentation of addon. Therefor README.md is required as root folder file.

Perspective of Users

User doesn't need to login, all addons are free and open. Any additional shadcn register dependencies will be installed on single run.

1. Goto web side /marketplace
2. find addon name.
3. Run npx shadcn-ui@latest add [addons]

eg: pnpm dlx shadcn-ui@latest add skeleton example

Technical perspective

Component registry work as normal. But marketplace required to have Database, next-auth configs. README.md file is rendered on server side with next-mdx-remote). So it has some technical issues like

• code block doesn't have syntax highlighting
• creators can't show the true working of component in docs. (instead basic visualization is possible)
• requires more time to fetch the page.
• CLI need little more time to identify shadcn and non-shadcn components.

Demo

CLI

1. npx shadcn-marketplace@beta
2. npx shadcn-marketplace@beta add example skeleton

Web

/marketplace

[vercel[bot]]

@rajatsandeepsen is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[rajatsandeepsen]

I know its a big PR. But idea is still in construction. Requires more feedback and iteration before merge. @shadcn If idea is approved, I'll continue working in this.

TODO

• [ ] Syntax highlighting in codeblocks
• [ ] feature to upload image as preview of addons
• [ ] feature to publish addons straight from CLI
• [ ] UX in /create page
• [ ] features to share, star and search addons on web

[karam-khanna]

Love this idea

[AhmedBaset]

so interesting

[aryanprince]

Love the idea, I know of two people who might be interested to bring their components over to this proposed marketplace:

@JaleelB's https://github.com/JaleelB/shadcn-tag-input

@uncvrd's https://github.com/uncvrd/shadcn-ui-date-time-picker

[shadcn]

@rajatsandeepsen Thanks for the PR. I know this is a popular ask. Looking into it.

[tika]

I love this idea. I was just about to start my own website for this @rajatsandeepsen. It would also be nice to include some way to add themes (like how you can 'customise' this). Not sure if this is possible.

[crawlchange]

This is a much welcome feature. Be aware: developers in the Next.js community might get extremely violent when they are asked about such a marketplace. But I'm sure actual product builders will enjoy this a lot.

https://www.reddit.com/r/nextjs/comments/1cz1e2a/there_is_no_marketplace_for_react_components/

[ezraanglo]

Any update on this? I'm waiting coz I have a customized a bunch of shadcn components for my own "theme". I want to be able to do the same cli command across my projects instead of copy pasting, will be also good to keep them all updated at once. I have also made other components in shadcn format like drag and drop so it would be nice to be able to share these!