# UI Components Showcase This post demonstrates the library of premium UI components we've added to the blog. These components are designed to be responsive, accessible, and high-performance. --- ## 💡 What is MDX? **MDX** allows you to use JSX (React components) directly in your markdown content. This bridges the gap between static content and interactive UI. ### Why use MDX? - **🚀 Interactive Components**: Add charts, maps, or any custom React component. - **🎨 Dynamic Content**: Use logic and state within your posts. - **🏗️ Reusability**: Share components across different articles. ### Support vs. Normal Markdown | Feature | .md | .mdx | | --------------- | --- | ---- | | Markdown Syntax | ✅ | ✅ | | HTML tags | ✅ | ✅ | | JSX components | ❌ | ✅ | | Markdown in JSX | ❌ | ✅ | | Imports/Exports | ❌ | ✅ | --- ## 🛠️ Raw JSX Support Even without our custom components, you can use standard HTML/JSX tags with inline styles directly in your content:

💡 Raw JSX Tip This is a custom callout rendered with a standard `div` tag in MDX! You can use this for quick customization without creating a new component.

--- ## 🍱 Premium UI Components Showcase ## 1. Accordions Perfect for FAQs or collapsible content sections. MDX allows you to use JSX components directly in your markdown files. This bridges the gap between static content and interactive UI. Yes, all components are built with mobile-first responsive design principles using Tailwind CSS. Absolutely! All styles are defined in `globals.css` and can be easily modified to match your brand. --- ## 2. Checkboxes Interactive checkboxes that maintain their state during the session. --- ## 3. Icons We use **Lucide React** for beautiful, consistent iconography. You can use any Lucide icon by name.

--- ## 4. Audio Player High-quality audio integration with a clean UI.

Fade In Animation

Pulse Animation