Introduction

Welcome to the official Renblox Documentation — a modular system of pre-built, production-ready website sections and UI components built using Next.js and Tailwind CSS.

Renblox is designed to help developers, designers, and agencies build websites faster by combining clean, reusable, and scalable components with consistent naming guidelines and layout patterns.

What is Renblox?

Renblox is a section-based component library — each “block” or “section” represents a visually complete part of a webpage (like a Hero, Feature, or Footer). Every section is built using modern best practices and optimized for customization, speed, and responsive design.

Each section is self-contained with its own HTML/JSX, CSS (via Tailwind), and animation logic.
Sections are organized by type — e.g. hero, feature, pricing, testimonial, cta, footer, etc.
Variants are named systematically using a clear, consistent naming guideline (see Naming Guideline).

Website Overview

The Renblox website is structured into several key pages, each serving a distinct purpose in the component creation and design workflow. Below is a quick overview of what each main page represents:

/blocks — The core framework containing all available blocks, categorized by section type. Each block is a complete, production-ready layout that can be reused across different projects.
/page-builder — A visual preview area showcasing multiple blocks arranged together, like a wireframe or low-fidelity prototype. It helps you explore layout possibilities and experiment with section combinations.
/component-variations — A library of smaller, reusable UI components extracted from blocks. These elements (buttons, cards, stats, etc.) can be customized and recombined to create new layouts efficiently.
/external-tools — A curated collection of external utilities and design/development aids. These tools complement Renblox by helping you streamline workflows such as design export, code optimization, and deployment.

Together, these pages form a complete ecosystem — from exploring prebuilt blocks to assembling custom layouts and enhancing your workflow with supporting tools.

Core Principles

Consistency: Every file, folder, and component follows the same naming and organizational rules.
Scalability: The structure scales as your component library grows — new sections, layouts, or variants fit seamlessly.
Clarity: Each section’s name reflects its type, layout, and variation.

Naming Guideline

To ensure clean organization, each section follows a standardized naming pattern:

section-name + variation(optional) + number + sub-variation(optional)

For example: hero-a-one → Hero section with common layout version one.
See the full Naming Guideline page for detailed rules.

Getting Started

Set up a Next.js project with Tailwind CSS, and initialize ShadCN UI with all components. You can also follow the Prerequisite page for detailed steps.
Navigate to the /blocks page to explore available blocks.
Choose a block you like, then copy or download the code into your project.
Customize it to match your design and use it wherever needed.