Skip to content

Commit fef1e1a

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Add interactive demos to core schemas, blocks, and enhance plugin demos
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 7b56347 commit fef1e1a

11 files changed

Lines changed: 1129 additions & 24 deletions

‎content/docs/blocks/block-schema.mdx‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ title: "Block Schema (BlockSchema)"
33
description: "Reusable component blocks with variables, slots, and marketplace support"
44
---
55

6+
import { InteractiveDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
68
# Block Schema
79

810
The `BlockSchema` defines reusable component blocks that can be configured with variables, support content injection through slots, and shared via a marketplace.
@@ -17,6 +19,143 @@ BlockSchema enables:
1719
- **Marketplace support** - Share and discover blocks
1820
- **Version control** - Track block versions
1921

22+
## Interactive Examples
23+
24+
### Feature Card Block
25+
26+
<InteractiveDemo
27+
title="Feature Card Block"
28+
description="A reusable block with configurable icon, title, description, and CTA button"
29+
schema={{
30+
type: "card",
31+
className: "max-w-sm mx-auto",
32+
children: [
33+
{
34+
type: "stack",
35+
spacing: 4,
36+
className: "items-center text-center p-4",
37+
children: [
38+
{
39+
type: "div",
40+
className: "w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center",
41+
children: [{ type: "icon", name: "Zap", className: "h-6 w-6 text-primary" }]
42+
},
43+
{ type: "text", content: "Fast Performance", className: "text-lg font-semibold" },
44+
{ type: "text", content: "Lightning-fast response times with optimized bundle sizes and edge caching support.", className: "text-sm text-muted-foreground" },
45+
{ type: "button", label: "Learn More", variant: "outline", size: "sm" }
46+
]
47+
}
48+
]
49+
}}
50+
/>
51+
52+
### Block Variations
53+
54+
<InteractiveDemo
55+
title="Block with Variable Overrides"
56+
description="The same block template rendered with different variable values"
57+
examples={[
58+
{
59+
label: "Security Feature",
60+
schema: {
61+
type: "card",
62+
className: "max-w-sm",
63+
children: [
64+
{
65+
type: "stack",
66+
spacing: 3,
67+
className: "items-center text-center p-4",
68+
children: [
69+
{ type: "div", className: "w-12 h-12 rounded-lg bg-green-500/10 flex items-center justify-center", children: [{ type: "icon", name: "Shield", className: "h-6 w-6 text-green-600" }] },
70+
{ type: "text", content: "Enterprise Security", className: "text-lg font-semibold" },
71+
{ type: "text", content: "Bank-grade encryption and SOC 2 compliance built in.", className: "text-sm text-muted-foreground" },
72+
{ type: "button", label: "See Certifications", variant: "outline", size: "sm" }
73+
]
74+
}
75+
]
76+
}
77+
},
78+
{
79+
label: "Analytics Feature",
80+
schema: {
81+
type: "card",
82+
className: "max-w-sm",
83+
children: [
84+
{
85+
type: "stack",
86+
spacing: 3,
87+
className: "items-center text-center p-4",
88+
children: [
89+
{ type: "div", className: "w-12 h-12 rounded-lg bg-purple-500/10 flex items-center justify-center", children: [{ type: "icon", name: "BarChart3", className: "h-6 w-6 text-purple-600" }] },
90+
{ type: "text", content: "Advanced Analytics", className: "text-lg font-semibold" },
91+
{ type: "text", content: "Real-time dashboards and custom report builder included.", className: "text-sm text-muted-foreground" },
92+
{ type: "button", label: "View Demo", variant: "outline", size: "sm" }
93+
]
94+
}
95+
]
96+
}
97+
}
98+
]}
99+
/>
100+
101+
### Block Marketplace Card
102+
103+
<InteractiveDemo
104+
title="Block Marketplace Listing"
105+
description="How blocks appear in the marketplace with metadata and ratings"
106+
schema={{
107+
type: "card",
108+
className: "max-w-md mx-auto",
109+
children: [
110+
{
111+
type: "div",
112+
className: "h-32 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-t-lg flex items-center justify-center",
113+
children: [{ type: "icon", name: "LayoutTemplate", className: "h-12 w-12 text-primary/60" }]
114+
},
115+
{
116+
type: "stack",
117+
spacing: 3,
118+
className: "p-4",
119+
children: [
120+
{
121+
type: "flex",
122+
className: "items-start justify-between",
123+
children: [
124+
{
125+
type: "stack",
126+
spacing: 1,
127+
children: [
128+
{ type: "text", content: "Pricing Table Pro", className: "font-semibold" },
129+
{ type: "text", content: "by ObjectUI Team", className: "text-xs text-muted-foreground" }
130+
]
131+
},
132+
{ type: "badge", label: "v2.1.0", variant: "secondary" }
133+
]
134+
},
135+
{ type: "text", content: "Professional pricing comparison table with toggle for monthly/yearly billing.", className: "text-sm text-muted-foreground" },
136+
{
137+
type: "flex",
138+
className: "gap-2 flex-wrap",
139+
children: [
140+
{ type: "badge", label: "Marketing", variant: "outline" },
141+
{ type: "badge", label: "SaaS", variant: "outline" },
142+
{ type: "badge", label: "Pricing", variant: "outline" }
143+
]
144+
},
145+
{
146+
type: "flex",
147+
className: "items-center justify-between pt-2 border-t",
148+
children: [
149+
{ type: "text", content: "★ 4.9 (234 ratings) · 5.4k installs", className: "text-xs text-muted-foreground" },
150+
{ type: "button", label: "Install", variant: "default", size: "sm" }
151+
]
152+
}
153+
]
154+
}
155+
]
156+
}}
157+
/>
158+
20159
## Basic Usage
21160

22161
```plaintext

‎content/docs/blocks/index.mdx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ title: "Building Blocks"
33
description: "Clean, modern building blocks. Copy and paste into your apps. Open Source. Free forever."
44
---
55

6+
import { InteractiveDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
68
# Building Blocks for the Web
79

810
Pre-built, production-ready UI blocks powered by ObjectUI's schema-driven architecture. Copy the JSON, paste into your application, and ship faster.
@@ -11,6 +13,89 @@ Pre-built, production-ready UI blocks powered by ObjectUI's schema-driven archit
1113

1214
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.
1315

16+
### Quick Preview
17+
18+
<InteractiveDemo
19+
title="Block Gallery"
20+
description="A selection of ready-to-use blocks for rapid development"
21+
examples={[
22+
{
23+
label: "Stats Card",
24+
schema: {
25+
type: "card",
26+
className: "max-w-xs",
27+
children: [
28+
{
29+
type: "stack",
30+
spacing: 2,
31+
className: "p-4",
32+
children: [
33+
{
34+
type: "flex",
35+
className: "items-center justify-between",
36+
children: [
37+
{ type: "text", content: "Total Revenue", className: "text-sm font-medium text-muted-foreground" },
38+
{ type: "icon", name: "DollarSign", className: "h-4 w-4 text-muted-foreground" }
39+
]
40+
},
41+
{ type: "text", content: "$45,231.89", className: "text-2xl font-bold" },
42+
{ type: "text", content: "+20.1% from last month", className: "text-xs text-muted-foreground" }
43+
]
44+
}
45+
]
46+
}
47+
},
48+
{
49+
label: "Login Card",
50+
schema: {
51+
type: "card",
52+
className: "max-w-sm mx-auto",
53+
header: [
54+
{
55+
type: "stack",
56+
spacing: 1,
57+
className: "text-center",
58+
children: [
59+
{ type: "text", content: "Sign In", className: "text-xl font-bold" },
60+
{ type: "text", content: "Enter your credentials", className: "text-sm text-muted-foreground" }
61+
]
62+
}
63+
],
64+
children: [
65+
{
66+
type: "stack",
67+
spacing: 3,
68+
children: [
69+
{ type: "stack", spacing: 2, children: [{ type: "label", label: "Email" }, { type: "input", inputType: "email", placeholder: "you@example.com" }] },
70+
{ type: "stack", spacing: 2, children: [{ type: "label", label: "Password" }, { type: "input", inputType: "password", placeholder: "••••••••" }] },
71+
{ type: "button", label: "Sign In", variant: "default", className: "w-full" }
72+
]
73+
}
74+
]
75+
}
76+
},
77+
{
78+
label: "Notification Item",
79+
schema: {
80+
type: "flex",
81+
className: "items-start gap-3 p-4 border rounded-lg max-w-md",
82+
children: [
83+
{ type: "avatar", fallback: "JD", className: "h-10 w-10" },
84+
{
85+
type: "stack",
86+
spacing: 1,
87+
children: [
88+
{ type: "text", content: "John Doe commented on your post", className: "text-sm font-medium" },
89+
{ type: "text", content: "Great work on the new design! The color scheme looks amazing.", className: "text-sm text-muted-foreground" },
90+
{ type: "text", content: "2 minutes ago", className: "text-xs text-muted-foreground" }
91+
]
92+
}
93+
]
94+
}
95+
}
96+
]}
97+
/>
98+
1499
### Why Use Blocks?
15100

16101
- 🚀 **Ship Faster** - Start with working examples instead of building from scratch

‎content/docs/core/app-schema.mdx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ title: "Application Schema (AppSchema)"
33
description: "Configure your entire application with navigation, branding, and global settings"
44
---
55

6+
import { InteractiveDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
68
# Application Schema
79

810
The `AppSchema` defines the top-level configuration for your entire ObjectUI application, including navigation menus, branding, layout strategies, and global actions.
@@ -15,6 +17,123 @@ AppSchema provides a declarative way to configure:
1517
- **Layout strategies** - Sidebar, header, or empty layout
1618
- **Global actions** - User menu, global toolbar buttons
1719

20+
## Interactive Examples
21+
22+
### Navigation Menu Preview
23+
24+
<InteractiveDemo
25+
title="Sidebar Navigation"
26+
description="A typical application sidebar menu structure with icons, groups, and badges"
27+
schema={{
28+
type: "card",
29+
className: "w-64",
30+
children: [
31+
{
32+
type: "stack",
33+
spacing: 1,
34+
children: [
35+
{
36+
type: "flex",
37+
className: "items-center gap-2 px-3 py-2 rounded-md bg-accent text-accent-foreground",
38+
children: [
39+
{ type: "icon", name: "LayoutDashboard", className: "h-4 w-4" },
40+
{ type: "text", content: "Dashboard", className: "text-sm font-medium" }
41+
]
42+
},
43+
{
44+
type: "flex",
45+
className: "items-center gap-2 px-3 py-2 rounded-md hover:bg-accent/50",
46+
children: [
47+
{ type: "icon", name: "Users", className: "h-4 w-4 text-muted-foreground" },
48+
{ type: "text", content: "Contacts", className: "text-sm" },
49+
{ type: "badge", label: "128", variant: "secondary", className: "ml-auto text-xs" }
50+
]
51+
},
52+
{
53+
type: "flex",
54+
className: "items-center gap-2 px-3 py-2 rounded-md hover:bg-accent/50",
55+
children: [
56+
{ type: "icon", name: "Target", className: "h-4 w-4 text-muted-foreground" },
57+
{ type: "text", content: "Opportunities", className: "text-sm" }
58+
]
59+
},
60+
{ type: "separator", className: "my-2" },
61+
{ type: "text", content: "Marketing", className: "px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider" },
62+
{
63+
type: "flex",
64+
className: "items-center gap-2 px-3 py-2 rounded-md hover:bg-accent/50",
65+
children: [
66+
{ type: "icon", name: "Megaphone", className: "h-4 w-4 text-muted-foreground" },
67+
{ type: "text", content: "Campaigns", className: "text-sm" }
68+
]
69+
},
70+
{
71+
type: "flex",
72+
className: "items-center gap-2 px-3 py-2 rounded-md hover:bg-accent/50",
73+
children: [
74+
{ type: "icon", name: "Mail", className: "h-4 w-4 text-muted-foreground" },
75+
{ type: "text", content: "Email Templates", className: "text-sm" }
76+
]
77+
},
78+
{ type: "separator", className: "my-2" },
79+
{
80+
type: "flex",
81+
className: "items-center gap-2 px-3 py-2 rounded-md hover:bg-accent/50",
82+
children: [
83+
{ type: "icon", name: "Settings", className: "h-4 w-4 text-muted-foreground" },
84+
{ type: "text", content: "Settings", className: "text-sm" }
85+
]
86+
}
87+
]
88+
}
89+
]
90+
}}
91+
/>
92+
93+
### Application Header Bar
94+
95+
<InteractiveDemo
96+
title="Application Header"
97+
description="Top bar with branding, global search, and user actions"
98+
schema={{
99+
type: "flex",
100+
className: "items-center justify-between p-3 border rounded-lg bg-background",
101+
children: [
102+
{
103+
type: "flex",
104+
className: "items-center gap-3",
105+
children: [
106+
{ type: "icon", name: "Box", className: "h-6 w-6 text-primary" },
107+
{ type: "text", content: "Acme CRM", className: "font-semibold text-lg" }
108+
]
109+
},
110+
{
111+
type: "flex",
112+
className: "items-center gap-2",
113+
children: [
114+
{ type: "button", label: "Quick Actions", variant: "outline", size: "sm", icon: "Zap" },
115+
{ type: "button", label: "Notifications", variant: "ghost", size: "sm", icon: "Bell" },
116+
{
117+
type: "flex",
118+
className: "items-center gap-2 ml-2 pl-2 border-l",
119+
children: [
120+
{ type: "avatar", fallback: "JD", className: "h-8 w-8" },
121+
{
122+
type: "stack",
123+
spacing: 0,
124+
children: [
125+
{ type: "text", content: "John Doe", className: "text-sm font-medium leading-none" },
126+
{ type: "text", content: "john@acme.com", className: "text-xs text-muted-foreground" }
127+
]
128+
}
129+
]
130+
}
131+
]
132+
}
133+
]
134+
}}
135+
/>
136+
18137
## Basic Usage
19138

20139
```plaintext

0 commit comments

Comments
 (0)