12 Core Blocks

Flat-Blocks

Production-ready WordPress blocks with Shadcn/Tailwind styling. Beautiful, responsive, and accessible by default.

View on GitHub

Documentation

⚡

Performance First

92% of blocks are Server Components with zero client JavaScript

🎨

Beautiful Design

Shadcn UI components with Tailwind CSS for modern aesthetics

♿

Fully Accessible

WCAG 2.1 AA compliant with semantic HTML and ARIA labels

Block Library

12 core blocks ready to use in your Next.js + WordPress projects

3 Blocks

Content Blocks

Typography and text formatting blocks for rich content

Paragraph

Responsive typography block with font sizing and drop cap support

Props:

content:string

HTML content

fontSize?:'small' | 'normal' | 'medium' | 'large' | 'x-large'

Font size preset

dropCap?:boolean

Enable drop cap on first letter

align?:'left' | 'center' | 'right' | 'justify'

Text alignment

Example:

Highlighting code...

Live Preview:

Beautiful typography with proper line height and responsive sizing. The paragraph block adapts to different screen sizes automatically, ensuring readability on all devices. This example shows a large font size with a drop cap on the first letter.

Heading

H1-H6 headings with auto-generated anchor links for easy navigation

Props:

content:string

Heading text

level:1 | 2 | 3 | 4 | 5 | 6

Heading level (h1-h6)

anchor?:string

Custom anchor ID

textAlign?:'left' | 'center' | 'right'

Text alignment

Example:

Highlighting code...

Live Preview:

This is a Level 2 Heading

Hover over the heading above to see the anchor link. The anchor is auto-generated from the heading text for easy linking.

Quote

Beautiful blockquote with optional citation and two style variants

Props:

value:string

Quote content (HTML)

citation?:string

Author or source

style?:'default' | 'large'

Visual style variant

align?:'left' | 'center' | 'right'

Text alignment

Example:

Highlighting code...

Live Preview:

The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.
Steve Jobs

2 Blocks

Code Blocks

Syntax-highlighted code display with advanced features

Code

Syntax highlighting with Shiki, copy button, and line numbers

Props:

content:string

Code content

language?:string

Programming language (50+ supported)

fileName?:string

Optional filename header

showLineNumbers?:boolean

Show line numbers

showCopyButton?:boolean

Show copy button

highlightLines?:string

Lines to highlight (e.g., "1,3-5")

Example:

Highlighting code...

Live Preview:

page.tsx

Highlighting code...

Code Tabs

Tabbed code blocks for showing multiple language examples

Props:

tabs:Array<{label: string; language: string; content: string}>

Array of code tabs

showLineNumbers?:boolean

Show line numbers

showCopyButton?:boolean

Show copy button

Example:

Highlighting code...

Live Preview:

3 Blocks

Media Blocks

Optimized image display and call-to-action buttons

Image

Optimized images with next/image, captions, and responsive sizing

Props:

url:string

Image URL

alt:string

Alt text for accessibility

caption?:string

Image caption

width?:number

Image width in pixels

height?:number

Image height in pixels

borderRadius?:'none' | 'sm' | 'md' | 'lg' | 'full'

Border radius size

Example:

Highlighting code...

Live Preview:

Abstract colorful gradient background — Images are automatically optimized with Next.js Image component

Button

Call-to-action buttons with Shadcn UI variants and sizes

Props:

text:string

Button text

url:string

Link URL

Button style

size?:'sm' | 'default' | 'lg'

Button size

width?:'auto' | 'full'

Button width

Example:

Highlighting code...

Live Preview:

Buttons (Container)

Container for multiple buttons with layout and spacing control

Props:

layout?:'horizontal' | 'vertical'

Button layout direction

align?:'left' | 'center' | 'right'

Horizontal alignment

Example:

Highlighting code...

Live Preview:

Primary Action

Secondary

6 Blocks

Layout Blocks

Structure and spacing blocks for page layouts

Columns

Responsive grid system with 1-6 columns and mobile stacking

Props:

columns?:number

Number of columns (1-6)

verticalAlignment?:'top' | 'center' | 'bottom'

Vertical alignment

isStackedOnMobile?:boolean

Stack columns on mobile

Example:

Highlighting code...

Live Preview:

Column 1

Content goes here

Column 2

Content goes here

Column 3

Content goes here

Group

Container wrapper with semantic HTML and layout control

Props:

layout?:'default' | 'constrained' | 'full'

Layout type

tagName?:'div' | 'section' | 'article' | 'aside'

HTML tag to use

Example:

Highlighting code...

Live Preview:

This content is inside a constrained Group block with a background color. The max-width keeps content readable on large screens.

Separator

Horizontal divider with style variants

Props:

style?:'default' | 'wide' | 'dots'

Separator style

opacity?:'default' | 'css'

Opacity level

Example:

Highlighting code...

Live Preview:

Default style:

Wide style:

Dots style:

Spacer

Vertical spacing control with configurable height

Props:

height:string | number

Height in pixels or rem

Example:

Highlighting code...

Live Preview:

Content above spacer

Content below spacer (64px gap)

Table

Responsive data tables with striped rows and horizontal scroll

Props:

head?:Array<{cells: Array<{content: string; tag: "th"}}}>

Table header

body:Array<{cells: Array<{content: string; tag: "td"}}}>

Table body

stripes?:boolean

Enable striped rows

Example:

Highlighting code...

Live Preview:

Block	Category	Server Component	Size
CoreParagraph	Content	✅ Yes	1.8KB
CoreHeading	Content	✅ Yes	3.6KB
CoreCode	Code	✅ Yes	5.8KB

Cover

Full-width background section with image and overlay

Props:

url?:string

Background image URL

alt?:string

Alt text

dimRatio?:number

Overlay opacity (0-100)

overlayColor?:string

Overlay color

minHeight?:number

Minimum height in pixels

contentPosition?:string

Content position (9 options)

Example:

Highlighting code...

Live Preview:

Cover Block

Full-width background with overlay and content positioning

Getting Started

Start using Flat-Blocks in your Next.js + WordPress project

Installation

Highlighting code...

Basic Usage

Highlighting code...

WordPress Integration

Highlighting code...

Ready to Build?

Start using Flat-Blocks in your project today. All blocks are production-ready, fully typed, and accessible.

View Documentation

GitHub Repository