Components Overview

Alerts & Callouts

Use callouts to highlight important information with different severity levels.

Standard Types

This is a note. Use it for general information that readers should be aware of.

This is a tip. Use it for helpful suggestions and best practices.

This is an info callout. Use it for additional context or explanations.

This is a warning. Use it to alert readers about potential issues or important considerations.

This is a success callout. Use it to confirm completed actions or successful operations.

This is a danger callout. Use it for critical warnings that could cause data loss or security issues.

With Titles

Custom Redirect Domain

A Custom Redirect domain hides our Service from your Users and Discord.

Create a RestoreCord Server

You have successfully setup a Discord Bot for RestoreCord, you may continue to creating a server on our dashboard.

Any Questions?

If you have any questions, feel free to join our Discord Server and ask us anything!

Custom Colors

Pro Feature

This feature is only available on Pro plans. Upgrade to unlock advanced customization options.

Performance Tip

Enable caching to improve response times by up to 10x for repeated queries.

Community Love

Thanks to our amazing community for all the feedback and contributions!

mdx

<Note>This is a note.</Note>
<Tip>This is a tip.</Tip>
<Info>This is an info callout.</Info>
<Warning>This is a warning.</Warning>
<Check>This is a success callout.</Check>
<Danger>This is a danger callout.</Danger>

<Alert type="info" title="With Title">
    Content goes here.
</Alert>

<Alert color="#8b5cf6" icon="sparkles" title="Custom Color">
    Use any hex color for custom branded alerts.
</Alert>

Cards

Display content in beautiful card layouts.

Single Card

Getting Started

Learn how to set up your project in minutes.

mdx

<Card title="Getting Started" icon="rocket" href="/quickstart">
    Learn how to set up your project in minutes.
</Card>

Card Groups

Installation

Step-by-step installation guide

Configuration

Configure your project settings

API Reference

Complete API documentation

FAQ

Frequently asked questions

mdx

<CardGrid cols={2}>
    <Card title="Installation" icon="download" href="/installation">
        Step-by-step installation guide
    </Card>
    <Card title="Configuration" icon="settings" href="/concepts/overview">
        Configure your project settings
    </Card>
</CardGrid>

Code Blocks

Basic Code Block

typescript

const greeting = "Hello, World!";
console.log(greeting);

With Title

typescript

interface User {
    id: string;
    name: string;
    email: string;
}

function getUser(id: string): Promise<User> {
    return fetch(`/api/users/${id}`).then((res) => res.json());
}

Code Groups

Show the same code in multiple languages:

npm install @acme/sdk

yarn add @acme/sdk

pnpm add @acme/sdk

Tabs

Organize content into tabbed sections:

javascript

const client = new AcmeClient({
    apiKey: process.env.ACME_API_KEY
});

const result = await client.query("Hello!");
console.log(result);

Accordions

Collapsible content sections:

What is Acme?

How do I get started?

What languages are supported?

mdx

<AccordionGroup>
    <Accordion title="Question 1">Answer to question 1.</Accordion>
    <Accordion title="Question 2">Answer to question 2.</Accordion>
</AccordionGroup>

Steps

Guide users through a process:

Create an Account

Get Your API Key

Navigate to the dashboard and generate your API key.

Install the SDK

Install our SDK using your preferred package manager.

Make Your First Request

Use the SDK to make your first API request.

mdx

<Steps>
    <Step title="Step 1">Description of step 1.</Step>
    <Step title="Step 2">Description of step 2.</Step>
</Steps>

API Reference Components

Parameter Fields

Document request parameters:

name

string

required

The user's full name.

string

required

The user's email address. Must be unique.

role

string

default: user

The user's role. One of: admin, user, guest.

mdx

<ParamField body="name" type="string" required>
    The user's full name.
</ParamField>

<ParamField body="email" type="string" default="user@example.com">
    The user's email address.
</ParamField>

Response Fields

Document response structure:

string

Unique identifier for the user.

createdAt

string

ISO 8601 timestamp of when the user was created.

metadata

object

