Getting Started with MDX and Prose UI

MDX is a powerful way to write content with JSX components embedded directly in your markdown. When combined with Prose UI, it creates a seamless experience for building beautiful, content-focused websites.

What is Prose UI?

Prose UI provides refined typography and components specifically designed for MDX content. It's perfect for blogs, documentation sites, and other text-heavy applications.

Key Features

Here are some of the key features that make Prose UI stand out:

1. Beautiful Typography - Carefully crafted typography that makes reading a pleasure
2. Responsive Components - All components work flawlessly across different screen sizes
3. Dark Mode Support - Built with both light and dark themes in mind
4. Customizable Design Tokens - Easy to adapt to your brand using CSS variables

Code Example

Here's a simple React component using Prose UI:

import { Image } from "@prose-ui/next";
import { Figure } from "@/components/ui/figure";

export default function MyComponent() {
  return (
    <Figure
      src="/images/mountain.jpg"
      alt="Mountain landscape"
      caption="A beautiful mountain landscape"
    />
  );
}

// You can also align your figures
export function AlignedFigures() {
  return (
    <>
      <Figure
        src="/images/mountain.jpg"
        alt="Left-aligned mountain"
        caption="Default: Left-aligned figure"
      />

      <Figure
        src="/images/mountain.jpg"
        alt="Center-aligned mountain"
        caption="Center-aligned figure"
        align="center"
      />

      <Figure
        src="/images/mountain.jpg"
        alt="Right-aligned mountain"
        caption="Right-aligned figure"
        align="right"
      />
    </>
  );
}

Tables

Prose UI also supports beautiful tables:

| Feature | Description | Supported | | :------------ | :----------------------- | :-------: | | Typography | Refined text styles | ✅ | | Components | Set of useful components | ✅ | | Dark Mode | Support for dark themes | ✅ | | Customization | CSS variable overrides | ✅ |

Next Steps

Now that you understand the basics, you can:

• Explore the Prose UI documentation
• Check out example templates
• Start building your own MDX content

Happy writing!