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.

Quick Preview

Block Gallery

A selection of ready-to-use blocks for rapid development

Stats Card

Notification Item

Stats Card

{
  "type": "card",
  "className": "max-w-xs",
  "children": [
    {
      "type": "stack",
      "spacing": 2,
      "className": "p-4",
      "children": [
        {
          "type": "flex",
          "className": "items-center justify-between",
          "children": [
            {
              "type": "text",
              "content": "Total Revenue",
              "className": "text-sm font-medium text-muted-foreground"
            },
            {
              "type": "icon",
              "name": "dollar-sign",
              "className": "h-4 w-4 text-muted-foreground"
            }
          ]
        },
        {
          "type": "text",
          "content": "$45,231.89",
          "className": "text-2xl font-bold"
        },
        {
          "type": "text",
          "content": "+20.1% from last month",
          "className": "text-xs text-muted-foreground"
        }
      ]
    }
  ]
}

{
  "type": "card",
  "className": "max-w-sm mx-auto",
  "header": [
    {
      "type": "stack",
      "spacing": 1,
      "className": "text-center",
      "children": [
        {
          "type": "text",
          "content": "Sign In",
          "className": "text-xl font-bold"
        },
        {
          "type": "text",
          "content": "Enter your credentials",
          "className": "text-sm text-muted-foreground"
        }
      ]
    }
  ],
  "children": [
    {
      "type": "stack",
      "spacing": 3,
      "children": [
        {
          "type": "stack",
          "spacing": 2,
          "children": [
            {
              "type": "label",
              "label": "Email"
            },
            {
              "type": "input",
              "inputType": "email",
              "placeholder": "you@example.com"
            }
          ]
        },
        {
          "type": "stack",
          "spacing": 2,
          "children": [
            {
              "type": "label",
              "label": "Password"
            },
            {
              "type": "input",
              "inputType": "password",
              "placeholder": "••••••••"
            }
          ]
        },
        {
          "type": "button",
          "label": "Sign In",
          "variant": "default",
          "className": "w-full"
        }
      ]
    }
  ]
}

Notification Item

{
  "type": "flex",
  "className": "items-start gap-3 p-4 border rounded-lg max-w-md",
  "children": [
    {
      "type": "avatar",
      "fallback": "JD",
      "className": "h-10 w-10"
    },
    {
      "type": "stack",
      "spacing": 1,
      "children": [
        {
          "type": "text",
          "content": "John Doe commented on your post",
          "className": "text-sm font-medium"
        },
        {
          "type": "text",
          "content": "Great work on the new design! The color scheme looks amazing.",
          "className": "text-sm text-muted-foreground"
        },
        {
          "type": "text",
          "content": "2 minutes ago",
          "className": "text-xs text-muted-foreground"
        }
      ]
    }
  ]
}

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

Dashboard Blocks

Stats cards, metric displays, chart layouts for admin panels and dashboards.

Form Blocks

Contact forms, multi-step wizards, settings panels, and profile editors.

Marketing Blocks

Pricing tables, feature grids, testimonials, CTAs, and hero sections.

E-commerce Blocks

Product cards, shopping carts, checkout flows, and order summaries.

How to Use Blocks

Browse the block categories to find what you need
Preview the block in action with live examples
Copy the JSON schema from the code tab
Paste into your ObjectUI application
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:

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 <SchemaRenderer schema={loginBlockSchema} />;
}

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

Contributing

Have a block idea? We'd love to see it! Check out our contribution guidelines to submit your own blocks.

Building Blocks

Block Gallery

On this page