Components ShowcaseCopy link to section
This page demonstrates the custom MDX components available for use in the documentation.
Code BlocksCopy link to section
Enhanced code blocks with a copy button and Mac-style window controls.
npm install super-cool-package
// It also works effectively with standard markdown code blocks if configured
function HelloWorld() {
console.log('Hello World');
}
StepsCopy link to section
Use the <Steps> component to create stylish step-by-step guides.
PrerequisitesCopy link to section
Ensure you have Node.js installed on your machine.
InstallationCopy link to section
Run the installation command in your terminal.
ConfigurationCopy link to section
Update your .env file with the necessary API keys.
CardsCopy link to section
Use <Card> and <CardGrid> to create navigation links or feature highlights.
TabsCopy link to section
Use <Tabs> to show content options, like code in different languages.
bash npm install boomerang-bot AccordionCopy link to section
Use <Accordion> for FAQs or collapsible content.
Alerts (Callouts)Copy link to section
Standard alerts used for highlighting important information.
Members with Boomerang staff permissions and/or the Discord “Manage Messages” permission are exempt from anti-ping warnings.
Your changes have been saved successfully.
CalloutsCopy link to section
Use <Callout> for solid, emphasized notes that standout from standard alerts.
Members with Boomerang staff permissions and/or the Discord "Manage Messages" permission are exempt from anti-ping warnings.
TablesCopy link to section
Use standard Markdown tables, and they will be styled automatically.
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">Invoice</TableHead>
<TableHead>Status</TableHead>
<TableHead>Method</TableHead>
<TableHead className="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">INV001</TableCell>
<TableCell>Paid</TableCell>
<TableCell>Credit Card</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-medium">INV002</TableCell>
<TableCell>Pending</TableCell>
<TableCell>PayPal</TableCell>
<TableCell className="text-right">$150.00</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={3}>Total</TableCell>
<TableCell className="text-right">$400.00</TableCell>
</TableRow>
</TableFooter>
</Table>
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| Total | $400.00 |
Dialogs (Modals)Copy link to section
You can create interactive dialogs using the Dialog components.