diff --git a/content/docs/blocks/authentication.mdx b/content/docs/blocks/authentication.mdx
new file mode 100644
index 000000000..00b435d01
--- /dev/null
+++ b/content/docs/blocks/authentication.mdx
@@ -0,0 +1,532 @@
+---
+title: "Authentication Blocks"
+description: "Login forms, signup pages, and authentication flows"
+---
+
+import { InteractiveDemo } from '@/app/components/ComponentDemo';
+
+# Authentication Blocks
+
+Beautiful, accessible authentication forms and flows. Copy the JSON schema and integrate into your application.
+
+## Login Form
+
+A clean login form with email and password fields.
+
+
+
+## Sign Up Form
+
+Complete registration form with validation.
+
+
+
+## Forgot Password
+
+Password reset request form.
+
+
+
+## Two-Factor Authentication
+
+2FA verification code input.
+
+
+
+## Usage
+
+All authentication blocks can be customized by modifying the schema. Common customizations include:
+
+### Change Colors
+
+```json
+{
+ "type": "button",
+ "className": "bg-blue-600 hover:bg-blue-700"
+}
+```
+
+### Add Data Sources
+
+```json
+{
+ "type": "button",
+ "label": "Sign In",
+ "action": {
+ "type": "submit",
+ "endpoint": "/api/auth/login",
+ "method": "POST"
+ }
+}
+```
+
+### Customize Layout
+
+```json
+{
+ "type": "card",
+ "className": "max-w-lg p-8"
+}
+```
+
+## Next Steps
+
+- Browse [Dashboard Blocks](/docs/blocks/dashboard)
+- Explore [Form Blocks](/docs/blocks/forms)
+- Learn about [Actions](/docs/guide/actions)
diff --git a/content/docs/blocks/dashboard.mdx b/content/docs/blocks/dashboard.mdx
new file mode 100644
index 000000000..00b380a8e
--- /dev/null
+++ b/content/docs/blocks/dashboard.mdx
@@ -0,0 +1,725 @@
+---
+title: "Dashboard Blocks"
+description: "Stats cards, metrics, and dashboard layouts"
+---
+
+import { InteractiveDemo } from '@/app/components/ComponentDemo';
+
+# Dashboard Blocks
+
+Professional dashboard components for displaying metrics, statistics, and data visualizations.
+
+## Stats Card
+
+Display key metrics with trend indicators.
+
+
+
+## Recent Activity
+
+Display recent user activities or transactions.
+
+
+
+## Overview Dashboard
+
+Complete dashboard layout with multiple sections.
+
+
+
+## Usage
+
+Customize dashboard blocks for your needs:
+
+### Add Real Data
+
+```json
+{
+ "type": "card",
+ "dataSource": {
+ "api": "/api/stats/revenue",
+ "method": "GET"
+ }
+}
+```
+
+### Customize Colors
+
+```json
+{
+ "type": "text",
+ "content": "+20.1%",
+ "className": "text-emerald-500"
+}
+```
+
+### Add Actions
+
+```json
+{
+ "type": "button",
+ "label": "View Details",
+ "action": {
+ "type": "navigate",
+ "path": "/dashboard/details"
+ }
+}
+```
+
+## Next Steps
+
+- Explore [Form Blocks](/docs/blocks/forms)
+- View [Marketing Blocks](/docs/blocks/marketing)
+- Learn about [Data Sources](/docs/guide/data-source)
diff --git a/content/docs/blocks/ecommerce.mdx b/content/docs/blocks/ecommerce.mdx
new file mode 100644
index 000000000..7b596aaee
--- /dev/null
+++ b/content/docs/blocks/ecommerce.mdx
@@ -0,0 +1,928 @@
+---
+title: "E-commerce Blocks"
+description: "Product cards, checkout flows, and shopping components"
+---
+
+import { InteractiveDemo } from '@/app/components/ComponentDemo';
+
+# E-commerce Blocks
+
+Professional e-commerce components for online stores and marketplaces.
+
+## Product Card
+
+Product display with image, title, price, and actions.
+
+
+
+## Product Grid
+
+Multiple products in a responsive grid.
+
+
+
+## Shopping Cart
+
+Cart summary with items and checkout.
+
+
+
+## Order Summary
+
+Checkout order review.
+
+
+
+## Usage
+
+Customize e-commerce blocks for your store:
+
+### Add Product Data
+
+```json
+{
+ "type": "card",
+ "dataSource": {
+ "api": "/api/products",
+ "method": "GET"
+ }
+}
+```
+
+### Add to Cart Action
+
+```json
+{
+ "type": "button",
+ "label": "Add to Cart",
+ "action": {
+ "type": "submit",
+ "endpoint": "/api/cart",
+ "method": "POST"
+ }
+}
+```
+
+### Customize Pricing Display
+
+```json
+{
+ "type": "text",
+ "content": "$299.99",
+ "className": "text-2xl font-bold text-primary"
+}
+```
+
+## Next Steps
+
+- Browse [Authentication Blocks](/docs/blocks/authentication)
+- Explore [Dashboard Blocks](/docs/blocks/dashboard)
+- Learn about [Actions](/docs/guide/actions)
diff --git a/content/docs/blocks/forms.mdx b/content/docs/blocks/forms.mdx
new file mode 100644
index 000000000..b2866f9d9
--- /dev/null
+++ b/content/docs/blocks/forms.mdx
@@ -0,0 +1,717 @@
+---
+title: "Form Blocks"
+description: "Contact forms, settings panels, and form layouts"
+---
+
+import { InteractiveDemo } from '@/app/components/ComponentDemo';
+
+# Form Blocks
+
+Professional form layouts for various use cases. All forms are accessible and include proper validation.
+
+## Contact Form
+
+Simple contact form with name, email, and message fields.
+
+
+
+## Settings Form
+
+User settings panel with various input types.
+
+
+
+## Newsletter Signup
+
+Simple newsletter subscription form.
+
+
+
+## Payment Form
+
+Payment details form with card information.
+
+
+
+## Usage
+
+Customize form blocks for your application:
+
+### Add Validation
+
+```json
+{
+ "type": "input",
+ "name": "email",
+ "inputType": "email",
+ "required": true,
+ "validation": {
+ "pattern": "^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$",
+ "message": "Please enter a valid email address"
+ }
+}
+```
+
+### Add Submit Action
+
+```json
+{
+ "type": "button",
+ "label": "Submit",
+ "action": {
+ "type": "submit",
+ "endpoint": "/api/contact",
+ "method": "POST"
+ }
+}
+```
+
+### Customize Layout
+
+```json
+{
+ "type": "div",
+ "className": "grid grid-cols-1 md:grid-cols-2 gap-6"
+}
+```
+
+## Next Steps
+
+- Browse [Marketing Blocks](/docs/blocks/marketing)
+- Explore [E-commerce Blocks](/docs/blocks/ecommerce)
+- Learn about [Form Validation](/docs/guide/fields)
diff --git a/content/docs/blocks/index.mdx b/content/docs/blocks/index.mdx
new file mode 100644
index 000000000..d08034fff
--- /dev/null
+++ b/content/docs/blocks/index.mdx
@@ -0,0 +1,110 @@
+---
+title: "Building Blocks"
+description: "Clean, modern building blocks. Copy and paste into your apps. Open Source. Free forever."
+---
+
+# Building Blocks for the Web
+
+Pre-built, production-ready UI blocks powered by ObjectUI's schema-driven architecture. Copy the JSON, paste into your application, and ship faster.
+
+## What are Blocks?
+
+Blocks are complete, ready-to-use UI patterns built with ObjectUI components. Unlike individual components, blocks are composed sections like login forms, pricing tables, dashboard cards, and moreโready to be dropped into your application.
+
+### Why Use Blocks?
+
+- ๐ **Ship Faster** - Start with working examples instead of building from scratch
+- ๐ **Copy & Paste** - Simple JSON schemas you can copy directly into your project
+- ๐จ **Beautiful Design** - Built with Tailwind CSS and Shadcn UI
+- โฟ๏ธ **Accessible** - WCAG 2.1 AA compliant
+- ๐ **Theme Ready** - Supports light and dark modes out of the box
+- ๐ฑ **Responsive** - Mobile-first design that works everywhere
+
+## Available Block Categories
+
+### [Authentication Blocks](/docs/blocks/authentication)
+
+Login forms, signup pages, password reset flows, and more.
+
+### [Dashboard Blocks](/docs/blocks/dashboard)
+
+Stats cards, metric displays, chart layouts for admin panels and dashboards.
+
+### [Form Blocks](/docs/blocks/forms)
+
+Contact forms, multi-step wizards, settings panels, and profile editors.
+
+### [Marketing Blocks](/docs/blocks/marketing)
+
+Pricing tables, feature grids, testimonials, CTAs, and hero sections.
+
+### [E-commerce Blocks](/docs/blocks/ecommerce)
+
+Product cards, shopping carts, checkout flows, and order summaries.
+
+## How to Use Blocks
+
+1. **Browse** the block categories to find what you need
+2. **Preview** the block in action with live examples
+3. **Copy** the JSON schema from the code tab
+4. **Paste** into your ObjectUI application
+5. **Customize** by modifying the schema to match your needs
+
+### Example: Using a Block
+
+All blocks are defined as JSON schemas. Here's how simple it is:
+
+```tsx
+import { SchemaRenderer } from '@object-ui/react';
+
+// Copy this JSON from any block
+const loginBlockSchema = {
+ type: "card",
+ className: "max-w-md mx-auto",
+ children: [
+ // ... block schema here
+ ]
+};
+
+// Render it in your app
+function App() {
+ return ;
+}
+```
+
+## Customization
+
+Every block is fully customizable:
+
+- **Styling**: Add or modify `className` properties with Tailwind classes
+- **Content**: Change text, labels, and placeholders
+- **Layout**: Adjust spacing, sizing, and arrangement
+- **Behavior**: Add actions, data sources, and expressions
+- **Themes**: Works automatically with your theme configuration
+
+## Block Architecture
+
+All blocks follow ObjectUI best practices:
+
+- Built with composable components
+- Use semantic HTML structure
+- Follow accessibility guidelines
+- Leverage Tailwind utility classes
+- Support responsive breakpoints
+- Include proper ARIA attributes
+
+## Open Source & Free Forever
+
+All blocks are open source under the MIT license. Use them in personal projects, commercial applications, or as inspiration for your own designs.
+
+## Next Steps
+
+- Browse [Authentication Blocks](/docs/blocks/authentication)
+- Explore [Dashboard Blocks](/docs/blocks/dashboard)
+- Check out [Form Blocks](/docs/blocks/forms)
+- View [Marketing Blocks](/docs/blocks/marketing)
+- Discover [E-commerce Blocks](/docs/blocks/ecommerce)
+
+## Contributing
+
+Have a block idea? We'd love to see it! Check out our [contribution guidelines](https://github.com/objectstack-ai/objectui/blob/main/CONTRIBUTING.md) to submit your own blocks.
diff --git a/content/docs/blocks/marketing.mdx b/content/docs/blocks/marketing.mdx
new file mode 100644
index 000000000..f455bed01
--- /dev/null
+++ b/content/docs/blocks/marketing.mdx
@@ -0,0 +1,1036 @@
+---
+title: "Marketing Blocks"
+description: "Pricing tables, hero sections, and marketing components"
+---
+
+import { InteractiveDemo } from '@/app/components/ComponentDemo';
+
+# Marketing Blocks
+
+Professional marketing components for landing pages and promotional content.
+
+## Pricing Cards
+
+Responsive pricing table with three tiers.
+
+
+
+## Feature Grid
+
+Showcase product features in a grid layout.
+
+
+
+## CTA Section
+
+Call-to-action section for conversions.
+
+
+
+## Testimonials
+
+Customer testimonials and social proof.
+
+
+
+## Usage
+
+Customize marketing blocks for your campaigns:
+
+### Update Colors
+
+```json
+{
+ "type": "card",
+ "className": "bg-gradient-to-r from-blue-600 to-purple-600"
+}
+```
+
+### Add Analytics
+
+```json
+{
+ "type": "button",
+ "label": "Get Started",
+ "action": {
+ "type": "analytics",
+ "event": "cta_clicked"
+ }
+}
+```
+
+### Customize Content
+
+```json
+{
+ "type": "text",
+ "content": "Your custom headline here",
+ "className": "text-4xl font-bold"
+}
+```
+
+## Next Steps
+
+- Browse [E-commerce Blocks](/docs/blocks/ecommerce)
+- Explore [Authentication Blocks](/docs/blocks/authentication)
+- Learn about [Theming](/docs/guide/theming)
diff --git a/content/docs/blocks/meta.json b/content/docs/blocks/meta.json
new file mode 100644
index 000000000..6d9ecd7f2
--- /dev/null
+++ b/content/docs/blocks/meta.json
@@ -0,0 +1,10 @@
+{
+ "title": "Blocks",
+ "pages": [
+ "authentication",
+ "dashboard",
+ "forms",
+ "marketing",
+ "ecommerce"
+ ]
+}
diff --git a/content/docs/meta.json b/content/docs/meta.json
index e3608747f..20dfb8951 100644
--- a/content/docs/meta.json
+++ b/content/docs/meta.json
@@ -1,6 +1,7 @@
{
"pages": [
"guide",
+ "blocks",
"core",
"fields",
"components",