|
| 1 | +--- |
| 2 | +title: "Building Blocks" |
| 3 | +description: "Clean, modern building blocks. Copy and paste into your apps. Open Source. Free forever." |
| 4 | +--- |
| 5 | + |
| 6 | +# Building Blocks for the Web |
| 7 | + |
| 8 | +Pre-built, production-ready UI blocks powered by ObjectUI's schema-driven architecture. Copy the JSON, paste into your application, and ship faster. |
| 9 | + |
| 10 | +## What are Blocks? |
| 11 | + |
| 12 | +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. |
| 13 | + |
| 14 | +### Why Use Blocks? |
| 15 | + |
| 16 | +- 🚀 **Ship Faster** - Start with working examples instead of building from scratch |
| 17 | +- 📋 **Copy & Paste** - Simple JSON schemas you can copy directly into your project |
| 18 | +- 🎨 **Beautiful Design** - Built with Tailwind CSS and Shadcn UI |
| 19 | +- ♿️ **Accessible** - WCAG 2.1 AA compliant |
| 20 | +- 🌓 **Theme Ready** - Supports light and dark modes out of the box |
| 21 | +- 📱 **Responsive** - Mobile-first design that works everywhere |
| 22 | + |
| 23 | +## Available Block Categories |
| 24 | + |
| 25 | +### [Authentication Blocks](/docs/blocks/authentication) |
| 26 | + |
| 27 | +Login forms, signup pages, password reset flows, and more. |
| 28 | + |
| 29 | +### [Dashboard Blocks](/docs/blocks/dashboard) |
| 30 | + |
| 31 | +Stats cards, metric displays, chart layouts for admin panels and dashboards. |
| 32 | + |
| 33 | +### [Form Blocks](/docs/blocks/forms) |
| 34 | + |
| 35 | +Contact forms, multi-step wizards, settings panels, and profile editors. |
| 36 | + |
| 37 | +### [Marketing Blocks](/docs/blocks/marketing) |
| 38 | + |
| 39 | +Pricing tables, feature grids, testimonials, CTAs, and hero sections. |
| 40 | + |
| 41 | +### [E-commerce Blocks](/docs/blocks/ecommerce) |
| 42 | + |
| 43 | +Product cards, shopping carts, checkout flows, and order summaries. |
| 44 | + |
| 45 | +## How to Use Blocks |
| 46 | + |
| 47 | +1. **Browse** the block categories to find what you need |
| 48 | +2. **Preview** the block in action with live examples |
| 49 | +3. **Copy** the JSON schema from the code tab |
| 50 | +4. **Paste** into your ObjectUI application |
| 51 | +5. **Customize** by modifying the schema to match your needs |
| 52 | + |
| 53 | +### Example: Using a Block |
| 54 | + |
| 55 | +All blocks are defined as JSON schemas. Here's how simple it is: |
| 56 | + |
| 57 | +```tsx |
| 58 | +import { SchemaRenderer } from '@object-ui/react'; |
| 59 | + |
| 60 | +// Copy this JSON from any block |
| 61 | +const loginBlockSchema = { |
| 62 | + type: "card", |
| 63 | + className: "max-w-md mx-auto", |
| 64 | + children: [ |
| 65 | + // ... block schema here |
| 66 | + ] |
| 67 | +}; |
| 68 | + |
| 69 | +// Render it in your app |
| 70 | +function App() { |
| 71 | + return <SchemaRenderer schema={loginBlockSchema} />; |
| 72 | +} |
| 73 | +``` |
| 74 | + |
| 75 | +## Customization |
| 76 | + |
| 77 | +Every block is fully customizable: |
| 78 | + |
| 79 | +- **Styling**: Add or modify `className` properties with Tailwind classes |
| 80 | +- **Content**: Change text, labels, and placeholders |
| 81 | +- **Layout**: Adjust spacing, sizing, and arrangement |
| 82 | +- **Behavior**: Add actions, data sources, and expressions |
| 83 | +- **Themes**: Works automatically with your theme configuration |
| 84 | + |
| 85 | +## Block Architecture |
| 86 | + |
| 87 | +All blocks follow ObjectUI best practices: |
| 88 | + |
| 89 | +- Built with composable components |
| 90 | +- Use semantic HTML structure |
| 91 | +- Follow accessibility guidelines |
| 92 | +- Leverage Tailwind utility classes |
| 93 | +- Support responsive breakpoints |
| 94 | +- Include proper ARIA attributes |
| 95 | + |
| 96 | +## Open Source & Free Forever |
| 97 | + |
| 98 | +All blocks are open source under the MIT license. Use them in personal projects, commercial applications, or as inspiration for your own designs. |
| 99 | + |
| 100 | +## Next Steps |
| 101 | + |
| 102 | +- Browse [Authentication Blocks](/docs/blocks/authentication) |
| 103 | +- Explore [Dashboard Blocks](/docs/blocks/dashboard) |
| 104 | +- Check out [Form Blocks](/docs/blocks/forms) |
| 105 | +- View [Marketing Blocks](/docs/blocks/marketing) |
| 106 | +- Discover [E-commerce Blocks](/docs/blocks/ecommerce) |
| 107 | + |
| 108 | +## Contributing |
| 109 | + |
| 110 | +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. |
0 commit comments