Welcome to MDX World

This is a simple demonstration of how to use the MDX components you’ve provided.

Callouts Example

Did You Know?

MDX enables you to seamlessly combine markdown with React components.

Heads Up!

This action could have irreversible consequences. Proceed with caution.

Error

Something went wrong! Please try again later.

Quote Example

Imagination is more important than knowledge. For knowledge is limited, whereas imagination encircles the world.

Albert Einstein

Imagination is more important than knowledge. For knowledge is limited, whereas imagination encircles the world.

Albert Einstein

Accordion Example

Tabs Example

MDX combines the power of Markdown with JSX.

List Example

Unordered List

This is an unordered list.
It supports nested items.
- Nested item 1
- Nested item 2

Ordered List

Step one
Step two
Step three

Button Example

Blockquote Example

This is a blockquote with a styled alert.

Card Example

Card Title

Card description goes here.

This is the main content of the card.

Footer content here.

File Structure Example

Image Example

Zoomable Media Example

Code Block Example

function greet(name) {
  return `Hello, ${name}!`;
}

Code Block Wrapper Example

  // Perlin noise implementation in TypeScript
 
class PerlinNoise {
  private permutation: number[] = [];
  private p: number[] = [];
 
  constructor() {
    this.permutation = Array.from({ length: 256 }, () => Math.floor(Math.random() * 256));
    this.p = [...this.permutation, ...this.permutation];
  }
 
  private fade(t: number): number {
    return t * t * t * (t * (t * 6 - 15) + 10);
  }
 
  private lerp(t: number, a: number, b: number): number {
    return a + t * (b - a);
  }
 
  private grad(hash: number, x: number, y: number, z: number): number {
    const h = hash & 15;
    const u = h < 8 ? x : y;
    const v = h < 4 ? y : h === 12 || h === 14 ? x : z;
    return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
  }
 
  public noise(x: number, y: number, z: number): number {
    const X = Math.floor(x) & 255;
    const Y = Math.floor(y) & 255;
    const Z = Math.floor(z) & 255;
 
    x -= Math.floor(x);
    y -= Math.floor(y);
    z -= Math.floor(z);
 
    const u = this.fade(x);
    const v = this.fade(y);
    const w = this.fade(z);
 
    const A = this.p[X] + Y;
    const AA = this.p[A] + Z;
    const AB = this.p[A + 1] + Z;
    const B = this.p[X + 1] + Y;
    const BA = this.p[B] + Z;
    const BB = this.p[B + 1] + Z;
 
    return this.lerp(w, this.lerp(v, this.lerp(u, this.grad(this.p[AA], x, y, z), this.grad(this.p[BA], x - 1, y, z)),
      this.lerp(u, this.grad(this.p[AB], x, y - 1, z), this.grad(this.p[BB], x - 1, y - 1, z))),
      this.lerp(v, this.lerp(u, this.grad(this.p[AA + 1], x, y, z - 1), this.grad(this.p[BA + 1], x - 1, y, z - 1)),
      this.lerp(u, this.grad(this.p[AB + 1], x, y - 1, z - 1), this.grad(this.p[BB + 1], x - 1, y - 1, z - 1))));
  }
}
 
// Example usage
const perlin = new PerlinNoise();
console.log(perlin.noise(1.1, 2.2, 3.3));

Chip Example

Default Chip Info Chip Success Chip Warning Chip Danger Chip

Custom Component Example

Heya, I'm Gaurav.

Heya, I'm <CompanyName />.