Runtime MDX renderer with shadcn/ui components for React applications
npm install @aumnidigital/bmsRuntime MDX renderer with built-in shadcn/ui components for React applications. Perfect for blogs, CMS, and content-heavy applications.
- 🎨 50+ shadcn/ui components - Pre-configured and ready to use in MDX
- âš¡ Runtime MDX compilation - No build step required for content
- 🎯 TypeScript support - Full type safety
- 🌗 Dark mode ready - Works with any Tailwind + shadcn setup
- 📦 Tree-shakeable - Only bundle what you use
- 🔧 Customizable - Override default components
- 🚀 Zero CSS bundle - Uses your Tailwind configuration
``bash`
npm install @aumnidigital/bms @mdx-js/mdx remark-gfm
Or with pnpm:
`bash`
pnpm add @aumnidigital/bms @mdx-js/mdx remark-gfm
This package requires:
- react ^18.0.0 || ^19.0.0react-dom
- ^18.0.0 || ^19.0.0@mdx-js/mdx
- ^3.0.0remark-gfm
- ^4.0.0 (for GitHub Flavored Markdown support - tables, strikethrough, task lists, etc.)
`tsx
import { MDXRenderer } from '@aumnidigital/bms';
function BlogPost({ content }) {
return (
);
}
`
`mdxMy Blog Post
This is a paragraph with bold and italic text.
This is an important notice.
Some content here
description="Contact us today"
primaryAction={{ label: "Get Started", href: "/signup" }}
secondaryAction={{ label: "Learn More", href: "/about" }}
/>
| Feature | Supported |
|---------|-----------|
| MDX | ✅ |
| Tables | ✅ |
`
#### For Tailwind v4 (Recommended)
Import the package's styles.css in your main CSS file. This enables Tailwind to scan the package's classes:
`css
@import "tailwindcss";
@import "@aumnidigital/bms/styles.css";
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
/ ... rest of CSS variables ... /
}
}
`
#### For Tailwind v3 (with tailwind.config.js)
Add the package to your Tailwind content array:
`js`
// tailwind.config.js
module.exports = {
content: [
'./src/*/.{js,ts,jsx,tsx}',
'./node_modules/@aumnidigital/bms/dist/*/.{js,cjs}',
],
theme: {
extend: {},
},
plugins: [],
};
Add these CSS variables to your global stylesheet (required for shadcn components):
`css
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
`
`tsx`
interface MDXRendererProps {
/* Raw MDX content string /
content: string;
/* Custom components to override defaults /
components?: Record
/* Variables/data to pass into MDX scope /
scope?: Record
/* MDX compile options /
options?: Omit
/* Loading fallback component /
fallback?: ReactNode;
/* Error callback /
onError?: (error: Error) => void;
}
Override default components or add your own:
`tsx
import { MDXRenderer } from '@aumnidigital/bms';
import { MyCustomComponent } from './components/MyCustomComponent';
function BlogPost({ content }) {
return (
components={{
// Override default button
Button: (props) => ,
// Add custom component
MyCustomComponent,
}}
/>
);
}
`
`tsx`
scope={{
authorName: "John Doe",
publishDate: "2024-01-15",
}}
/>
Then in MDX:
`mdx`
Written by {authorName} on {publishDate}
All standard shadcn/ui components are included:
- Buttons: Button
- Cards: , CardHeader, CardTitle, CardDescription, CardContent, CardFooter
- Alerts: , AlertTitle, AlertDescription, AlertDialog
- Forms: , Textarea, Label, Checkbox, Select, RadioGroup, Switch, Form
- Layout: , Tabs, Accordion, Collapsible, ScrollArea, Sheet, Dialog
- Navigation: , DropdownMenu
- Data Display: , Badge, Avatar, Progress, Skeleton
- Overlays: , Popover, HoverCard
- Media: , Calendar
#### CTAButtonGroup
`tsx`
{ label: "Get Started", href: "/signup", variant: "default" },
{ label: "Learn More", href: "/docs", variant: "outline" }
]}
/>
#### CTASection
`tsx`
description="Join thousands of users today"
variant="highlight"
primaryAction={{ label: "Sign Up", href: "/signup" }}
secondaryAction={{ label: "Learn More", href: "/about" }}
/>
Variants: default, highlight, minimal
The renderer automatically styles standard HTML elements:
- Headings (h1 - h6)p
- Paragraphs ()ul
- Lists (, ol, li)a
- Links ()pre
- Code blocks (, code)blockquote
- Blockquotes ()table
- Tables (, tr, th, td)hr
- Horizontal rules ()
`tsx`
fallback={Loading content...}
/>
`tsx`
onError={(error) => {
console.error('MDX compilation failed:', error);
// Send to error tracking service
}}
/>
`tsx
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
options={{
remarkPlugins: [remarkGfm],
rehypePlugins: [rehypeHighlight],
}}
/>
`
Full TypeScript support with exported types:
`tsx`
import type {
MDXRendererProps,
MDXComponents,
MDXScope
} from '@aumnidigital/bms';
This package is published to npm under the @aumnidigital scope.
`bashBuild the package
cd packages/bms
pnpm build
$3
Push a git tag to trigger automated publishing:
bash
git tag @aumnidigital/bms@0.1.0
git push --tags
``- Node.js: >=18.0.0
- React: ^18.0.0 || ^19.0.0
- Tailwind CSS: v3+ or v4+
- @mdx-js/mdx: ^3.0.0
MIT
Contributions are welcome! This package is part of a Turborepo monorepo.
For issues and questions, please open an issue on GitHub.