Guide to our Components

Here is a brief showing of the different components we have available, and how they can be used

Syntax Guide

A practical reference to core Markdown syntax for writing docs.

Basic Formatting

Text Formatting

Bold text using **bold text**
Italic text using *italic text*
Inline code using backticks
~~Strikethrough~~ using ~~strikethrough~~

Headers

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

Lists

Unordered

Item 1
Item 2
- Nested item
- Another nested item
Item 3

Ordered

First item
Second item
Third item

Links and Images

Links

Devscribe
Devscribe with title

Images

Code

Inline Code

Use single backticks for inline code.

Basic Code Blocks

Use triple backticks with language specification:

Custom MDX Components

Custom MDX components supported by this repo

Tip: Components can be nested (e.g., a callout inside a card, code fences inside tabs).

Code Blocks with options

Auth Helper

Callouts

Supported types: info, warning, error, success, tip, danger.

Informational message about a feature.

Heads up about a potentially risky action.

Something went wrong and needs attention.

Operation completed successfully.

Pro tip to improve your workflow.

Destructive action. Proceed with extreme caution.

Callouts with Rich Content

You can include code blocks in callouts:

And lists too:

Item 1
Item 2
Item 3

Heading in Callout

This callout contains a heading and multiple paragraphs.

This is the second paragraph with bold text and italic text.

Cards

Basic Card Examples

Simple Card

This is a basic card with title and description

Basic card content goes here. This card uses the default attributes.

Card with Icon

This card demonstrates the icon and showIcon attributes

This card includes an icon. The icon name should be from Lucide React.

Card without Icon

This card has showIcon set to false

Even though an icon is specified, it won't be displayed because showIcon is false.

Card Layout Options

Horizontal Card

This card uses horizontal layout

This card demonstrates the horizontal layout option where the icon appears on the left and content on the right, similar to a callout.

You can include rich content in horizontal cards:

Lists work great
Code blocks too
Any nested content

Vertical Card

This is the default vertical layout

This card uses the default vertical layout where content flows from top to bottom.

Heading in Card

Cards support rich content including headings, paragraphs, and other components.

Clickable Cards

Linked Card

This entire card is clickable

When the href attribute is provided, the entire card becomes clickable and will navigate to the specified URL.

Click anywhere on this card to test the link functionality.

Internal Link Card

Card linking to internal page

This card links to an internal page. The href can be any valid URL - external or internal.

Cards with Rich Content

Card with Code

Demonstrating code blocks in cards

Cards can contain code examples:

The code formatting is preserved inside the card component.

Card with Lists

Cards supporting various content types

Cards work well with different content types:

Ordered Lists

First item
Second item
Third item

Unordered Lists

Bullet point one
Bullet point two
Bullet point three

Mixed Content

You can combine text, lists, and other elements seamlessly.

CardGroups

Basic CardGroup Examples

Feature 1

Core functionality

Fast and reliable performance with optimized algorithms.

Feature 2

Easy integration

Simple APIs that integrate with your existing workflow.

Feature 3

Secure by default

Built-in security features to protect your data.

Feature 4

Scalable architecture

Scales automatically to handle increased demand.

CardGroup with Different Column Layouts

Single Column Layout

Full Width Card

This card spans the full width

In a single column layout, cards take up the full available width, making them perfect for detailed content.

Another Full Width Card

Second card in single column

This layout is ideal for:

Detailed explanations
Code examples that need space
Step-by-step instructions

Three Column Layout

Quick Tip 1

Compact design

Use small gaps for compact layouts.

Quick Tip 2

Performance

Optimize your components for speed.

Quick Tip 3

Accessibility

Always consider accessibility in design.

Quick Tip 4

User Experience

Focus on user-centered design principles.

Quick Tip 5

Mobile First

Design for mobile devices first.

Quick Tip 6

Testing

Test your components thoroughly.

CardGroup with Mixed Content

API Documentation

Complete API reference

Getting Started

Our API provides easy access to all platform features:

Key Features

RESTful design
JSON responses
Rate limiting
Comprehensive documentation

SDK Integration

Multiple language support

Supported Languages

We provide SDKs for popular programming languages:

JavaScript/TypeScript - npm package
Python - pip package
Go - Go modules
PHP - Composer package

Community

Join our developer community

Connect with other developers, share experiences, and get help with integration challenges.

Visit our Discord server or GitHub discussions.

Support

Get help when you need it

Our support team is available 24/7 to help with any questions or issues you might encounter.

Email us or open a support ticket.

Accordions

This accordion starts open

This accordion starts in the open state because defaultOpen is set to true.

Accordion Groups

Basic Accordion Group

Exclusive Accordion Group

Initialize your project

Expand

This expand component starts in the open state because defaultOpen is true.

Steps

Basic Steps

Install Dependencies

Create Configuration

markdoc.config.js

Build Your First Document

example.mdx

Advanced Steps with Rich Content

Database Setup

Configure your database connection and schema.

schema.sql

Make sure to backup your database before running schema changes.

API Implementation

Build the API endpoints.

api/documents.js

Return precise status codes and validate inputs.

The endpoints above demonstrate basic read and create operations.

Testing & Deployment

Write tests and deploy your application.

ci.yml

CodeGroups

HTTP Clients

With Line Numbers + Highlight

Fields

Basic

idstringrequired

The unique identifier.

With Default Values

rolestringdefault: user

The user's role. Defaults to "user".

Deprecated

legacyIdnumberdeprecated

Legacy identifier. Do not use in new integrations.

Within an Expand

Tooltips

This is a paragraph with a hover tooltip that provides additional context.

You can also use tooltips to explain technical terms in your documentation.

Tabs

Basic Tabs

Tab Groups with Rich Content

Make a POST request to create a new resource:

Request Headers

Content-Type: application/json
Authorization: Bearer <token>

Request Body Fields

namestringrequired

Full name of the new user.

emailstringrequired

A valid email address for the account.