Blog Component Showcase: Interactive Elements Gallery

Welcome to Our Component Showcase

This page demonstrates every interactive component available in our blog system. Use this as a reference to understand what's possible when creating content with us, or to provide feedback on improvements.

Each component is designed with our brutalist design philosophy: clean lines, high contrast, and functional aesthetics that prioritize readability and user experience.

Code Blocks

Standard syntax-highlighted code blocks for any programming language. Includes line numbers and one-click copy functionality.

1// TypeScript example with full syntax highlighting
2interface User {
3  id: string;
4  name: string;
5  email: string;
6  createdAt: Date;
7}
8
9async function fetchUser(id: string): Promise<User> {
10  const response = await fetch(`/api/users/${id}`);
11  if (!response.ok) {
12    throw new Error('User not found');
13  }
14  return response.json();
15}

Mermaid Diagrams

Interactive flowcharts, sequence diagrams, and architecture visualizations. Supports zoom, pan, and fullscreen viewing.

Interactive Charts

Data visualization with hover tooltips, animations, and multiple chart types. Perfect for statistics, trends, and comparisons.

Bar Chart

Line Chart

Pie Chart

Pricing Tables

Beautifully styled pricing comparisons for services and products. Supports both tier-based and usage-based pricing models.

File Trees

Interactive file structure visualizations with expand/collapse, syntax highlighting by file type, and copy functionality.

Terminal Commands

Styled command-line displays with copy functionality, output display, and status indicators. Perfect for tutorials and setup guides.

Git Branch Visualization

Interactive git workflow diagrams showing branching strategies, commits, merges, and tags. Click commit hashes to copy.

Callouts (Admonitions)

Attention-grabbing boxes for tips, warnings, notes, and important information. Six types available for different contexts.

Tabs

Tabbed content for showing multiple variants of the same information. Package managers (npm, yarn, pnpm, bun) automatically get their brand icons and colors.

npm install @tanstack/react-query axios zod

Stepper (Step-by-Step Guides)

Interactive step-by-step tutorials with navigation, progress tracking, and optional code snippets for each step.

npm install -g wrangler

Accordion (FAQ)

Collapsible content sections perfect for FAQs, troubleshooting guides, and long-form optional content.

Code Diff (Before/After)

Side-by-side code comparisons showing changes, additions, and removals. Perfect for migration guides and refactoring tutorials.

Timeline

Chronological displays for roadmaps, version history, and project milestones with different event types and highlighting.

Stats Cards

Eye-catching metric displays for KPIs, performance data, and key statistics with trend indicators.

API Reference

Complete endpoint documentation with method badges, parameters, authentication indicators, and response examples.

Testimonials

Customer quotes and reviews with ratings, photos, and source attribution. Supports both single quotes and grids.

Keyboard Shortcuts

Documentation for hotkeys and keyboard shortcuts with automatic Mac/Windows symbol conversion.

Image Comparison

Before/after image sliders for design changes, UI improvements, and visual comparisons. Drag to compare.

Dashboard Redesign

drag to compare

Original

Redesigned

50% originalbuun.group

Math/LaTeX Equations

Mathematical formulas and equations rendered with LaTeX syntax. Supports Greek letters, operators, and complex expressions.

Video Embeds

YouTube and Vimeo embeds with lazy loading, custom thumbnails, and consistent brutalist styling.

Introduction to React

Open

YouTube

Learn the fundamentals of React in this comprehensive tutorial.

buun.group

Interactive Quiz

Test your readers' knowledge with interactive quizzes. Perfect for tutorials, courses, and educational content.

Interactive Checklist

Track progress through tutorials with interactive checklists. State can persist in localStorage.

Browser Mockup

Display website screenshots in a realistic browser frame with address bar, tabs, and navigation.

Buun Group - Web Development

https://buun.group

Our homepage showcasing modern web development services

Browser mockupbuun.group

Phone Mockup

Display mobile app screenshots in a realistic device frame. Perfect for showcasing responsive designs.

9:41

iPhone Preview

Our mobile-first dashboard experience

Changelog

Document version releases with categorized changes. Follows the Keep a Changelog format.

Resource Cards

Curate and display helpful resources with categorization and previews.

Code Annotation

Explain code step-by-step with numbered annotations. Click annotations to highlight the relevant code.

1import { useState, useEffect } from 'react';1
2
3function useWindowSize() {2
4  const [size, setSize] = useState({3
5    width: window.innerWidth,
6    height: window.innerHeight,
7  });
8
9  useEffect(() => {4
10    const handleResize = () => {
11      setSize({
12        width: window.innerWidth,
13        height: window.innerHeight,
14      });
15    };
16
17    window.addEventListener('resize', handleResize);5
18    return () => window.removeEventListener('resize', handleResize);
19  }, []);
206
21  return size;
22}

Glossary

Provide searchable term definitions for technical content. Great for documentation and tutorials.

Cheat Sheet

Quick reference cards perfect for commands, syntax, and shortcut guides. Features collapsible sections, copy buttons, and tag-based categorization.

Sectioned Cheat Sheet

Compact Flat Cheat Sheet

Summary

This showcase demonstrates all 29 interactive components available in our blog system:

Each component is:

• Responsive - Works on all screen sizes
• Accessible - Keyboard navigable and screen reader friendly
• Theme-aware - Adapts to light/dark mode
• Interactive - Copy buttons, expand/collapse, hover effects

Feedback Welcome

We're constantly improving these components. If you have suggestions for improvements or new component ideas, please contact us with your feedback.