components.mdx

title	Components
description	Overview of all available MDX components for documentation.
icon	fa-solid fa-puzzle-piece
order	3

Callout

Colored hint boxes with icon. Available types: info, tip, warning, error, success.

This is an informational callout. Use it to highlight important details. You can use callouts to share tips and best practices with your readers. Be careful — this action cannot be undone. Something went wrong. Please check your configuration. Your changes have been saved successfully.

Tabs

Tabbed content for showing code in multiple languages or different approaches.

<Tabs items={["JavaScript", "TypeScript", "Python"]}> js const greeting = "Hello, World!"; console.log(greeting); ts const greeting: string = "Hello, World!"; console.log(greeting); python greeting = "Hello, World!" print(greeting)

Steps

Numbered step-by-step instructions with a vertical timeline.

Add the bot to your Discord server using the invite link on bender.best. Navigate to the Dashboard and select your server from the list. Enable and customize the features you want — leveling, moderation, economy, and more.

Card Grid

Feature cards in a responsive grid layout. Cards can optionally link to other pages.

Full currency system with gambling, businesses, and a stock market. XP-based leveling system with custom rewards and role assignments. Auto-moderation, warnings, mutes, bans, and detailed logging. Support ticket system with panels, topics, and transcripts.

Accordion

Collapsible sections for FAQs or optional details.

Go to your server's Dashboard, navigate to Settings, and update the prefix field. The default prefix is !. Yes! Bender can be added to as many servers as you want. Each server has its own independent configuration. Bender is free for all core features. Premium features like custom branding and priority support are available with a subscription.

Badge

Inline status labels. Available variants: default, info, success, warning, error.

• This command is New in the latest update.
• Requires Admin permissions to use.
• This feature is Deprecated and will be removed.
• Available in Beta for testing.
• Status: Stable

Image

Images are always centered and fill the available width. Use size to control the max-width.

Props: size (sm | md | lg | full or CSS value), caption, description (adds a frame), rounded, noRadius.

Image Carousel

Multiple images with left/right navigation and dot indicators.

Props: size (sm | md | lg | full or CSS value), noPadding (edge-to-edge), noRadius.

Advanced Markdown

Examples of standard Markdown features that are styled by the prose system.

Inline formatting

This is bold text, italic text, and inline code. You can also use links and strikethrough.

Blockquote

This is a blockquote. It's useful for highlighting quotes or important notes that don't need the full callout treatment.

Lists

1. First item in the list
2. Second item with more detail
3. Third item to wrap things up

• Supports nested items
• Easy to scan content
• Works great for feature lists

Table

Feature	Free	Premium
Leveling	Yes	Yes
Economy	Yes	Yes
Custom Branding	No	Yes
Priority Support	No	Yes

Code block

import { Client } from "discord.js";

const client = new Client({ intents: ["Guilds"] });

client.on("ready", () => {
  console.log(`Logged in as ${client.user?.tag}`);
});

client.login(process.env.TOKEN);