Additional metadata about the user.

mdx

<ResponseField name="id" type="string">
    Unique identifier for the user.
</ResponseField>

Diagrams

Mermaid Diagrams

Create diagrams using Mermaid syntax:

Loading diagram...

Images & Frames

Display images with a beautiful frame and click-to-fullscreen:

A beautiful code editor setup

With Hint

Pro tip: Use dark mode for better contrast

Screenshot of the dashboard

mdx

<Image caption="Description of the image">
    <img src="/images/screenshot.png" alt="Description" />
</Image>

<Image hint="Helpful tip" icon="lightbulb" caption="Caption text">
    <img src="/images/feature.png" alt="Feature" />
</Image>

Custom HTML & Tailwind CSS

You can use custom HTML elements and Tailwind CSS classes directly in your MDX files for full flexibility.

Basic Custom Styling

Custom Gradient Box

This is a custom styled container using Tailwind CSS classes directly in MDX.

Custom Grid Layout

Feature 1

Custom blue card

Feature 2

Custom green card

Feature 3

Custom orange card

Custom Callout

💡

Pro Tip

You can combine Vellocs components with custom HTML for maximum flexibility. All Tailwind utilities are available!

mdx

{/* Basic styled container */}

<div className="p-6 rounded-2xl bg-gradient-to-r from-purple-500 to-pink-500 text-white">
    <h3 className="text-2xl font-bold mb-2">Custom Title</h3>
    <p>Your content here...</p>
</div>

{/* Custom grid layout */}

<div className="grid grid-cols-3 gap-4">
    <div className="p-4 rounded-xl bg-blue-500/10">Card 1</div>
    <div className="p-4 rounded-xl bg-green-500/10">Card 2</div>
    <div className="p-4 rounded-xl bg-orange-500/10">Card 3</div>
</div>

{/* Using theme colors */}

<button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg">
    Themed Button
</button>

Use theme-aware colors like bg-primary, text-foreground, border-border to ensure your custom elements work in both light and dark modes.

Next Steps

Quickstart

Get started with your first project

API Reference

Explore the complete API

Alerts & Callouts

Use callouts to highlight important information with different severity levels.

Standard Types

This is a note. Use it for general information that readers should be aware of.

This is a tip. Use it for helpful suggestions and best practices.

This is an info callout. Use it for additional context or explanations.

This is a warning. Use it to alert readers about potential issues or important considerations.

This is a success callout. Use it to confirm completed actions or successful operations.

This is a danger callout. Use it for critical warnings that could cause data loss or security issues.

With Titles

Custom Redirect Domain

A Custom Redirect domain hides our Service from your Users and Discord.

Create a RestoreCord Server

You have successfully setup a Discord Bot for RestoreCord, you may continue to creating a server on our dashboard.

Any Questions?

If you have any questions, feel free to join our Discord Server and ask us anything!

Custom Colors

Pro Feature

This feature is only available on Pro plans. Upgrade to unlock advanced customization options.

Performance Tip

Enable caching to improve response times by up to 10x for repeated queries.

Community Love

Thanks to our amazing community for all the feedback and contributions!

mdx

<Note>This is a note.</Note>
<Tip>This is a tip.</Tip>
<Info>This is an info callout.</Info>
<Warning>This is a warning.</Warning>
<Check>This is a success callout.</Check>
<Danger>This is a danger callout.</Danger>

<Alert type="info" title="With Title">
    Content goes here.
</Alert>

<Alert color="#8b5cf6" icon="sparkles" title="Custom Color">
    Use any hex color for custom branded alerts.
</Alert>

Cards

Display content in beautiful card layouts.

Single Card

Getting Started

Learn how to set up your project in minutes.

mdx

<Card title="Getting Started" icon="rocket" href="/quickstart">
    Learn how to set up your project in minutes.
</Card>

Card Groups

Installation

Step-by-step installation guide

Configuration

Configure your project settings

API Reference

Complete API documentation

FAQ

Frequently asked questions

mdx

