Yo! Welcome to the editor. If you're reading this, you probably want to know how to make your blog posts look sick using our custom components.

Don't worry, it's super easy. I got you. Let's break it down, casual style.

The Basics

Writing here is just like writing standard Markdown, but with superpowers. You can bold stuff, italicize it, or even add code blocks like a pro.

const mood = "chill";
console.log(`Current vibe: ${mood}`);

But that's boring. Let's get to the cool stuff.

Custom Components

We have a bunch of custom components you can use directly in your MDX files. Here's the cheat sheet.

Cards

Want to link to something in style? Use a card. It's like a button, but bigger and with more personality.

How to write it:

<CardGroup cols={2}>
  <Card title="Github" icon="Github" href="...">
    Check out my open source work.
  </Card>
  // write the same card for X...
</CardGroup>

Accordions

Got a lot of text but don't want to clutter the page? Hide it in an accordion. Peek-a-boo!

The code:

<AccordionGroup>
  <Accordion title="Question?" icon="HelpCircle">
    Answer goes here!
  </Accordion>
  // write the same accordion for Can I use icons?...
</AccordionGroup>

Tabs

Perfect for showing different options, like code in different languages or multiple steps.

npm install @docubook/create@latest

Stepper

Want to guide someone through a process? The Stepper component is your best friend.

Buttons

Sometimes a simple link isn't enough. You need a Button.

Wrapping Up

See? Writing with Markdown is a breeze. It's clean, fast, and handles all the heavy lifting for you.

Now go forth and create something awesome! 🚀