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",