<CardGrid cols={2}>
    <Card title="Installation" icon="download" href="/installation">
        Step-by-step installation guide
    </Card>
    <Card title="Configuration" icon="settings" href="/concepts/overview">
        Configure your project settings
    </Card>
</CardGrid>

Code Blocks

Basic Code Block

typescript

const greeting = "Hello, World!";
console.log(greeting);

With Title

typescript

interface User {
    id: string;
    name: string;
    email: string;
}

function getUser(id: string): Promise<User> {
    return fetch(`/api/users/${id}`).then((res) => res.json());
}

Code Groups

Show the same code in multiple languages:

npm install @acme/sdk

yarn add @acme/sdk

pnpm add @acme/sdk

Tabs

Organize content into tabbed sections:

javascript

const client = new AcmeClient({
    apiKey: process.env.ACME_API_KEY
});

const result = await client.query("Hello!");
console.log(result);

Accordions

Collapsible content sections:

What is Acme?

How do I get started?

What languages are supported?

mdx

<AccordionGroup>
    <Accordion title="Question 1">Answer to question 1.</Accordion>
    <Accordion title="Question 2">Answer to question 2.</Accordion>
</AccordionGroup>

Steps

Guide users through a process:

Create an Account

Get Your API Key

Navigate to the dashboard and generate your API key.

Install the SDK

Install our SDK using your preferred package manager.

Make Your First Request

Use the SDK to make your first API request.

mdx

<Steps>
    <Step title="Step 1">Description of step 1.</Step>
    <Step title="Step 2">Description of step 2.</Step>
</Steps>

API Reference Components

Parameter Fields

Document request parameters:

name

string

required

The user's full name.

string

required

The user's email address. Must be unique.

role

string

default: user

The user's role. One of: admin, user, guest.

mdx

<ParamField body="name" type="string" required>
    The user's full name.
</ParamField>

<ParamField body="email" type="string" default="user@example.com">
    The user's email address.
</ParamField>

Response Fields

Document response structure:

string

Unique identifier for the user.

createdAt

string

ISO 8601 timestamp of when the user was created.

metadata

object

Additional metadata about the user.

mdx

<ResponseField name="id" type="string">
    Unique identifier for the user.
</ResponseField>

Diagrams

Mermaid Diagrams

Create diagrams using Mermaid syntax:

Loading diagram...

Images & Frames

Display images with a beautiful frame and click-to-fullscreen:

A beautiful code editor setup

With Hint

Pro tip: Use dark mode for better contrast

Screenshot of the dashboard

mdx

<Image caption="Description of the image">
    <img src="/images/screenshot.png" alt="Description" />
</Image>

<Image hint="Helpful tip" icon="lightbulb" caption="Caption text">
    <img src="/images/feature.png" alt="Feature" />
</Image>

Custom HTML & Tailwind CSS

You can use custom HTML elements and Tailwind CSS classes directly in your MDX files for full flexibility.

Basic Custom Styling

Custom Gradient Box

This is a custom styled container using Tailwind CSS classes directly in MDX.

Custom Grid Layout

Feature 1

Custom blue card

Feature 2

Custom green card

Feature 3

Custom orange card

Custom Callout

💡

Pro Tip

You can combine Vellocs components with custom HTML for maximum flexibility. All Tailwind utilities are available!

mdx

{/* Basic styled container */}

<div className="p-6 rounded-2xl bg-gradient-to-r from-purple-500 to-pink-500 text-white">
    <h3 className="text-2xl font-bold mb-2">Custom Title</h3>
    <p>Your content here...</p>
</div>

{/* Custom grid layout */}

<div className="grid grid-cols-3 gap-4">
    <div className="p-4 rounded-xl bg-blue-500/10">Card 1</div>
    <div className="p-4 rounded-xl bg-green-500/10">Card 2</div>
    <div className="p-4 rounded-xl bg-orange-500/10">Card 3</div>
</div>

{/* Using theme colors */}

<button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg">
    Themed Button
</button>

Use theme-aware colors like bg-primary, text-foreground, border-border to ensure your custom elements work in both light and dark modes.