let a = 1;
 
console.log(a);

Counters Example

Beer Loading Animation

A fun, brand-themed loading animation perfect for async operations!

Basic Usage

Different Sizes

Usage in Code

import { BeerLoader } from '../components'
 
// Basic
<BeerLoader />
 
// With message
<BeerLoader message="Loading your resources..." />
 
// Custom size
<BeerLoader size="lg" message="Pouring knowledge..." />

Features:

• 🍺 Animated beer filling from bottom to top
• 💨 Pulsing foam on top
• 🫧 Rising bubbles for extra realism
• 📏 Three sizes: sm, md, lg
• 💬 Optional loading message
• 🌙 Dark mode support

Image Example

Playground Component

Playground component lets you write Nextra-compatible MDX that renders only on the client. It's modeled after the functionality found in MDX Playground (opens in a new tab).

In some instances where remote loading MDX is not an option, this may work as a great alternative.

Here's an example of a code block.

console.log("Hello world, this is a playground component!");

Caveats

Due to the purely client-side nature of this component, features "Table of Contents" and "Front matter" will not work.

Mermaid Example