Go headless and use shadcn for internal UI Components

ShadCN UI is a collection of pre-built, customizable UI components for React, built on Radix UI and styled with Tailwind CSS. Unlike traditional component libraries, ShadCN UI installs components directly into your project as local files, allowing full customization without external dependencies. To add a component, you just run (p)npx shadcn-ui@latest add component-name, which copies the component's code into your project, making it easy to modify and style as needed. This approach provides flexibility, maintainability, and seamless integration with whatever design system the user may want to use.

While the shadcn ui default components just import radix and use tailwind class names, the user is not limited to those, and can switch to whatever design system. One does not even need to add it as a dependency. It can just be invoked by npm cli. It just needs a components.json file in users project, and no additional dependencies.

I've been using it for a while, and I have to say that it is really pleasant to use in React projects.

Some other libraries providing shadcn components are:

• Plate.js
• React Flow
• https://v0.dev/

I've seen that in a bunch of other issues, it was mentioned that MDXEditor bundles some sort of micro UI framework. This makes it also a bit convoluted to use any "external" component, for dialogs, toolbar, etc.

What I'm proposing, is to have a MDX Editor registry of components that can be easily passed to the plugins, and they receive access to the gurx state or editor via props. e.g.

We have already

toolbarPlugin({ toolbarContents: () => <KitchenSinkToolbar /> })

We could move to something like

toolbarPlugin({ toolbarContents: (props) => <KitchenSinkToolbar {...props} /> })

Where props contain a reference to the editor, and the KitchenSinkToolbar is provided as a shadcn component

Start with toolbarPlugin and the existing KitchenSinkToolbar example described in the issue, then trace how plugins currently receive toolbar content and editor state. Define the scope of a component registry and its props before implementation; done should mean external or shadcn-style components can access the editor through plugin-provided props without relying on the internal UI framework.