Component Demo

A living reference of the design system and MDX components available on this site. Everything here is built to feel clean, minimal, and book-like.

Typography

Body text is set in Geist at a comfortable reading size. Headings use Geist Pixel Grid, a pixel display font from Vercel. Code uses Geist Mono, a variable monospace font from Vercel.

Heading Level 3

Regular paragraph text with an inline link, some bold text, and italic text. Inline code sits neatly within the flow.

Heading Level 4

Lists render with comfortable spacing:

First item in an unordered list
Second item with a bit more detail to show wrapping behavior
Third item

Numbered items work the same way
With proper spacing between each entry
And consistent indentation

Blockquote

The purpose of abstraction is not to be vague, but to create a new semantic level in which one can be absolutely precise.

Edsger W. Dijkstra

Code Blocks

Standalone code blocks with language badges:

func main() {
    fmt.Println("Hello, world")
}

Multi-language tabbed code blocks:

package main

import "fmt"

func main() {
    fmt.Println("Hello from Go")
}

function greet(name: string): string {
  return `Hello from ${name}`;
}

console.log(greet("TypeScript"));

def greet(name: str) -> str:
    return f"Hello from {name}"

print(greet("Python"))

Warning Boxes

Three variants for different severity levels:

Experimental Project

This API is experimental and may change in future releases. Use at your own risk.

Use with Caution

This operation is destructive and cannot be undone. Make sure you have backups before proceeding.

Deprecated

This method is deprecated since v2.0. Use newMethod() instead.

Inline Components

GitHub repository link: flaticols/positionless. Hover to see the popup card with repo details.

YouTube video link: A classic video.

Tables

Tool	Language	Purpose
Positionless	Go	Static analyzer for struct literals
Bump	Go	Semantic version tag bumping
Tagger	TypeScript	GitHub Action for auto-versioning

Post Listing Hover

Visit the posts page to see the hover effect on post items.

Project Cards

Visit the projects page to see the card hover depth effect.

References

The bibliography component for citing literature and articles used in a post. Clean, numbered, book-style.

With a custom title:

Footer

Scroll down to see the footer with its background tint and improved spacing.