Sign inSign up

Introduction

Here's an overview of the beautiful built in components.
The docs are also written in MDX.

Code

const fumaComponents = {
  Callout,
  Accordion,
  Accordions,
  Card,
  Cards,
  Steps,
  Step,
  Tabs,
  Tab,
  TypeTable,
}

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...defaultComponents,
    ...components,
    ...fumaComponents,
  }
}

Code with highlight

<div>Hello World</div>  
<div>Hello World</div>
<div>Goodbye</div>
<div>Hello World</div>

Highlight specific word

const config = {
  reactStrictMode: true,
};

Code with title

next.config.js
console.log('Hello World');

Files & Folders

layout.tsx
page.tsx
global.css
package.json

Acordion

Callout

Title
Hello World

Card

Fetching, Caching, and Revalidating

Learn more about caching in Next.js

Card With Icon

Home

Go back to home

Zoom Image

image

Steps

Step 1

Hello World

Step 2

Hello World

Step 3

Hello World

Tabs

Javascript is weird

Typetable

PropTypeDefault
percentage
number
0.2

Write custom JSX with tailwind in MDX

This is a custom JSX component that uses tailwind classes, directly inside MDX.

This is the code for it:

<div className="relative inline-block">
  <img src="/images/blog/pixel-renas-avatar.jpg" className="rounded-full size-10" />
  <div className="absolute bottom-7 right-0 bg-success size-3 rounded-full animate-pulse" />
</div>

You can even import components from other packages

This is the code for it:

import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@package/ui/select"

<Select>
<SelectTrigger className="w-[180px]">
  <SelectValue placeholder="Language" />
</SelectTrigger>
<SelectContent>
  <SelectItem value="light">Javascript</SelectItem>
  <SelectItem value="dark">Typescript</SelectItem>
  <SelectItem value="system">Rust</SelectItem>
</SelectContent>
</Select>

Last updated on

Example Document