Block Protocol template for a React-based block

World

block-template-react

new-s3-test-block

Display an overview of a GitHub Pull Request, including a timeline of key events

github-pr-overview

@alfie/github-pr-overview

Draw attention to an important point or message with framed text and a custom icon

callout

@hash/callout

Write monospaced code with syntax highlighting in a range of programming and markup languages

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

code

@hash/code

Break up content on a page with horizontal dividing lines

divider

@hash/divider

Write titles, sub-titles, and section headings in four different sizes

header

@hash/header

For the largest (top-level) section headings

Heading 1

Heading 2

Heading 3

Heading 4

Embed JPG, GIF, and PNG images by URL or file upload and add an optional caption

image

@hash/image

Write a block of text to express an idea, make a point, or record a thought

William Shakespeare was an English playwright, poet and actor, widely regarded as the greatest writer in the English language and the world's greatest dramatist. He is often called England's national poet and the "Bard of Avon".

paragraph

@hash/paragraph

Display information about a person, including their name, job title, email, website address, and an avatar

Bain & Co.

Archibald Adams-Montgomery

person

@hash/person

Create a list and set it into a random order

shuffle

@hash/shuffle

Display and manipulate tabular data with filter, sort, and search features

table

@hash/table

Embed MP4 and WEBM videos by URL or file upload and add an optional caption

video

@hash/video

quote

@jmackie/quote

Button from the kickstartDS Design System

button

@kickstartds/button

emoji-trading-cards

@shinypb/emoji-trading-cards

Spreadsheet-like table for doing computation on entities

calculation

@thehabbos007/calculation

The Beta Launch

countdown

@timdiekmann/countdown

Set a countdown timer to remind you when a certain amount of time has elapsed

timer

@timdiekmann/timer

Create a diagram, sketch an idea, or map a process

Interactive, data-driven blocks to use in your projects

More blocks coming soon

Don't see the block you need?

You can build it!