Skip to content
Day 69: new resources are added every day. See what's new

Framework

mdxcn

Free callouts, steps, terminals, charts and timelines for MDX, installed with the shadcn CLI.

Visit mdxcn4.4
  • Rating

    4.4 / 5

  • Pricing

    Free

  • Difficulty

    Intermediate

  • Works on

    Web

Built with love by Shushant Lakhyani. Building bestproductivityresources.com

What is mdxcn?

mdxcn is a free, open-source set of components for MDX documentation and blogs, including callouts, steps, terminal blocks, charts and timelines. You copy any component into your project with the shadcn CLI, so you own and can customise the code. It is released under the MIT licence.

Third-party open-source projects. We are not affiliated with their authors; repositories are provided as-is by their maintainers. Review each project's license, code and security before installing. See our Disclaimer.

Pros: what mdxcn does well

  • Makes docs and blog posts richer
  • Copy-in components you own
  • Free and open source (MIT)

Cons: where it falls short

  • Only for MDX-based sites
  • Requires a React and shadcn setup

Who mdxcn is for

Developers writing docs or blogs in MDX who want better-looking content blocks.

Who can skip it

People using a hosted blogging platform.

mdxcn alternatives

Not sold on mdxcn? These do a similar job, and each card says what it has in common.

Arc UI

Focus: react, next.js and animation. Shares shadcn and ui components with mdxcn. Freemium (mdxcn: Free). Same 4.4 rating.

FrameworkFree planWeb

UIAble

Focus: react, tailwind and templates. Shares shadcn and ui components with mdxcn. Freemium (mdxcn: Free). Same 4.4 rating.

FrameworkFree planWeb

readme.so

Focus: readme and developer tools. Shares markdown and documentation with mdxcn. A web app, not a framework. Rated 4.6 (mdxcn: 4.4).

Web AppFreeWeb

ForgeUI

Focus: react, tailwind and templates. Shares ui components and shadcn with mdxcn. A website, not a framework. Freemium (mdxcn: Free). Same 4.4 rating.

WebsiteFree planWeb

Shoogle

Focus: search. Shares shadcn and ui components with mdxcn. A web app, not a framework. Same 4.4 rating.

Web AppFreeWeb

shadcn/ui

Focus: react, tailwind and open source. Shares ui components with mdxcn. Rated 4.9 (mdxcn: 4.4).

FrameworkFreeWeb

Free alternatives to mdxcn

Want to spend nothing? These free picks cover similar ground.

daisyUI

Focus: tailwind css, themes and web development. Shares ui components with mdxcn. Rated 4.7 (mdxcn: 4.4).

FrameworkFreeWeb

React Bits

Focus: react, animations and effects. Shares ui components with mdxcn. Rated 4.7 (mdxcn: 4.4).

FrameworkFreeWeb

Storybook

Focus: ui development, components and testing. Shares documentation with mdxcn. Rated 4.7 (mdxcn: 4.4).

FrameworkFreeWeb

Coded Visuals

Focus: animated visuals, react and landing pages. Shares shadcn with mdxcn. Rated 4.6 (mdxcn: 4.4).

FrameworkFreeWeb

Kokonut UI

Focus: react, tailwind and nextjs. Shares ui components with mdxcn. Rated 4.6 (mdxcn: 4.4).

FrameworkFreeWeb

Toggles.dev

Focus: theme toggle, dark mode and react. Shares shadcn with mdxcn. Rated 4.6 (mdxcn: 4.4).

FrameworkFreeWeb
Are you the maker of mdxcn?Get a free Featured badge for your site, a share image and ready-to-paste posts. No sign-up.

Free Notion database

1,100+ ways people are making money online

Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.

Get the free database

Free Notion database

399+ ways to make money online

Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.

Get the free list

For research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.

Weekly newsletter

Everything new, every Monday.

One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.

Join the newsletter

You sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.