@shipsite.dev/components 0.2.65 → 0.2.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +1386 -217
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/layout/Header.js +1 -1
- package/dist/layout/Header.js.map +1 -1
- package/dist/lib/use-form-submit.d.ts.map +1 -1
- package/dist/lib/use-form-submit.js +7 -0
- package/dist/lib/use-form-submit.js.map +1 -1
- package/dist/marketing/Companies.d.ts +2 -1
- package/dist/marketing/Companies.d.ts.map +1 -1
- package/dist/marketing/Companies.js +2 -2
- package/dist/marketing/Companies.js.map +1 -1
- package/dist/marketing/Hero.d.ts +2 -1
- package/dist/marketing/Hero.d.ts.map +1 -1
- package/dist/marketing/Hero.js +4 -2
- package/dist/marketing/Hero.js.map +1 -1
- package/dist/marketing/Location.d.ts +23 -0
- package/dist/marketing/Location.d.ts.map +1 -0
- package/dist/marketing/Location.js +22 -0
- package/dist/marketing/Location.js.map +1 -0
- package/dist/ui/navigation-menu.js +1 -1
- package/dist/ui/navigation-menu.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +1 -0
- package/src/layout/Header.tsx +1 -1
- package/src/lib/use-form-submit.ts +8 -0
- package/src/marketing/Companies.tsx +4 -3
- package/src/marketing/Hero.tsx +15 -6
- package/src/marketing/Location.tsx +112 -0
- package/src/ui/navigation-menu.tsx +1 -1
package/components.json
CHANGED
|
@@ -4,16 +4,62 @@
|
|
|
4
4
|
{
|
|
5
5
|
"name": "Hero",
|
|
6
6
|
"category": "marketing",
|
|
7
|
-
"description": "Full-width hero section with animated title, description, optional badge, primary/secondary CTAs, and a responsive device mockup image. Uses a top glow effect for visual emphasis.",
|
|
7
|
+
"description": "Full-width hero section with animated title, description, optional badge, primary/secondary CTAs, and a responsive device mockup image. Uses a top glow effect for visual emphasis. Supports a compact size for landing pages with reduced padding and smaller typography.",
|
|
8
8
|
"props": [
|
|
9
|
-
{
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
{
|
|
16
|
-
|
|
9
|
+
{
|
|
10
|
+
"name": "id",
|
|
11
|
+
"type": "string",
|
|
12
|
+
"required": false,
|
|
13
|
+
"description": "HTML id for anchor links (e.g. id=\"pricing\" enables #pricing navigation)."
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"name": "title",
|
|
17
|
+
"type": "string",
|
|
18
|
+
"required": true,
|
|
19
|
+
"description": "Main headline text displayed as an h1."
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"name": "description",
|
|
23
|
+
"type": "string",
|
|
24
|
+
"required": true,
|
|
25
|
+
"description": "Supporting paragraph text below the title."
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "primaryCta",
|
|
29
|
+
"type": "{ label: string; href: string }",
|
|
30
|
+
"required": false,
|
|
31
|
+
"description": "Primary call-to-action button with label and link."
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "secondaryCta",
|
|
35
|
+
"type": "{ label: string; href: string }",
|
|
36
|
+
"required": false,
|
|
37
|
+
"description": "Secondary call-to-action button rendered with the glow variant."
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"name": "badge",
|
|
41
|
+
"type": "string",
|
|
42
|
+
"required": false,
|
|
43
|
+
"description": "Small badge text displayed above the title."
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"name": "image",
|
|
47
|
+
"type": "ImageSource",
|
|
48
|
+
"required": false,
|
|
49
|
+
"description": "Hero image displayed inside a responsive device mockup. Pass a string URL or { light, dark } for theme-aware images."
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"name": "size",
|
|
53
|
+
"type": "'default' | 'compact'",
|
|
54
|
+
"required": false,
|
|
55
|
+
"description": "Hero size variant. 'compact' reduces padding, font sizes, and spacing — ideal for landing pages that need less whitespace."
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "children",
|
|
59
|
+
"type": "React.ReactNode",
|
|
60
|
+
"required": false,
|
|
61
|
+
"description": "Optional additional content rendered below the CTA buttons."
|
|
62
|
+
}
|
|
17
63
|
],
|
|
18
64
|
"example": "<Hero\n title=\"Build your SaaS faster\"\n description=\"Ship production-ready landing pages in minutes.\"\n badge=\"New Release\"\n primaryCta={{ label: \"Get Started\", href: \"/signup\" }}\n secondaryCta={{ label: \"Learn More\", href: \"/docs\" }}\n image=\"/images/hero-screenshot.png\"\n/>"
|
|
19
65
|
},
|
|
@@ -22,9 +68,24 @@
|
|
|
22
68
|
"category": "marketing",
|
|
23
69
|
"description": "Individual feature card with an optional icon, title, and description. Used as a child of the Features grid component.",
|
|
24
70
|
"props": [
|
|
25
|
-
{
|
|
26
|
-
|
|
27
|
-
|
|
71
|
+
{
|
|
72
|
+
"name": "icon",
|
|
73
|
+
"type": "React.ReactNode",
|
|
74
|
+
"required": false,
|
|
75
|
+
"description": "Icon element displayed in a rounded container above the title."
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"name": "title",
|
|
79
|
+
"type": "string",
|
|
80
|
+
"required": true,
|
|
81
|
+
"description": "Feature heading text."
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "description",
|
|
85
|
+
"type": "string",
|
|
86
|
+
"required": true,
|
|
87
|
+
"description": "Short description of the feature."
|
|
88
|
+
}
|
|
28
89
|
],
|
|
29
90
|
"example": "<Feature title=\"Fast\" description=\"Blazing fast performance out of the box.\" />"
|
|
30
91
|
},
|
|
@@ -33,11 +94,36 @@
|
|
|
33
94
|
"category": "marketing",
|
|
34
95
|
"description": "Section that displays a grid of Feature cards with an optional section title and description. Supports 2, 3, or 4 column layouts.",
|
|
35
96
|
"props": [
|
|
36
|
-
{
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
97
|
+
{
|
|
98
|
+
"name": "id",
|
|
99
|
+
"type": "string",
|
|
100
|
+
"required": false,
|
|
101
|
+
"description": "HTML id for anchor links (e.g. id=\"features\" enables #features navigation)."
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"name": "title",
|
|
105
|
+
"type": "string",
|
|
106
|
+
"required": false,
|
|
107
|
+
"description": "Section heading displayed above the grid."
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"name": "description",
|
|
111
|
+
"type": "string",
|
|
112
|
+
"required": false,
|
|
113
|
+
"description": "Section subheading text."
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"name": "columns",
|
|
117
|
+
"type": "2 | 3 | 4",
|
|
118
|
+
"required": false,
|
|
119
|
+
"description": "Number of grid columns. Defaults to 3."
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"name": "children",
|
|
123
|
+
"type": "React.ReactNode",
|
|
124
|
+
"required": true,
|
|
125
|
+
"description": "Feature child components to render in the grid."
|
|
126
|
+
}
|
|
41
127
|
],
|
|
42
128
|
"example": "<Features title=\"Why choose us\" columns={3}>\n <Feature title=\"Fast\" description=\"Blazing fast performance.\" />\n <Feature title=\"Secure\" description=\"Enterprise-grade security.\" />\n <Feature title=\"Scalable\" description=\"Grows with your business.\" />\n</Features>"
|
|
43
129
|
},
|
|
@@ -46,9 +132,24 @@
|
|
|
46
132
|
"category": "marketing",
|
|
47
133
|
"description": "Individual bullet-point item within an AlternatingFeatureRow. Displays an optional icon, title, and description.",
|
|
48
134
|
"props": [
|
|
49
|
-
{
|
|
50
|
-
|
|
51
|
-
|
|
135
|
+
{
|
|
136
|
+
"name": "icon",
|
|
137
|
+
"type": "string",
|
|
138
|
+
"required": false,
|
|
139
|
+
"description": "Icon or emoji displayed to the left of the title."
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": "title",
|
|
143
|
+
"type": "string",
|
|
144
|
+
"required": true,
|
|
145
|
+
"description": "Item heading text."
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"name": "description",
|
|
149
|
+
"type": "string",
|
|
150
|
+
"required": true,
|
|
151
|
+
"description": "Short item description."
|
|
152
|
+
}
|
|
52
153
|
],
|
|
53
154
|
"example": "<AlternatingFeatureItem icon=\"⚡\" title=\"Lightning fast\" description=\"Sub-second load times.\" />"
|
|
54
155
|
},
|
|
@@ -57,11 +158,36 @@
|
|
|
57
158
|
"category": "marketing",
|
|
58
159
|
"description": "A two-column row with text content on one side and a responsive mockup image on the other. Even rows automatically flip the layout. Supports light/dark mode images.",
|
|
59
160
|
"props": [
|
|
60
|
-
{
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
161
|
+
{
|
|
162
|
+
"name": "title",
|
|
163
|
+
"type": "string",
|
|
164
|
+
"required": true,
|
|
165
|
+
"description": "Row heading text."
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"name": "description",
|
|
169
|
+
"type": "string",
|
|
170
|
+
"required": false,
|
|
171
|
+
"description": "Row description paragraph."
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"name": "image",
|
|
175
|
+
"type": "ImageSource",
|
|
176
|
+
"required": true,
|
|
177
|
+
"description": "Feature image. Pass a string URL or { light, dark } for theme-aware images."
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"name": "imageAlt",
|
|
181
|
+
"type": "string",
|
|
182
|
+
"required": false,
|
|
183
|
+
"description": "Alt text for the image. Defaults to the title."
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"name": "children",
|
|
187
|
+
"type": "React.ReactNode",
|
|
188
|
+
"required": false,
|
|
189
|
+
"description": "AlternatingFeatureItem children rendered below the description."
|
|
190
|
+
}
|
|
65
191
|
],
|
|
66
192
|
"example": "<AlternatingFeatureRow\n title=\"Dashboard\"\n description=\"Manage everything from one place.\"\n image=\"/images/dashboard.png\"\n>\n <AlternatingFeatureItem icon=\"📊\" title=\"Analytics\" description=\"Real-time insights.\" />\n</AlternatingFeatureRow>"
|
|
67
193
|
},
|
|
@@ -70,10 +196,30 @@
|
|
|
70
196
|
"category": "marketing",
|
|
71
197
|
"description": "Container section for alternating feature rows. Renders rows with alternating text/image layout separated by dividers.",
|
|
72
198
|
"props": [
|
|
73
|
-
{
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
199
|
+
{
|
|
200
|
+
"name": "id",
|
|
201
|
+
"type": "string",
|
|
202
|
+
"required": false,
|
|
203
|
+
"description": "HTML id for anchor links (e.g. id=\"features\" enables #features navigation)."
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"name": "title",
|
|
207
|
+
"type": "string",
|
|
208
|
+
"required": false,
|
|
209
|
+
"description": "Section heading displayed above the rows."
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": "description",
|
|
213
|
+
"type": "string",
|
|
214
|
+
"required": false,
|
|
215
|
+
"description": "Section subheading text."
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"name": "children",
|
|
219
|
+
"type": "React.ReactNode",
|
|
220
|
+
"required": true,
|
|
221
|
+
"description": "AlternatingFeatureRow children."
|
|
222
|
+
}
|
|
77
223
|
],
|
|
78
224
|
"example": "<AlternatingFeatures title=\"Features\">\n <AlternatingFeatureRow title=\"Feature 1\" image=\"/images/f1.png\" />\n <AlternatingFeatureRow title=\"Feature 2\" image=\"/images/f2.png\" />\n</AlternatingFeatures>"
|
|
79
225
|
},
|
|
@@ -82,13 +228,48 @@
|
|
|
82
228
|
"category": "marketing",
|
|
83
229
|
"description": "Data-only component that defines a single pricing plan. Must be used as a child of PricingSection. Renders nothing on its own; its props are consumed by the parent.",
|
|
84
230
|
"props": [
|
|
85
|
-
{
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
{
|
|
231
|
+
{
|
|
232
|
+
"name": "name",
|
|
233
|
+
"type": "string",
|
|
234
|
+
"required": true,
|
|
235
|
+
"description": "Plan name (e.g. 'Free', 'Pro', 'Enterprise')."
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"name": "price",
|
|
239
|
+
"type": "string",
|
|
240
|
+
"required": true,
|
|
241
|
+
"description": "Monthly price display string (e.g. '$0', '$29/mo')."
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
"name": "yearlyPrice",
|
|
245
|
+
"type": "string",
|
|
246
|
+
"required": false,
|
|
247
|
+
"description": "Yearly price display string. Enables the monthly/yearly toggle when at least one plan has this."
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"name": "description",
|
|
251
|
+
"type": "string",
|
|
252
|
+
"required": false,
|
|
253
|
+
"description": "Short plan description."
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"name": "features",
|
|
257
|
+
"type": "string[]",
|
|
258
|
+
"required": true,
|
|
259
|
+
"description": "List of feature strings displayed as a checklist."
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"name": "cta",
|
|
263
|
+
"type": "{ label: string; href: string }",
|
|
264
|
+
"required": true,
|
|
265
|
+
"description": "Call-to-action button for the plan."
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"name": "popular",
|
|
269
|
+
"type": "boolean",
|
|
270
|
+
"required": false,
|
|
271
|
+
"description": "Highlights the plan with a 'Most Popular' badge and ring styling."
|
|
272
|
+
}
|
|
92
273
|
],
|
|
93
274
|
"example": "<PricingPlan\n name=\"Pro\"\n price=\"$29/mo\"\n yearlyPrice=\"$24/mo\"\n description=\"For growing teams\"\n features={[\"Unlimited projects\", \"Priority support\", \"Custom domains\"]}\n cta={{ label: \"Get Started\", href: \"/signup\" }}\n popular\n/>"
|
|
94
275
|
},
|
|
@@ -97,8 +278,18 @@
|
|
|
97
278
|
"category": "marketing",
|
|
98
279
|
"description": "Data-only component that defines a row in the pricing comparison table. Must be used as a child of PricingSection.",
|
|
99
280
|
"props": [
|
|
100
|
-
{
|
|
101
|
-
|
|
281
|
+
{
|
|
282
|
+
"name": "feature",
|
|
283
|
+
"type": "string",
|
|
284
|
+
"required": true,
|
|
285
|
+
"description": "Feature name displayed in the first column."
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"name": "values",
|
|
289
|
+
"type": "(string | boolean)[]",
|
|
290
|
+
"required": true,
|
|
291
|
+
"description": "Array of values per plan. Booleans render as check/dash icons; strings render as text."
|
|
292
|
+
}
|
|
102
293
|
],
|
|
103
294
|
"example": "<ComparisonRow feature=\"Custom domains\" values={[false, true, true]} />"
|
|
104
295
|
},
|
|
@@ -107,7 +298,12 @@
|
|
|
107
298
|
"category": "marketing",
|
|
108
299
|
"description": "Data-only component that adds a category header row in the pricing comparison table. Must be used as a child of PricingSection.",
|
|
109
300
|
"props": [
|
|
110
|
-
{
|
|
301
|
+
{
|
|
302
|
+
"name": "title",
|
|
303
|
+
"type": "string",
|
|
304
|
+
"required": true,
|
|
305
|
+
"description": "Category heading text."
|
|
306
|
+
}
|
|
111
307
|
],
|
|
112
308
|
"example": "<ComparisonCategory title=\"Core Features\" />"
|
|
113
309
|
},
|
|
@@ -116,25 +312,86 @@
|
|
|
116
312
|
"category": "marketing",
|
|
117
313
|
"description": "Full pricing section with plan cards, optional monthly/yearly toggle, and an optional feature comparison table. Consumes PricingPlan, ComparisonRow, and ComparisonCategory children.",
|
|
118
314
|
"props": [
|
|
119
|
-
{
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
{
|
|
315
|
+
{
|
|
316
|
+
"name": "id",
|
|
317
|
+
"type": "string",
|
|
318
|
+
"required": false,
|
|
319
|
+
"description": "HTML id for anchor links (e.g. id=\"pricing\" enables #pricing navigation)."
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
"name": "title",
|
|
323
|
+
"type": "string",
|
|
324
|
+
"required": false,
|
|
325
|
+
"description": "Section heading."
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"name": "description",
|
|
329
|
+
"type": "string",
|
|
330
|
+
"required": false,
|
|
331
|
+
"description": "Section subheading text."
|
|
332
|
+
},
|
|
333
|
+
{
|
|
334
|
+
"name": "monthlyLabel",
|
|
335
|
+
"type": "string",
|
|
336
|
+
"required": false,
|
|
337
|
+
"description": "Label for the monthly toggle. Defaults to 'Monthly'."
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"name": "yearlyLabel",
|
|
341
|
+
"type": "string",
|
|
342
|
+
"required": false,
|
|
343
|
+
"description": "Label for the yearly toggle. Defaults to 'Yearly'."
|
|
344
|
+
},
|
|
345
|
+
{
|
|
346
|
+
"name": "mostPopularLabel",
|
|
347
|
+
"type": "string",
|
|
348
|
+
"required": false,
|
|
349
|
+
"description": "Label for the popular plan badge. Defaults to 'Most Popular'."
|
|
350
|
+
},
|
|
351
|
+
{
|
|
352
|
+
"name": "children",
|
|
353
|
+
"type": "React.ReactNode",
|
|
354
|
+
"required": true,
|
|
355
|
+
"description": "PricingPlan, ComparisonCategory, and ComparisonRow children."
|
|
356
|
+
}
|
|
126
357
|
],
|
|
127
358
|
"example": "<PricingSection title=\"Pricing\" description=\"Choose your plan\">\n <PricingPlan name=\"Free\" price=\"$0\" features={[\"1 project\"]} cta={{ label: \"Start Free\", href: \"/signup\" }} />\n <PricingPlan name=\"Pro\" price=\"$29/mo\" features={[\"Unlimited projects\"]} cta={{ label: \"Go Pro\", href: \"/signup\" }} popular />\n</PricingSection>"
|
|
128
359
|
},
|
|
129
360
|
{
|
|
130
361
|
"name": "Companies",
|
|
131
362
|
"category": "marketing",
|
|
132
|
-
"description": "Logo showcase section with two variants: a continuous marquee scroll animation or a static inline flex layout. Supports logo names, versions, and badges in inline mode.",
|
|
363
|
+
"description": "Logo showcase section with two variants: a continuous marquee scroll animation or a static inline flex layout. Supports logo names, versions, and badges in inline mode. Grayscale can be disabled for full-color logos.",
|
|
133
364
|
"props": [
|
|
134
|
-
{
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
365
|
+
{
|
|
366
|
+
"name": "id",
|
|
367
|
+
"type": "string",
|
|
368
|
+
"required": false,
|
|
369
|
+
"description": "HTML id for anchor links (e.g. id=\"companies\" enables #companies navigation)."
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"name": "title",
|
|
373
|
+
"type": "string",
|
|
374
|
+
"required": false,
|
|
375
|
+
"description": "Title text above the logos."
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"name": "logos",
|
|
379
|
+
"type": "Array<{ src: ImageSource; alt: string; width?: number; name?: string; version?: string; badge?: string }>",
|
|
380
|
+
"required": true,
|
|
381
|
+
"description": "Array of logo items. Each has an image src (string or { light, dark }), alt text, and optional width, name, version, and badge."
|
|
382
|
+
},
|
|
383
|
+
{
|
|
384
|
+
"name": "variant",
|
|
385
|
+
"type": "'marquee' | 'inline'",
|
|
386
|
+
"required": false,
|
|
387
|
+
"description": "Display variant. 'marquee' (default) shows a scrolling animation; 'inline' shows a static flexbox layout with names and badges."
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"name": "grayscale",
|
|
391
|
+
"type": "boolean",
|
|
392
|
+
"required": false,
|
|
393
|
+
"description": "Whether to apply grayscale filter to logos in marquee mode. Defaults to true. Set to false for full-color logos (e.g. member logos, partner badges)."
|
|
394
|
+
}
|
|
138
395
|
],
|
|
139
396
|
"example": "<Companies\n title=\"Trusted by leading companies\"\n logos={[\n { src: \"/logos/acme.svg\", alt: \"Acme\" },\n { src: \"/logos/globex.svg\", alt: \"Globex\" }\n ]}\n/>"
|
|
140
397
|
},
|
|
@@ -143,12 +400,42 @@
|
|
|
143
400
|
"category": "marketing",
|
|
144
401
|
"description": "Single large testimonial quote block with author info, displayed in a centered glass card.",
|
|
145
402
|
"props": [
|
|
146
|
-
{
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
403
|
+
{
|
|
404
|
+
"name": "id",
|
|
405
|
+
"type": "string",
|
|
406
|
+
"required": false,
|
|
407
|
+
"description": "HTML id for anchor links (e.g. id=\"testimonial\" enables #testimonial navigation)."
|
|
408
|
+
},
|
|
409
|
+
{
|
|
410
|
+
"name": "quote",
|
|
411
|
+
"type": "string",
|
|
412
|
+
"required": true,
|
|
413
|
+
"description": "The testimonial quote text."
|
|
414
|
+
},
|
|
415
|
+
{
|
|
416
|
+
"name": "author",
|
|
417
|
+
"type": "string",
|
|
418
|
+
"required": true,
|
|
419
|
+
"description": "Name of the person giving the testimonial."
|
|
420
|
+
},
|
|
421
|
+
{
|
|
422
|
+
"name": "role",
|
|
423
|
+
"type": "string",
|
|
424
|
+
"required": false,
|
|
425
|
+
"description": "Job title or role of the author."
|
|
426
|
+
},
|
|
427
|
+
{
|
|
428
|
+
"name": "image",
|
|
429
|
+
"type": "ImageSource",
|
|
430
|
+
"required": false,
|
|
431
|
+
"description": "Author's avatar image. Pass a string URL or { light, dark } for theme-aware images."
|
|
432
|
+
},
|
|
433
|
+
{
|
|
434
|
+
"name": "company",
|
|
435
|
+
"type": "string",
|
|
436
|
+
"required": false,
|
|
437
|
+
"description": "Company name of the author."
|
|
438
|
+
}
|
|
152
439
|
],
|
|
153
440
|
"example": "<Testimonial\n quote=\"This product changed how we work.\"\n author=\"Jane Doe\"\n role=\"CEO\"\n company=\"Acme Inc\"\n image=\"/images/jane.jpg\"\n/>"
|
|
154
441
|
},
|
|
@@ -157,12 +444,42 @@
|
|
|
157
444
|
"category": "marketing",
|
|
158
445
|
"description": "Compact testimonial card with optional star rating. Used as a child of the Testimonials grid component.",
|
|
159
446
|
"props": [
|
|
160
|
-
{
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
447
|
+
{
|
|
448
|
+
"name": "quote",
|
|
449
|
+
"type": "string",
|
|
450
|
+
"required": true,
|
|
451
|
+
"description": "The testimonial quote text."
|
|
452
|
+
},
|
|
453
|
+
{
|
|
454
|
+
"name": "author",
|
|
455
|
+
"type": "string",
|
|
456
|
+
"required": true,
|
|
457
|
+
"description": "Name of the person giving the testimonial."
|
|
458
|
+
},
|
|
459
|
+
{
|
|
460
|
+
"name": "role",
|
|
461
|
+
"type": "string",
|
|
462
|
+
"required": false,
|
|
463
|
+
"description": "Job title or role of the author."
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
"name": "company",
|
|
467
|
+
"type": "string",
|
|
468
|
+
"required": false,
|
|
469
|
+
"description": "Company name of the author."
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
"name": "image",
|
|
473
|
+
"type": "ImageSource",
|
|
474
|
+
"required": false,
|
|
475
|
+
"description": "Author's avatar image. Pass a string URL or { light, dark } for theme-aware images."
|
|
476
|
+
},
|
|
477
|
+
{
|
|
478
|
+
"name": "rating",
|
|
479
|
+
"type": "number",
|
|
480
|
+
"required": false,
|
|
481
|
+
"description": "Star rating (1-5) displayed as filled star icons."
|
|
482
|
+
}
|
|
166
483
|
],
|
|
167
484
|
"example": "<TestimonialCard\n quote=\"Incredible experience!\"\n author=\"John Smith\"\n role=\"CTO\"\n company=\"Globex\"\n rating={5}\n/>"
|
|
168
485
|
},
|
|
@@ -171,11 +488,36 @@
|
|
|
171
488
|
"category": "marketing",
|
|
172
489
|
"description": "Grid section that displays multiple TestimonialCard components with an optional section title and description.",
|
|
173
490
|
"props": [
|
|
174
|
-
{
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
491
|
+
{
|
|
492
|
+
"name": "id",
|
|
493
|
+
"type": "string",
|
|
494
|
+
"required": false,
|
|
495
|
+
"description": "HTML id for anchor links (e.g. id=\"testimonials\" enables #testimonials navigation)."
|
|
496
|
+
},
|
|
497
|
+
{
|
|
498
|
+
"name": "title",
|
|
499
|
+
"type": "string",
|
|
500
|
+
"required": false,
|
|
501
|
+
"description": "Section heading displayed above the grid."
|
|
502
|
+
},
|
|
503
|
+
{
|
|
504
|
+
"name": "description",
|
|
505
|
+
"type": "string",
|
|
506
|
+
"required": false,
|
|
507
|
+
"description": "Section subheading text."
|
|
508
|
+
},
|
|
509
|
+
{
|
|
510
|
+
"name": "columns",
|
|
511
|
+
"type": "2 | 3",
|
|
512
|
+
"required": false,
|
|
513
|
+
"description": "Number of grid columns. Defaults to 3."
|
|
514
|
+
},
|
|
515
|
+
{
|
|
516
|
+
"name": "children",
|
|
517
|
+
"type": "React.ReactNode",
|
|
518
|
+
"required": true,
|
|
519
|
+
"description": "TestimonialCard children."
|
|
520
|
+
}
|
|
179
521
|
],
|
|
180
522
|
"example": "<Testimonials title=\"What our customers say\" columns={3}>\n <TestimonialCard quote=\"Amazing!\" author=\"Alice\" rating={5} />\n <TestimonialCard quote=\"Love it!\" author=\"Bob\" rating={5} />\n <TestimonialCard quote=\"Great tool.\" author=\"Charlie\" rating={4} />\n</Testimonials>"
|
|
181
523
|
},
|
|
@@ -184,12 +526,42 @@
|
|
|
184
526
|
"category": "marketing",
|
|
185
527
|
"description": "Full-width call-to-action banner with a centered glow effect, title, optional subtext, and a primary button. Supports additional children content.",
|
|
186
528
|
"props": [
|
|
187
|
-
{
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
529
|
+
{
|
|
530
|
+
"name": "id",
|
|
531
|
+
"type": "string",
|
|
532
|
+
"required": false,
|
|
533
|
+
"description": "HTML id for anchor links (e.g. id=\"cta\" enables #cta navigation)."
|
|
534
|
+
},
|
|
535
|
+
{
|
|
536
|
+
"name": "title",
|
|
537
|
+
"type": "string",
|
|
538
|
+
"required": true,
|
|
539
|
+
"description": "Banner headline text."
|
|
540
|
+
},
|
|
541
|
+
{
|
|
542
|
+
"name": "buttonText",
|
|
543
|
+
"type": "string",
|
|
544
|
+
"required": true,
|
|
545
|
+
"description": "Text displayed on the CTA button."
|
|
546
|
+
},
|
|
547
|
+
{
|
|
548
|
+
"name": "buttonHref",
|
|
549
|
+
"type": "string",
|
|
550
|
+
"required": false,
|
|
551
|
+
"description": "URL the button links to."
|
|
552
|
+
},
|
|
553
|
+
{
|
|
554
|
+
"name": "subtext",
|
|
555
|
+
"type": "string",
|
|
556
|
+
"required": false,
|
|
557
|
+
"description": "Supporting text displayed below the title and above the button."
|
|
558
|
+
},
|
|
559
|
+
{
|
|
560
|
+
"name": "children",
|
|
561
|
+
"type": "React.ReactNode",
|
|
562
|
+
"required": false,
|
|
563
|
+
"description": "Additional content rendered below the button."
|
|
564
|
+
}
|
|
193
565
|
],
|
|
194
566
|
"example": "<BannerCTA\n title=\"Ready to get started?\"\n buttonText=\"Start Free Trial\"\n buttonHref=\"/signup\"\n subtext=\"No credit card required.\"\n/>"
|
|
195
567
|
},
|
|
@@ -198,8 +570,18 @@
|
|
|
198
570
|
"category": "marketing",
|
|
199
571
|
"description": "Small inline feature item with an optional icon, designed to be placed inside a BannerCTA as a child.",
|
|
200
572
|
"props": [
|
|
201
|
-
{
|
|
202
|
-
|
|
573
|
+
{
|
|
574
|
+
"name": "title",
|
|
575
|
+
"type": "string",
|
|
576
|
+
"required": true,
|
|
577
|
+
"description": "Feature text."
|
|
578
|
+
},
|
|
579
|
+
{
|
|
580
|
+
"name": "icon",
|
|
581
|
+
"type": "string",
|
|
582
|
+
"required": false,
|
|
583
|
+
"description": "Icon or emoji displayed before the title."
|
|
584
|
+
}
|
|
203
585
|
],
|
|
204
586
|
"example": "<BannerFeature title=\"99.9% uptime\" icon=\"✅\" />"
|
|
205
587
|
},
|
|
@@ -208,8 +590,18 @@
|
|
|
208
590
|
"category": "marketing",
|
|
209
591
|
"description": "Individual FAQ accordion item with a question trigger and expandable answer content. Used as a child of FAQ.",
|
|
210
592
|
"props": [
|
|
211
|
-
{
|
|
212
|
-
|
|
593
|
+
{
|
|
594
|
+
"name": "question",
|
|
595
|
+
"type": "string",
|
|
596
|
+
"required": true,
|
|
597
|
+
"description": "The question text displayed as the accordion trigger."
|
|
598
|
+
},
|
|
599
|
+
{
|
|
600
|
+
"name": "children",
|
|
601
|
+
"type": "React.ReactNode",
|
|
602
|
+
"required": true,
|
|
603
|
+
"description": "The answer content revealed when the item is expanded."
|
|
604
|
+
}
|
|
213
605
|
],
|
|
214
606
|
"example": "<FAQItem question=\"How does billing work?\">\n We bill monthly based on your plan. You can cancel anytime.\n</FAQItem>"
|
|
215
607
|
},
|
|
@@ -218,10 +610,30 @@
|
|
|
218
610
|
"category": "marketing",
|
|
219
611
|
"description": "FAQ section with a collapsible accordion. Contains FAQItem children with question/answer pairs.",
|
|
220
612
|
"props": [
|
|
221
|
-
{
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
613
|
+
{
|
|
614
|
+
"name": "id",
|
|
615
|
+
"type": "string",
|
|
616
|
+
"required": false,
|
|
617
|
+
"description": "HTML id for anchor links (e.g. id=\"faq\" enables #faq navigation)."
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
"name": "title",
|
|
621
|
+
"type": "string",
|
|
622
|
+
"required": false,
|
|
623
|
+
"description": "Section heading displayed above the accordion."
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
"name": "description",
|
|
627
|
+
"type": "string",
|
|
628
|
+
"required": false,
|
|
629
|
+
"description": "Section subheading text."
|
|
630
|
+
},
|
|
631
|
+
{
|
|
632
|
+
"name": "children",
|
|
633
|
+
"type": "React.ReactNode",
|
|
634
|
+
"required": true,
|
|
635
|
+
"description": "FAQItem children."
|
|
636
|
+
}
|
|
225
637
|
],
|
|
226
638
|
"example": "<FAQ title=\"Frequently Asked Questions\">\n <FAQItem question=\"Is there a free plan?\">Yes, we offer a generous free tier.</FAQItem>\n <FAQItem question=\"Can I cancel anytime?\">Absolutely, no lock-in.</FAQItem>\n</FAQ>"
|
|
227
639
|
},
|
|
@@ -230,8 +642,18 @@
|
|
|
230
642
|
"category": "marketing",
|
|
231
643
|
"description": "Data-only component that defines a single step. Must be used as a child of Steps. Renders nothing on its own; its props are consumed by the parent.",
|
|
232
644
|
"props": [
|
|
233
|
-
{
|
|
234
|
-
|
|
645
|
+
{
|
|
646
|
+
"name": "title",
|
|
647
|
+
"type": "string",
|
|
648
|
+
"required": true,
|
|
649
|
+
"description": "Step heading text."
|
|
650
|
+
},
|
|
651
|
+
{
|
|
652
|
+
"name": "description",
|
|
653
|
+
"type": "string",
|
|
654
|
+
"required": true,
|
|
655
|
+
"description": "Step description text."
|
|
656
|
+
}
|
|
235
657
|
],
|
|
236
658
|
"example": "<Step title=\"Sign up\" description=\"Create your free account in seconds.\" />"
|
|
237
659
|
},
|
|
@@ -240,10 +662,30 @@
|
|
|
240
662
|
"category": "marketing",
|
|
241
663
|
"description": "Numbered step-by-step section with connected timeline indicators. Consumes Step children to display a vertical progression.",
|
|
242
664
|
"props": [
|
|
243
|
-
{
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
665
|
+
{
|
|
666
|
+
"name": "id",
|
|
667
|
+
"type": "string",
|
|
668
|
+
"required": false,
|
|
669
|
+
"description": "HTML id for anchor links (e.g. id=\"steps\" enables #steps navigation)."
|
|
670
|
+
},
|
|
671
|
+
{
|
|
672
|
+
"name": "title",
|
|
673
|
+
"type": "string",
|
|
674
|
+
"required": false,
|
|
675
|
+
"description": "Section heading displayed above the steps."
|
|
676
|
+
},
|
|
677
|
+
{
|
|
678
|
+
"name": "description",
|
|
679
|
+
"type": "string",
|
|
680
|
+
"required": false,
|
|
681
|
+
"description": "Section subheading text."
|
|
682
|
+
},
|
|
683
|
+
{
|
|
684
|
+
"name": "children",
|
|
685
|
+
"type": "React.ReactNode",
|
|
686
|
+
"required": true,
|
|
687
|
+
"description": "Step children."
|
|
688
|
+
}
|
|
247
689
|
],
|
|
248
690
|
"example": "<Steps title=\"How it works\">\n <Step title=\"Sign up\" description=\"Create your account.\" />\n <Step title=\"Configure\" description=\"Set up your workspace.\" />\n <Step title=\"Launch\" description=\"Go live in minutes.\" />\n</Steps>"
|
|
249
691
|
},
|
|
@@ -252,10 +694,30 @@
|
|
|
252
694
|
"category": "marketing",
|
|
253
695
|
"description": "Individual card in a grid layout with an optional icon, title, description, and link. Used as a child of CardGrid.",
|
|
254
696
|
"props": [
|
|
255
|
-
{
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
697
|
+
{
|
|
698
|
+
"name": "title",
|
|
699
|
+
"type": "string",
|
|
700
|
+
"required": true,
|
|
701
|
+
"description": "Card heading text."
|
|
702
|
+
},
|
|
703
|
+
{
|
|
704
|
+
"name": "description",
|
|
705
|
+
"type": "string",
|
|
706
|
+
"required": true,
|
|
707
|
+
"description": "Card description text."
|
|
708
|
+
},
|
|
709
|
+
{
|
|
710
|
+
"name": "icon",
|
|
711
|
+
"type": "React.ReactNode",
|
|
712
|
+
"required": false,
|
|
713
|
+
"description": "Icon element displayed above the title."
|
|
714
|
+
},
|
|
715
|
+
{
|
|
716
|
+
"name": "href",
|
|
717
|
+
"type": "string",
|
|
718
|
+
"required": false,
|
|
719
|
+
"description": "Optional link URL. When provided, the card becomes a clickable anchor."
|
|
720
|
+
}
|
|
259
721
|
],
|
|
260
722
|
"example": "<CardGridItem title=\"Documentation\" description=\"Read the full docs.\" href=\"/docs\" />"
|
|
261
723
|
},
|
|
@@ -264,9 +726,24 @@
|
|
|
264
726
|
"category": "marketing",
|
|
265
727
|
"description": "Responsive grid container for CardGridItem children. Supports 2, 3, or 4 column layouts.",
|
|
266
728
|
"props": [
|
|
267
|
-
{
|
|
268
|
-
|
|
269
|
-
|
|
729
|
+
{
|
|
730
|
+
"name": "id",
|
|
731
|
+
"type": "string",
|
|
732
|
+
"required": false,
|
|
733
|
+
"description": "HTML id for anchor links (e.g. id=\"cards\" enables #cards navigation)."
|
|
734
|
+
},
|
|
735
|
+
{
|
|
736
|
+
"name": "columns",
|
|
737
|
+
"type": "2 | 3 | 4",
|
|
738
|
+
"required": false,
|
|
739
|
+
"description": "Number of grid columns. Defaults to 3."
|
|
740
|
+
},
|
|
741
|
+
{
|
|
742
|
+
"name": "children",
|
|
743
|
+
"type": "React.ReactNode",
|
|
744
|
+
"required": true,
|
|
745
|
+
"description": "CardGridItem children."
|
|
746
|
+
}
|
|
270
747
|
],
|
|
271
748
|
"example": "<CardGrid columns={3}>\n <CardGridItem title=\"Feature A\" description=\"Description A\" />\n <CardGridItem title=\"Feature B\" description=\"Description B\" />\n <CardGridItem title=\"Feature C\" description=\"Description C\" />\n</CardGrid>"
|
|
272
749
|
},
|
|
@@ -275,11 +752,36 @@
|
|
|
275
752
|
"category": "marketing",
|
|
276
753
|
"description": "Highlighted callout box with a colored border for info, success, or warning messages. Useful for drawing attention to important content within a page.",
|
|
277
754
|
"props": [
|
|
278
|
-
{
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
755
|
+
{
|
|
756
|
+
"name": "id",
|
|
757
|
+
"type": "string",
|
|
758
|
+
"required": false,
|
|
759
|
+
"description": "HTML id for anchor links (e.g. id=\"callout\" enables #callout navigation)."
|
|
760
|
+
},
|
|
761
|
+
{
|
|
762
|
+
"name": "title",
|
|
763
|
+
"type": "string",
|
|
764
|
+
"required": true,
|
|
765
|
+
"description": "Callout heading text."
|
|
766
|
+
},
|
|
767
|
+
{
|
|
768
|
+
"name": "description",
|
|
769
|
+
"type": "string",
|
|
770
|
+
"required": true,
|
|
771
|
+
"description": "Callout body text."
|
|
772
|
+
},
|
|
773
|
+
{
|
|
774
|
+
"name": "variant",
|
|
775
|
+
"type": "'info' | 'success' | 'warning'",
|
|
776
|
+
"required": false,
|
|
777
|
+
"description": "Color variant for the callout. Defaults to 'info'."
|
|
778
|
+
},
|
|
779
|
+
{
|
|
780
|
+
"name": "children",
|
|
781
|
+
"type": "React.ReactNode",
|
|
782
|
+
"required": false,
|
|
783
|
+
"description": "Additional content rendered below the description."
|
|
784
|
+
}
|
|
283
785
|
],
|
|
284
786
|
"example": "<CalloutCard\n title=\"Pro Tip\"\n description=\"You can customize the theme in settings.\"\n variant=\"info\"\n/>"
|
|
285
787
|
},
|
|
@@ -288,10 +790,30 @@
|
|
|
288
790
|
"category": "marketing",
|
|
289
791
|
"description": "Data-only component that defines a single statistic. Must be used as a child of Stats. Renders nothing on its own; its props are consumed by the parent.",
|
|
290
792
|
"props": [
|
|
291
|
-
{
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
793
|
+
{
|
|
794
|
+
"name": "value",
|
|
795
|
+
"type": "string | number",
|
|
796
|
+
"required": true,
|
|
797
|
+
"description": "The main numeric or text value displayed prominently."
|
|
798
|
+
},
|
|
799
|
+
{
|
|
800
|
+
"name": "label",
|
|
801
|
+
"type": "string",
|
|
802
|
+
"required": false,
|
|
803
|
+
"description": "Label text displayed above the value."
|
|
804
|
+
},
|
|
805
|
+
{
|
|
806
|
+
"name": "suffix",
|
|
807
|
+
"type": "string",
|
|
808
|
+
"required": false,
|
|
809
|
+
"description": "Suffix text displayed after the value (e.g. '+', '%')."
|
|
810
|
+
},
|
|
811
|
+
{
|
|
812
|
+
"name": "description",
|
|
813
|
+
"type": "string",
|
|
814
|
+
"required": false,
|
|
815
|
+
"description": "Description text displayed below the value."
|
|
816
|
+
}
|
|
295
817
|
],
|
|
296
818
|
"example": "<Stat value=\"99.9\" suffix=\"%\" label=\"Uptime\" description=\"Average over the last 12 months\" />"
|
|
297
819
|
},
|
|
@@ -300,9 +822,24 @@
|
|
|
300
822
|
"category": "marketing",
|
|
301
823
|
"description": "Section displaying key statistics in a 2x2 or 4-column grid with large gradient numbers. Consumes Stat children.",
|
|
302
824
|
"props": [
|
|
303
|
-
{
|
|
304
|
-
|
|
305
|
-
|
|
825
|
+
{
|
|
826
|
+
"name": "id",
|
|
827
|
+
"type": "string",
|
|
828
|
+
"required": false,
|
|
829
|
+
"description": "HTML id for anchor links (e.g. id=\"stats\" enables #stats navigation)."
|
|
830
|
+
},
|
|
831
|
+
{
|
|
832
|
+
"name": "title",
|
|
833
|
+
"type": "string",
|
|
834
|
+
"required": false,
|
|
835
|
+
"description": "Section heading displayed above the stats."
|
|
836
|
+
},
|
|
837
|
+
{
|
|
838
|
+
"name": "children",
|
|
839
|
+
"type": "React.ReactNode",
|
|
840
|
+
"required": true,
|
|
841
|
+
"description": "Stat children."
|
|
842
|
+
}
|
|
306
843
|
],
|
|
307
844
|
"example": "<Stats title=\"Our numbers\">\n <Stat value=\"10K\" suffix=\"+\" label=\"Users\" />\n <Stat value=\"99.9\" suffix=\"%\" label=\"Uptime\" />\n <Stat value=\"50\" suffix=\"+\" label=\"Countries\" />\n <Stat value=\"24/7\" label=\"Support\" />\n</Stats>"
|
|
308
845
|
},
|
|
@@ -311,11 +848,36 @@
|
|
|
311
848
|
"category": "marketing",
|
|
312
849
|
"description": "Individual bento grid card with a title, optional description, optional full-bleed image, and support for custom children. Supports spanning 1 or 2 columns.",
|
|
313
850
|
"props": [
|
|
314
|
-
{
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
851
|
+
{
|
|
852
|
+
"name": "title",
|
|
853
|
+
"type": "string",
|
|
854
|
+
"required": true,
|
|
855
|
+
"description": "Card heading text."
|
|
856
|
+
},
|
|
857
|
+
{
|
|
858
|
+
"name": "description",
|
|
859
|
+
"type": "string",
|
|
860
|
+
"required": false,
|
|
861
|
+
"description": "Card description text."
|
|
862
|
+
},
|
|
863
|
+
{
|
|
864
|
+
"name": "image",
|
|
865
|
+
"type": "ImageSource",
|
|
866
|
+
"required": false,
|
|
867
|
+
"description": "Full-bleed image at the bottom of the card. Pass a string URL or { light, dark } for theme-aware images."
|
|
868
|
+
},
|
|
869
|
+
{
|
|
870
|
+
"name": "span",
|
|
871
|
+
"type": "1 | 2",
|
|
872
|
+
"required": false,
|
|
873
|
+
"description": "Number of grid columns the item spans. Defaults to 1."
|
|
874
|
+
},
|
|
875
|
+
{
|
|
876
|
+
"name": "children",
|
|
877
|
+
"type": "React.ReactNode",
|
|
878
|
+
"required": false,
|
|
879
|
+
"description": "Custom content rendered inside the card."
|
|
880
|
+
}
|
|
319
881
|
],
|
|
320
882
|
"example": "<BentoItem title=\"Analytics\" description=\"Track everything in real-time.\" image=\"/images/analytics.png\" span={2} />"
|
|
321
883
|
},
|
|
@@ -324,10 +886,30 @@
|
|
|
324
886
|
"category": "marketing",
|
|
325
887
|
"description": "Asymmetric grid layout section for showcasing features in a bento-box style. Uses a 3-column grid with equal-height rows. Contains BentoItem children.",
|
|
326
888
|
"props": [
|
|
327
|
-
{
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
889
|
+
{
|
|
890
|
+
"name": "id",
|
|
891
|
+
"type": "string",
|
|
892
|
+
"required": false,
|
|
893
|
+
"description": "HTML id for anchor links (e.g. id=\"bento\" enables #bento navigation)."
|
|
894
|
+
},
|
|
895
|
+
{
|
|
896
|
+
"name": "title",
|
|
897
|
+
"type": "string",
|
|
898
|
+
"required": false,
|
|
899
|
+
"description": "Section heading displayed above the grid."
|
|
900
|
+
},
|
|
901
|
+
{
|
|
902
|
+
"name": "description",
|
|
903
|
+
"type": "string",
|
|
904
|
+
"required": false,
|
|
905
|
+
"description": "Section subheading text."
|
|
906
|
+
},
|
|
907
|
+
{
|
|
908
|
+
"name": "children",
|
|
909
|
+
"type": "React.ReactNode",
|
|
910
|
+
"required": true,
|
|
911
|
+
"description": "BentoItem children."
|
|
912
|
+
}
|
|
331
913
|
],
|
|
332
914
|
"example": "<BentoGrid title=\"Everything you need\">\n <BentoItem title=\"Dashboard\" description=\"Overview at a glance.\" span={2} />\n <BentoItem title=\"Reports\" description=\"Detailed insights.\" />\n <BentoItem title=\"Team\" description=\"Collaborate seamlessly.\" />\n <BentoItem title=\"Integrations\" description=\"Connect your tools.\" span={2} />\n</BentoGrid>"
|
|
333
915
|
},
|
|
@@ -336,9 +918,24 @@
|
|
|
336
918
|
"category": "marketing",
|
|
337
919
|
"description": "Individual gallery image card with a hover zoom effect and an optional caption. Used as a child of Gallery.",
|
|
338
920
|
"props": [
|
|
339
|
-
{
|
|
340
|
-
|
|
341
|
-
|
|
921
|
+
{
|
|
922
|
+
"name": "src",
|
|
923
|
+
"type": "ImageSource",
|
|
924
|
+
"required": true,
|
|
925
|
+
"description": "Image source. Pass a string URL or { light, dark } for theme-aware images."
|
|
926
|
+
},
|
|
927
|
+
{
|
|
928
|
+
"name": "alt",
|
|
929
|
+
"type": "string",
|
|
930
|
+
"required": true,
|
|
931
|
+
"description": "Alt text for the image."
|
|
932
|
+
},
|
|
933
|
+
{
|
|
934
|
+
"name": "caption",
|
|
935
|
+
"type": "string",
|
|
936
|
+
"required": false,
|
|
937
|
+
"description": "Caption text displayed below the image."
|
|
938
|
+
}
|
|
342
939
|
],
|
|
343
940
|
"example": "<GalleryItem src=\"/images/screenshot-1.png\" alt=\"Dashboard view\" caption=\"The main dashboard\" />"
|
|
344
941
|
},
|
|
@@ -347,11 +944,36 @@
|
|
|
347
944
|
"category": "marketing",
|
|
348
945
|
"description": "Responsive image gallery section with optional title and description. Displays GalleryItem children in a configurable grid.",
|
|
349
946
|
"props": [
|
|
350
|
-
{
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
947
|
+
{
|
|
948
|
+
"name": "id",
|
|
949
|
+
"type": "string",
|
|
950
|
+
"required": false,
|
|
951
|
+
"description": "HTML id for anchor links (e.g. id=\"gallery\" enables #gallery navigation)."
|
|
952
|
+
},
|
|
953
|
+
{
|
|
954
|
+
"name": "title",
|
|
955
|
+
"type": "string",
|
|
956
|
+
"required": false,
|
|
957
|
+
"description": "Section heading displayed above the gallery."
|
|
958
|
+
},
|
|
959
|
+
{
|
|
960
|
+
"name": "description",
|
|
961
|
+
"type": "string",
|
|
962
|
+
"required": false,
|
|
963
|
+
"description": "Section subheading text."
|
|
964
|
+
},
|
|
965
|
+
{
|
|
966
|
+
"name": "columns",
|
|
967
|
+
"type": "2 | 3 | 4",
|
|
968
|
+
"required": false,
|
|
969
|
+
"description": "Number of grid columns. Defaults to 3."
|
|
970
|
+
},
|
|
971
|
+
{
|
|
972
|
+
"name": "children",
|
|
973
|
+
"type": "React.ReactNode",
|
|
974
|
+
"required": true,
|
|
975
|
+
"description": "GalleryItem children."
|
|
976
|
+
}
|
|
355
977
|
],
|
|
356
978
|
"example": "<Gallery title=\"Screenshots\" columns={3}>\n <GalleryItem src=\"/images/s1.png\" alt=\"Screenshot 1\" />\n <GalleryItem src=\"/images/s2.png\" alt=\"Screenshot 2\" />\n <GalleryItem src=\"/images/s3.png\" alt=\"Screenshot 3\" />\n</Gallery>"
|
|
357
979
|
},
|
|
@@ -360,10 +982,30 @@
|
|
|
360
982
|
"category": "marketing",
|
|
361
983
|
"description": "Compact social proof section showing stacked user avatars with a text message and optional subtext. Ideal for displaying user counts or trust indicators.",
|
|
362
984
|
"props": [
|
|
363
|
-
{
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
985
|
+
{
|
|
986
|
+
"name": "id",
|
|
987
|
+
"type": "string",
|
|
988
|
+
"required": false,
|
|
989
|
+
"description": "HTML id for anchor links (e.g. id=\"social-proof\" enables #social-proof navigation)."
|
|
990
|
+
},
|
|
991
|
+
{
|
|
992
|
+
"name": "avatars",
|
|
993
|
+
"type": "string[]",
|
|
994
|
+
"required": false,
|
|
995
|
+
"description": "Array of avatar image URLs displayed as overlapping circles."
|
|
996
|
+
},
|
|
997
|
+
{
|
|
998
|
+
"name": "text",
|
|
999
|
+
"type": "string",
|
|
1000
|
+
"required": true,
|
|
1001
|
+
"description": "Main social proof text (e.g. 'Loved by 10,000+ users')."
|
|
1002
|
+
},
|
|
1003
|
+
{
|
|
1004
|
+
"name": "subtext",
|
|
1005
|
+
"type": "string",
|
|
1006
|
+
"required": false,
|
|
1007
|
+
"description": "Secondary text displayed below the main text."
|
|
1008
|
+
}
|
|
367
1009
|
],
|
|
368
1010
|
"example": "<SocialProof\n avatars={[\"/avatars/1.jpg\", \"/avatars/2.jpg\", \"/avatars/3.jpg\"]}\n text=\"Loved by 10,000+ teams\"\n subtext=\"across 50 countries\"\n/>"
|
|
369
1011
|
},
|
|
@@ -372,10 +1014,30 @@
|
|
|
372
1014
|
"category": "marketing",
|
|
373
1015
|
"description": "Individual card within a horizontally scrollable Carousel. Supports an image, title, description, and custom children.",
|
|
374
1016
|
"props": [
|
|
375
|
-
{
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
1017
|
+
{
|
|
1018
|
+
"name": "title",
|
|
1019
|
+
"type": "string",
|
|
1020
|
+
"required": false,
|
|
1021
|
+
"description": "Card heading text."
|
|
1022
|
+
},
|
|
1023
|
+
{
|
|
1024
|
+
"name": "description",
|
|
1025
|
+
"type": "string",
|
|
1026
|
+
"required": false,
|
|
1027
|
+
"description": "Card description text."
|
|
1028
|
+
},
|
|
1029
|
+
{
|
|
1030
|
+
"name": "image",
|
|
1031
|
+
"type": "ImageSource",
|
|
1032
|
+
"required": false,
|
|
1033
|
+
"description": "Card image displayed above the content. Pass a string URL or { light, dark } for theme-aware images."
|
|
1034
|
+
},
|
|
1035
|
+
{
|
|
1036
|
+
"name": "children",
|
|
1037
|
+
"type": "React.ReactNode",
|
|
1038
|
+
"required": false,
|
|
1039
|
+
"description": "Custom content rendered inside the card."
|
|
1040
|
+
}
|
|
379
1041
|
],
|
|
380
1042
|
"example": "<CarouselItem title=\"Feature 1\" description=\"Description of feature 1.\" image=\"/images/f1.png\" />"
|
|
381
1043
|
},
|
|
@@ -384,10 +1046,30 @@
|
|
|
384
1046
|
"category": "marketing",
|
|
385
1047
|
"description": "Horizontally scrollable carousel section with snap-scrolling, left/right navigation buttons, and optional title/description. Contains CarouselItem children.",
|
|
386
1048
|
"props": [
|
|
387
|
-
{
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
1049
|
+
{
|
|
1050
|
+
"name": "id",
|
|
1051
|
+
"type": "string",
|
|
1052
|
+
"required": false,
|
|
1053
|
+
"description": "HTML id for anchor links (e.g. id=\"carousel\" enables #carousel navigation)."
|
|
1054
|
+
},
|
|
1055
|
+
{
|
|
1056
|
+
"name": "title",
|
|
1057
|
+
"type": "string",
|
|
1058
|
+
"required": false,
|
|
1059
|
+
"description": "Section heading displayed above the carousel."
|
|
1060
|
+
},
|
|
1061
|
+
{
|
|
1062
|
+
"name": "description",
|
|
1063
|
+
"type": "string",
|
|
1064
|
+
"required": false,
|
|
1065
|
+
"description": "Section subheading text."
|
|
1066
|
+
},
|
|
1067
|
+
{
|
|
1068
|
+
"name": "children",
|
|
1069
|
+
"type": "React.ReactNode",
|
|
1070
|
+
"required": true,
|
|
1071
|
+
"description": "CarouselItem children."
|
|
1072
|
+
}
|
|
391
1073
|
],
|
|
392
1074
|
"example": "<Carousel title=\"Explore our features\">\n <CarouselItem title=\"Feature 1\" description=\"Description 1\" image=\"/images/f1.png\" />\n <CarouselItem title=\"Feature 2\" description=\"Description 2\" image=\"/images/f2.png\" />\n <CarouselItem title=\"Feature 3\" description=\"Description 3\" image=\"/images/f3.png\" />\n</Carousel>"
|
|
393
1075
|
},
|
|
@@ -396,11 +1078,36 @@
|
|
|
396
1078
|
"category": "marketing",
|
|
397
1079
|
"description": "Data-only component that defines a single tab. Must be used as a child of TabsSection. Renders nothing on its own; its props are consumed by the parent.",
|
|
398
1080
|
"props": [
|
|
399
|
-
{
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
1081
|
+
{
|
|
1082
|
+
"name": "label",
|
|
1083
|
+
"type": "string",
|
|
1084
|
+
"required": true,
|
|
1085
|
+
"description": "Tab button label text."
|
|
1086
|
+
},
|
|
1087
|
+
{
|
|
1088
|
+
"name": "title",
|
|
1089
|
+
"type": "string",
|
|
1090
|
+
"required": false,
|
|
1091
|
+
"description": "Content heading displayed when the tab is active."
|
|
1092
|
+
},
|
|
1093
|
+
{
|
|
1094
|
+
"name": "description",
|
|
1095
|
+
"type": "string",
|
|
1096
|
+
"required": false,
|
|
1097
|
+
"description": "Content description displayed when the tab is active."
|
|
1098
|
+
},
|
|
1099
|
+
{
|
|
1100
|
+
"name": "image",
|
|
1101
|
+
"type": "ImageSource",
|
|
1102
|
+
"required": false,
|
|
1103
|
+
"description": "Image displayed alongside the content when the tab is active. Pass a string URL or { light, dark } for theme-aware images."
|
|
1104
|
+
},
|
|
1105
|
+
{
|
|
1106
|
+
"name": "children",
|
|
1107
|
+
"type": "React.ReactNode",
|
|
1108
|
+
"required": false,
|
|
1109
|
+
"description": "Custom content rendered when the tab is active."
|
|
1110
|
+
}
|
|
404
1111
|
],
|
|
405
1112
|
"example": "<TabItem label=\"Overview\" title=\"Product Overview\" description=\"Everything you need to know.\" image=\"/images/overview.png\" />"
|
|
406
1113
|
},
|
|
@@ -409,10 +1116,30 @@
|
|
|
409
1116
|
"category": "marketing",
|
|
410
1117
|
"description": "Interactive tabbed section with pill-style tab buttons and a content panel that changes based on the active tab. Consumes TabItem children.",
|
|
411
1118
|
"props": [
|
|
412
|
-
{
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
1119
|
+
{
|
|
1120
|
+
"name": "id",
|
|
1121
|
+
"type": "string",
|
|
1122
|
+
"required": false,
|
|
1123
|
+
"description": "HTML id for anchor links (e.g. id=\"tabs\" enables #tabs navigation)."
|
|
1124
|
+
},
|
|
1125
|
+
{
|
|
1126
|
+
"name": "title",
|
|
1127
|
+
"type": "string",
|
|
1128
|
+
"required": false,
|
|
1129
|
+
"description": "Section heading displayed above the tabs."
|
|
1130
|
+
},
|
|
1131
|
+
{
|
|
1132
|
+
"name": "description",
|
|
1133
|
+
"type": "string",
|
|
1134
|
+
"required": false,
|
|
1135
|
+
"description": "Section subheading text."
|
|
1136
|
+
},
|
|
1137
|
+
{
|
|
1138
|
+
"name": "children",
|
|
1139
|
+
"type": "React.ReactNode",
|
|
1140
|
+
"required": true,
|
|
1141
|
+
"description": "TabItem children."
|
|
1142
|
+
}
|
|
416
1143
|
],
|
|
417
1144
|
"example": "<TabsSection title=\"Features\">\n <TabItem label=\"Dashboard\" title=\"Your Dashboard\" description=\"See everything at a glance.\" image=\"/images/dashboard.png\" />\n <TabItem label=\"Reports\" title=\"Detailed Reports\" description=\"Analyze your data.\" image=\"/images/reports.png\" />\n</TabsSection>"
|
|
418
1145
|
},
|
|
@@ -421,11 +1148,36 @@
|
|
|
421
1148
|
"category": "marketing",
|
|
422
1149
|
"description": "Lightweight page hero section with centered title, optional description, badge, and children. Suitable for inner pages that do not need the full Hero with image and CTAs.",
|
|
423
1150
|
"props": [
|
|
424
|
-
{
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
1151
|
+
{
|
|
1152
|
+
"name": "id",
|
|
1153
|
+
"type": "string",
|
|
1154
|
+
"required": false,
|
|
1155
|
+
"description": "HTML id for anchor links (e.g. id=\"hero\" enables #hero navigation)."
|
|
1156
|
+
},
|
|
1157
|
+
{
|
|
1158
|
+
"name": "title",
|
|
1159
|
+
"type": "string",
|
|
1160
|
+
"required": true,
|
|
1161
|
+
"description": "Page title displayed as an h1."
|
|
1162
|
+
},
|
|
1163
|
+
{
|
|
1164
|
+
"name": "description",
|
|
1165
|
+
"type": "string",
|
|
1166
|
+
"required": false,
|
|
1167
|
+
"description": "Supporting paragraph text below the title."
|
|
1168
|
+
},
|
|
1169
|
+
{
|
|
1170
|
+
"name": "badge",
|
|
1171
|
+
"type": "string",
|
|
1172
|
+
"required": false,
|
|
1173
|
+
"description": "Small badge text displayed above the title."
|
|
1174
|
+
},
|
|
1175
|
+
{
|
|
1176
|
+
"name": "children",
|
|
1177
|
+
"type": "React.ReactNode",
|
|
1178
|
+
"required": false,
|
|
1179
|
+
"description": "Additional content rendered below the description."
|
|
1180
|
+
}
|
|
429
1181
|
],
|
|
430
1182
|
"example": "<PageHero\n title=\"About Us\"\n description=\"Learn more about our mission and team.\"\n badge=\"Company\"\n/>"
|
|
431
1183
|
},
|
|
@@ -434,9 +1186,24 @@
|
|
|
434
1186
|
"category": "blog",
|
|
435
1187
|
"description": "Top-level wrapper for blog article content. Renders a centered, max-width article container with vertical padding.",
|
|
436
1188
|
"props": [
|
|
437
|
-
{
|
|
438
|
-
|
|
439
|
-
|
|
1189
|
+
{
|
|
1190
|
+
"name": "id",
|
|
1191
|
+
"type": "string",
|
|
1192
|
+
"required": false,
|
|
1193
|
+
"description": "HTML id for anchor links (e.g. id=\"article\" enables #article navigation)."
|
|
1194
|
+
},
|
|
1195
|
+
{
|
|
1196
|
+
"name": "children",
|
|
1197
|
+
"type": "React.ReactNode",
|
|
1198
|
+
"required": true,
|
|
1199
|
+
"description": "Article content (headings, paragraphs, blog components)."
|
|
1200
|
+
},
|
|
1201
|
+
{
|
|
1202
|
+
"name": "contentFolder",
|
|
1203
|
+
"type": "string",
|
|
1204
|
+
"required": false,
|
|
1205
|
+
"description": "Content folder identifier for the blog article."
|
|
1206
|
+
}
|
|
440
1207
|
],
|
|
441
1208
|
"example": "<BlogArticle>\n ## Section heading\n Content here...\n</BlogArticle>"
|
|
442
1209
|
},
|
|
@@ -445,10 +1212,30 @@
|
|
|
445
1212
|
"category": "blog",
|
|
446
1213
|
"description": "Blog listing page wrapper with an optional title, description, and children for rendering blog post cards or custom content.",
|
|
447
1214
|
"props": [
|
|
448
|
-
{
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
1215
|
+
{
|
|
1216
|
+
"name": "id",
|
|
1217
|
+
"type": "string",
|
|
1218
|
+
"required": false,
|
|
1219
|
+
"description": "HTML id for anchor links (e.g. id=\"blog\" enables #blog navigation)."
|
|
1220
|
+
},
|
|
1221
|
+
{
|
|
1222
|
+
"name": "title",
|
|
1223
|
+
"type": "string",
|
|
1224
|
+
"required": false,
|
|
1225
|
+
"description": "Page heading displayed above the blog list."
|
|
1226
|
+
},
|
|
1227
|
+
{
|
|
1228
|
+
"name": "description",
|
|
1229
|
+
"type": "string",
|
|
1230
|
+
"required": false,
|
|
1231
|
+
"description": "Page subheading text."
|
|
1232
|
+
},
|
|
1233
|
+
{
|
|
1234
|
+
"name": "children",
|
|
1235
|
+
"type": "React.ReactNode",
|
|
1236
|
+
"required": false,
|
|
1237
|
+
"description": "Blog post cards or other content."
|
|
1238
|
+
}
|
|
452
1239
|
],
|
|
453
1240
|
"example": "<BlogIndex title=\"Blog\" description=\"Latest articles and insights.\">\n {/* Blog post cards rendered here */}\n</BlogIndex>"
|
|
454
1241
|
},
|
|
@@ -457,8 +1244,18 @@
|
|
|
457
1244
|
"category": "content",
|
|
458
1245
|
"description": "Titled section with prose-style formatting for paragraphs and lists. Used as a child of ContentPage for structured text pages (legal, about, FAQ, etc.).",
|
|
459
1246
|
"props": [
|
|
460
|
-
{
|
|
461
|
-
|
|
1247
|
+
{
|
|
1248
|
+
"name": "title",
|
|
1249
|
+
"type": "string",
|
|
1250
|
+
"required": true,
|
|
1251
|
+
"description": "Section heading (e.g. '1. Data Collection', 'Our Mission')."
|
|
1252
|
+
},
|
|
1253
|
+
{
|
|
1254
|
+
"name": "children",
|
|
1255
|
+
"type": "React.ReactNode",
|
|
1256
|
+
"required": true,
|
|
1257
|
+
"description": "Section content (paragraphs, lists, etc.)."
|
|
1258
|
+
}
|
|
462
1259
|
],
|
|
463
1260
|
"example": "<ContentSection title=\"Our Mission\">\n We build tools that help developers ship faster.\n</ContentSection>"
|
|
464
1261
|
},
|
|
@@ -467,10 +1264,30 @@
|
|
|
467
1264
|
"category": "content",
|
|
468
1265
|
"description": "Top-level wrapper for text-heavy pages (legal, about, contact, etc.). Renders a narrow, centered container with a title and optional last-updated date.",
|
|
469
1266
|
"props": [
|
|
470
|
-
{
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
1267
|
+
{
|
|
1268
|
+
"name": "id",
|
|
1269
|
+
"type": "string",
|
|
1270
|
+
"required": false,
|
|
1271
|
+
"description": "HTML id for anchor links (e.g. id=\"content\" enables #content navigation)."
|
|
1272
|
+
},
|
|
1273
|
+
{
|
|
1274
|
+
"name": "title",
|
|
1275
|
+
"type": "string",
|
|
1276
|
+
"required": true,
|
|
1277
|
+
"description": "Page title displayed as an h1."
|
|
1278
|
+
},
|
|
1279
|
+
{
|
|
1280
|
+
"name": "lastUpdated",
|
|
1281
|
+
"type": "string",
|
|
1282
|
+
"required": false,
|
|
1283
|
+
"description": "Date string displayed below the title (e.g. '2024-01-15')."
|
|
1284
|
+
},
|
|
1285
|
+
{
|
|
1286
|
+
"name": "children",
|
|
1287
|
+
"type": "React.ReactNode",
|
|
1288
|
+
"required": true,
|
|
1289
|
+
"description": "ContentSection children and other content."
|
|
1290
|
+
}
|
|
474
1291
|
],
|
|
475
1292
|
"example": "<ContentPage title=\"About Us\">\n <ContentSection title=\"Our Mission\">\n We build tools that help developers ship faster.\n </ContentSection>\n</ContentPage>"
|
|
476
1293
|
},
|
|
@@ -479,17 +1296,72 @@
|
|
|
479
1296
|
"category": "marketing",
|
|
480
1297
|
"description": "Contact form section with name, email, and message fields. Submits JSON to an external form backend (Formspree, Getform, Basin, etc.). Shows inline success/error states.",
|
|
481
1298
|
"props": [
|
|
482
|
-
{
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
{
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
1299
|
+
{
|
|
1300
|
+
"name": "id",
|
|
1301
|
+
"type": "string",
|
|
1302
|
+
"required": false,
|
|
1303
|
+
"description": "HTML id for anchor links."
|
|
1304
|
+
},
|
|
1305
|
+
{
|
|
1306
|
+
"name": "action",
|
|
1307
|
+
"type": "string",
|
|
1308
|
+
"required": true,
|
|
1309
|
+
"description": "Form backend URL to POST JSON to (e.g. 'https://formspree.io/f/xpwzabcd')."
|
|
1310
|
+
},
|
|
1311
|
+
{
|
|
1312
|
+
"name": "title",
|
|
1313
|
+
"type": "string",
|
|
1314
|
+
"required": false,
|
|
1315
|
+
"description": "Section heading. Defaults to 'Get in Touch'."
|
|
1316
|
+
},
|
|
1317
|
+
{
|
|
1318
|
+
"name": "description",
|
|
1319
|
+
"type": "string",
|
|
1320
|
+
"required": false,
|
|
1321
|
+
"description": "Section subheading text."
|
|
1322
|
+
},
|
|
1323
|
+
{
|
|
1324
|
+
"name": "nameLabel",
|
|
1325
|
+
"type": "string",
|
|
1326
|
+
"required": false,
|
|
1327
|
+
"description": "Label for the name field. Defaults to 'Name'."
|
|
1328
|
+
},
|
|
1329
|
+
{
|
|
1330
|
+
"name": "emailLabel",
|
|
1331
|
+
"type": "string",
|
|
1332
|
+
"required": false,
|
|
1333
|
+
"description": "Label for the email field. Defaults to 'Email'."
|
|
1334
|
+
},
|
|
1335
|
+
{
|
|
1336
|
+
"name": "messageLabel",
|
|
1337
|
+
"type": "string",
|
|
1338
|
+
"required": false,
|
|
1339
|
+
"description": "Label for the message field. Defaults to 'Message'."
|
|
1340
|
+
},
|
|
1341
|
+
{
|
|
1342
|
+
"name": "submitLabel",
|
|
1343
|
+
"type": "string",
|
|
1344
|
+
"required": false,
|
|
1345
|
+
"description": "Submit button text. Defaults to 'Send Message'."
|
|
1346
|
+
},
|
|
1347
|
+
{
|
|
1348
|
+
"name": "successTitle",
|
|
1349
|
+
"type": "string",
|
|
1350
|
+
"required": false,
|
|
1351
|
+
"description": "Heading shown after successful submission. Defaults to 'Message Sent!'."
|
|
1352
|
+
},
|
|
1353
|
+
{
|
|
1354
|
+
"name": "successMessage",
|
|
1355
|
+
"type": "string",
|
|
1356
|
+
"required": false,
|
|
1357
|
+
"description": "Text shown after successful submission. Defaults to 'We'll get back to you as soon as possible.'."
|
|
1358
|
+
},
|
|
1359
|
+
{
|
|
1360
|
+
"name": "variant",
|
|
1361
|
+
"type": "'section' | 'card'",
|
|
1362
|
+
"required": false,
|
|
1363
|
+
"description": "Layout variant. 'section' renders a full Section with glass-1 card. 'card' renders only the glass-2 card without a Section wrapper (for embedding inside other sections). Defaults to 'section'."
|
|
1364
|
+
}
|
|
493
1365
|
],
|
|
494
1366
|
"example": "<ContactForm\n action=\"https://formspree.io/f/xpwzabcd\"\n title=\"Get in Touch\"\n description=\"Have a question? We'd love to hear from you.\"\n/>"
|
|
495
1367
|
},
|
|
@@ -498,14 +1370,54 @@
|
|
|
498
1370
|
"category": "marketing",
|
|
499
1371
|
"description": "Compact email signup form with a single email input and submit button. Supports a full section layout or an inline layout for embedding inside BannerCTA or other components.",
|
|
500
1372
|
"props": [
|
|
501
|
-
{
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
{
|
|
508
|
-
|
|
1373
|
+
{
|
|
1374
|
+
"name": "id",
|
|
1375
|
+
"type": "string",
|
|
1376
|
+
"required": false,
|
|
1377
|
+
"description": "HTML id for anchor links."
|
|
1378
|
+
},
|
|
1379
|
+
{
|
|
1380
|
+
"name": "action",
|
|
1381
|
+
"type": "string",
|
|
1382
|
+
"required": true,
|
|
1383
|
+
"description": "Form backend URL to POST JSON to (e.g. 'https://formspree.io/f/xpwzabcd')."
|
|
1384
|
+
},
|
|
1385
|
+
{
|
|
1386
|
+
"name": "title",
|
|
1387
|
+
"type": "string",
|
|
1388
|
+
"required": false,
|
|
1389
|
+
"description": "Section heading."
|
|
1390
|
+
},
|
|
1391
|
+
{
|
|
1392
|
+
"name": "description",
|
|
1393
|
+
"type": "string",
|
|
1394
|
+
"required": false,
|
|
1395
|
+
"description": "Section subheading text."
|
|
1396
|
+
},
|
|
1397
|
+
{
|
|
1398
|
+
"name": "placeholder",
|
|
1399
|
+
"type": "string",
|
|
1400
|
+
"required": false,
|
|
1401
|
+
"description": "Email input placeholder. Defaults to 'Enter your email'."
|
|
1402
|
+
},
|
|
1403
|
+
{
|
|
1404
|
+
"name": "submitLabel",
|
|
1405
|
+
"type": "string",
|
|
1406
|
+
"required": false,
|
|
1407
|
+
"description": "Submit button text. Defaults to 'Subscribe'."
|
|
1408
|
+
},
|
|
1409
|
+
{
|
|
1410
|
+
"name": "successMessage",
|
|
1411
|
+
"type": "string",
|
|
1412
|
+
"required": false,
|
|
1413
|
+
"description": "Inline text shown after success. Defaults to 'You're subscribed!'."
|
|
1414
|
+
},
|
|
1415
|
+
{
|
|
1416
|
+
"name": "variant",
|
|
1417
|
+
"type": "'section' | 'inline'",
|
|
1418
|
+
"required": false,
|
|
1419
|
+
"description": "Layout variant. 'section' renders a full Section. 'inline' renders only the form row (for use inside BannerCTA). Defaults to 'section'."
|
|
1420
|
+
}
|
|
509
1421
|
],
|
|
510
1422
|
"example": "<NewsletterForm\n action=\"https://formspree.io/f/xpwzabcd\"\n title=\"Never miss an update\"\n description=\"Join 5,000 developers getting our weekly newsletter.\"\n/>"
|
|
511
1423
|
},
|
|
@@ -514,17 +1426,72 @@
|
|
|
514
1426
|
"category": "marketing",
|
|
515
1427
|
"description": "Waitlist signup form with optional name field and badge. Displays a centered section with a glass-1 card form and a success state after submission.",
|
|
516
1428
|
"props": [
|
|
517
|
-
{
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
{
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
1429
|
+
{
|
|
1430
|
+
"name": "id",
|
|
1431
|
+
"type": "string",
|
|
1432
|
+
"required": false,
|
|
1433
|
+
"description": "HTML id for anchor links."
|
|
1434
|
+
},
|
|
1435
|
+
{
|
|
1436
|
+
"name": "action",
|
|
1437
|
+
"type": "string",
|
|
1438
|
+
"required": true,
|
|
1439
|
+
"description": "Form backend URL to POST JSON to (e.g. 'https://formspree.io/f/xpwzabcd')."
|
|
1440
|
+
},
|
|
1441
|
+
{
|
|
1442
|
+
"name": "title",
|
|
1443
|
+
"type": "string",
|
|
1444
|
+
"required": false,
|
|
1445
|
+
"description": "Section heading. Defaults to 'Join the Waitlist'."
|
|
1446
|
+
},
|
|
1447
|
+
{
|
|
1448
|
+
"name": "description",
|
|
1449
|
+
"type": "string",
|
|
1450
|
+
"required": false,
|
|
1451
|
+
"description": "Section subheading text."
|
|
1452
|
+
},
|
|
1453
|
+
{
|
|
1454
|
+
"name": "badge",
|
|
1455
|
+
"type": "string",
|
|
1456
|
+
"required": false,
|
|
1457
|
+
"description": "Badge text shown above the title (e.g. '2,400+ signups')."
|
|
1458
|
+
},
|
|
1459
|
+
{
|
|
1460
|
+
"name": "showName",
|
|
1461
|
+
"type": "boolean",
|
|
1462
|
+
"required": false,
|
|
1463
|
+
"description": "Show a name input field in addition to email. Defaults to false."
|
|
1464
|
+
},
|
|
1465
|
+
{
|
|
1466
|
+
"name": "nameLabel",
|
|
1467
|
+
"type": "string",
|
|
1468
|
+
"required": false,
|
|
1469
|
+
"description": "Label for the name field. Defaults to 'Name'."
|
|
1470
|
+
},
|
|
1471
|
+
{
|
|
1472
|
+
"name": "emailLabel",
|
|
1473
|
+
"type": "string",
|
|
1474
|
+
"required": false,
|
|
1475
|
+
"description": "Label for the email field. Defaults to 'Email'."
|
|
1476
|
+
},
|
|
1477
|
+
{
|
|
1478
|
+
"name": "submitLabel",
|
|
1479
|
+
"type": "string",
|
|
1480
|
+
"required": false,
|
|
1481
|
+
"description": "Submit button text. Defaults to 'Join Waitlist'."
|
|
1482
|
+
},
|
|
1483
|
+
{
|
|
1484
|
+
"name": "successTitle",
|
|
1485
|
+
"type": "string",
|
|
1486
|
+
"required": false,
|
|
1487
|
+
"description": "Heading shown after success. Defaults to 'You're on the list!'."
|
|
1488
|
+
},
|
|
1489
|
+
{
|
|
1490
|
+
"name": "successMessage",
|
|
1491
|
+
"type": "string",
|
|
1492
|
+
"required": false,
|
|
1493
|
+
"description": "Text shown after success. Defaults to 'We'll notify you when it's your turn.'."
|
|
1494
|
+
}
|
|
528
1495
|
],
|
|
529
1496
|
"example": "<WaitlistForm\n action=\"https://formspree.io/f/xpwzabcd\"\n title=\"Be the first in line\"\n description=\"Join the waitlist for early access.\"\n badge=\"2,400+ signups\"\n showName={true}\n/>"
|
|
530
1497
|
},
|
|
@@ -533,13 +1500,48 @@
|
|
|
533
1500
|
"category": "marketing",
|
|
534
1501
|
"description": "Data-only child component of Form. Defines a single field in a generic form. Renders nothing on its own — the parent Form component reads its props to build the form UI.",
|
|
535
1502
|
"props": [
|
|
536
|
-
{
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
{
|
|
1503
|
+
{
|
|
1504
|
+
"name": "name",
|
|
1505
|
+
"type": "string",
|
|
1506
|
+
"required": true,
|
|
1507
|
+
"description": "Field name used as the key in the submitted JSON payload."
|
|
1508
|
+
},
|
|
1509
|
+
{
|
|
1510
|
+
"name": "label",
|
|
1511
|
+
"type": "string",
|
|
1512
|
+
"required": true,
|
|
1513
|
+
"description": "Visible label text for the field."
|
|
1514
|
+
},
|
|
1515
|
+
{
|
|
1516
|
+
"name": "type",
|
|
1517
|
+
"type": "'text' | 'email' | 'tel' | 'url' | 'textarea' | 'select'",
|
|
1518
|
+
"required": false,
|
|
1519
|
+
"description": "Input type. Defaults to 'text'."
|
|
1520
|
+
},
|
|
1521
|
+
{
|
|
1522
|
+
"name": "placeholder",
|
|
1523
|
+
"type": "string",
|
|
1524
|
+
"required": false,
|
|
1525
|
+
"description": "Placeholder text."
|
|
1526
|
+
},
|
|
1527
|
+
{
|
|
1528
|
+
"name": "required",
|
|
1529
|
+
"type": "boolean",
|
|
1530
|
+
"required": false,
|
|
1531
|
+
"description": "Whether the field is required."
|
|
1532
|
+
},
|
|
1533
|
+
{
|
|
1534
|
+
"name": "options",
|
|
1535
|
+
"type": "string[]",
|
|
1536
|
+
"required": false,
|
|
1537
|
+
"description": "Options for select-type fields."
|
|
1538
|
+
},
|
|
1539
|
+
{
|
|
1540
|
+
"name": "colSpan",
|
|
1541
|
+
"type": "number",
|
|
1542
|
+
"required": false,
|
|
1543
|
+
"description": "Number of grid columns this field spans (use with Form columns prop). E.g. colSpan={2} makes the field span the full width in a 2-column layout."
|
|
1544
|
+
}
|
|
543
1545
|
],
|
|
544
1546
|
"example": "<FormField name=\"email\" type=\"email\" label=\"Work Email\" required={true} colSpan={2} />"
|
|
545
1547
|
},
|
|
@@ -548,15 +1550,60 @@
|
|
|
548
1550
|
"category": "marketing",
|
|
549
1551
|
"description": "Generic form section that renders a configurable form from FormField children. Supports multi-column layouts, various input types including select, and submits JSON to an external form backend. Uses the server-shell + client-island pattern.",
|
|
550
1552
|
"props": [
|
|
551
|
-
{
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
{
|
|
558
|
-
|
|
559
|
-
|
|
1553
|
+
{
|
|
1554
|
+
"name": "id",
|
|
1555
|
+
"type": "string",
|
|
1556
|
+
"required": false,
|
|
1557
|
+
"description": "HTML id for anchor links."
|
|
1558
|
+
},
|
|
1559
|
+
{
|
|
1560
|
+
"name": "action",
|
|
1561
|
+
"type": "string",
|
|
1562
|
+
"required": true,
|
|
1563
|
+
"description": "Form backend URL to POST JSON to (e.g. 'https://formspree.io/f/xpwzabcd')."
|
|
1564
|
+
},
|
|
1565
|
+
{
|
|
1566
|
+
"name": "title",
|
|
1567
|
+
"type": "string",
|
|
1568
|
+
"required": false,
|
|
1569
|
+
"description": "Section heading."
|
|
1570
|
+
},
|
|
1571
|
+
{
|
|
1572
|
+
"name": "description",
|
|
1573
|
+
"type": "string",
|
|
1574
|
+
"required": false,
|
|
1575
|
+
"description": "Section subheading text."
|
|
1576
|
+
},
|
|
1577
|
+
{
|
|
1578
|
+
"name": "columns",
|
|
1579
|
+
"type": "number",
|
|
1580
|
+
"required": false,
|
|
1581
|
+
"description": "Number of grid columns (1, 2, 3, or 4). Defaults to 1."
|
|
1582
|
+
},
|
|
1583
|
+
{
|
|
1584
|
+
"name": "submitLabel",
|
|
1585
|
+
"type": "string",
|
|
1586
|
+
"required": false,
|
|
1587
|
+
"description": "Submit button text. Defaults to 'Submit'."
|
|
1588
|
+
},
|
|
1589
|
+
{
|
|
1590
|
+
"name": "successTitle",
|
|
1591
|
+
"type": "string",
|
|
1592
|
+
"required": false,
|
|
1593
|
+
"description": "Heading shown after success. Defaults to 'Submitted!'."
|
|
1594
|
+
},
|
|
1595
|
+
{
|
|
1596
|
+
"name": "successMessage",
|
|
1597
|
+
"type": "string",
|
|
1598
|
+
"required": false,
|
|
1599
|
+
"description": "Text shown after success. Defaults to 'Thank you. We'll be in touch soon.'."
|
|
1600
|
+
},
|
|
1601
|
+
{
|
|
1602
|
+
"name": "children",
|
|
1603
|
+
"type": "React.ReactNode",
|
|
1604
|
+
"required": true,
|
|
1605
|
+
"description": "FormField children defining the form fields."
|
|
1606
|
+
}
|
|
560
1607
|
],
|
|
561
1608
|
"example": "<Form action=\"https://formspree.io/f/xpwzabcd\" title=\"Book a Demo\" columns={2}>\n <FormField name=\"firstName\" label=\"First Name\" required={true} />\n <FormField name=\"lastName\" label=\"Last Name\" required={true} />\n <FormField name=\"email\" type=\"email\" label=\"Work Email\" required={true} colSpan={2} />\n <FormField name=\"teamSize\" type=\"select\" label=\"Team Size\" options={[\"1-10\", \"11-50\", \"51-200\", \"200+\"]} />\n <FormField name=\"message\" type=\"textarea\" label=\"Message\" colSpan={2} />\n</Form>"
|
|
562
1609
|
},
|
|
@@ -565,16 +1612,138 @@
|
|
|
565
1612
|
"category": "marketing",
|
|
566
1613
|
"description": "Embeds an external form (Tally, Typeform, or custom URL) via iframe. Supports an inline iframe mode or a popup mode that opens the form in a centered dialog.",
|
|
567
1614
|
"props": [
|
|
568
|
-
{
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
{
|
|
575
|
-
|
|
1615
|
+
{
|
|
1616
|
+
"name": "id",
|
|
1617
|
+
"type": "string",
|
|
1618
|
+
"required": false,
|
|
1619
|
+
"description": "HTML id for anchor links."
|
|
1620
|
+
},
|
|
1621
|
+
{
|
|
1622
|
+
"name": "src",
|
|
1623
|
+
"type": "string",
|
|
1624
|
+
"required": true,
|
|
1625
|
+
"description": "Form ID or full URL. For Tally, pass the form ID (e.g. 'wMxKqA'). For Typeform, pass the form ID. For custom, pass the full URL."
|
|
1626
|
+
},
|
|
1627
|
+
{
|
|
1628
|
+
"name": "provider",
|
|
1629
|
+
"type": "'tally' | 'typeform' | 'custom'",
|
|
1630
|
+
"required": false,
|
|
1631
|
+
"description": "Form provider. Determines URL resolution. Defaults to 'custom'."
|
|
1632
|
+
},
|
|
1633
|
+
{
|
|
1634
|
+
"name": "title",
|
|
1635
|
+
"type": "string",
|
|
1636
|
+
"required": false,
|
|
1637
|
+
"description": "Section heading (iframe mode only)."
|
|
1638
|
+
},
|
|
1639
|
+
{
|
|
1640
|
+
"name": "description",
|
|
1641
|
+
"type": "string",
|
|
1642
|
+
"required": false,
|
|
1643
|
+
"description": "Section subheading text (iframe mode only)."
|
|
1644
|
+
},
|
|
1645
|
+
{
|
|
1646
|
+
"name": "height",
|
|
1647
|
+
"type": "number",
|
|
1648
|
+
"required": false,
|
|
1649
|
+
"description": "iframe height in pixels. Defaults to 500."
|
|
1650
|
+
},
|
|
1651
|
+
{
|
|
1652
|
+
"name": "mode",
|
|
1653
|
+
"type": "'iframe' | 'popup'",
|
|
1654
|
+
"required": false,
|
|
1655
|
+
"description": "Display mode. 'iframe' embeds inline. 'popup' shows a button that opens a dialog. Defaults to 'iframe'."
|
|
1656
|
+
},
|
|
1657
|
+
{
|
|
1658
|
+
"name": "buttonLabel",
|
|
1659
|
+
"type": "string",
|
|
1660
|
+
"required": false,
|
|
1661
|
+
"description": "Button text for popup mode. Defaults to 'Open Form'."
|
|
1662
|
+
}
|
|
576
1663
|
],
|
|
577
1664
|
"example": "<FormEmbed src=\"wMxKqA\" provider=\"tally\" title=\"Contact Us\" height={500} />"
|
|
1665
|
+
},
|
|
1666
|
+
{
|
|
1667
|
+
"name": "LocationItem",
|
|
1668
|
+
"category": "marketing",
|
|
1669
|
+
"description": "Data-only component that defines a single location. Must be used as a child of Location. Renders nothing on its own; its props are consumed by the parent.",
|
|
1670
|
+
"props": [
|
|
1671
|
+
{
|
|
1672
|
+
"name": "name",
|
|
1673
|
+
"type": "string",
|
|
1674
|
+
"required": true,
|
|
1675
|
+
"description": "Location name displayed as a heading (e.g. \"San Francisco Office\")."
|
|
1676
|
+
},
|
|
1677
|
+
{
|
|
1678
|
+
"name": "mapUrl",
|
|
1679
|
+
"type": "string",
|
|
1680
|
+
"required": true,
|
|
1681
|
+
"description": "Google Maps embed URL for the iframe."
|
|
1682
|
+
},
|
|
1683
|
+
{
|
|
1684
|
+
"name": "address",
|
|
1685
|
+
"type": "string",
|
|
1686
|
+
"required": false,
|
|
1687
|
+
"description": "Street address displayed with a map pin icon."
|
|
1688
|
+
},
|
|
1689
|
+
{
|
|
1690
|
+
"name": "phone",
|
|
1691
|
+
"type": "string",
|
|
1692
|
+
"required": false,
|
|
1693
|
+
"description": "Phone number displayed as a tel: link."
|
|
1694
|
+
},
|
|
1695
|
+
{
|
|
1696
|
+
"name": "email",
|
|
1697
|
+
"type": "string",
|
|
1698
|
+
"required": false,
|
|
1699
|
+
"description": "Email address displayed as a mailto: link."
|
|
1700
|
+
},
|
|
1701
|
+
{
|
|
1702
|
+
"name": "hours",
|
|
1703
|
+
"type": "{ day: string; hours: string }[]",
|
|
1704
|
+
"required": false,
|
|
1705
|
+
"description": "Opening hours displayed as day/hours pairs."
|
|
1706
|
+
},
|
|
1707
|
+
{
|
|
1708
|
+
"name": "mapHeight",
|
|
1709
|
+
"type": "number",
|
|
1710
|
+
"required": false,
|
|
1711
|
+
"description": "Height of the map iframe in pixels. Defaults to 400."
|
|
1712
|
+
}
|
|
1713
|
+
],
|
|
1714
|
+
"example": "<LocationItem\n name=\"Hauptsitz\"\n mapUrl=\"https://www.google.com/maps/embed?pb=...\"\n address=\"Musterstraße 1, 78462 Konstanz\"\n phone=\"+49 7531 123456\"\n email=\"info@firma.de\"\n hours={[\n { day: \"Mo-Fr\", hours: \"9:00 - 18:00\" },\n { day: \"Sa-So\", hours: \"Geschlossen\" }\n ]}\n/>"
|
|
1715
|
+
},
|
|
1716
|
+
{
|
|
1717
|
+
"name": "Location",
|
|
1718
|
+
"category": "marketing",
|
|
1719
|
+
"description": "Section displaying one or more locations with embedded Google Maps, address, phone, email, and opening hours. Consumes LocationItem children.",
|
|
1720
|
+
"props": [
|
|
1721
|
+
{
|
|
1722
|
+
"name": "id",
|
|
1723
|
+
"type": "string",
|
|
1724
|
+
"required": false,
|
|
1725
|
+
"description": "HTML id for anchor links (e.g. id=\"location\" enables #location navigation)."
|
|
1726
|
+
},
|
|
1727
|
+
{
|
|
1728
|
+
"name": "title",
|
|
1729
|
+
"type": "string",
|
|
1730
|
+
"required": false,
|
|
1731
|
+
"description": "Section heading displayed above the locations."
|
|
1732
|
+
},
|
|
1733
|
+
{
|
|
1734
|
+
"name": "description",
|
|
1735
|
+
"type": "string",
|
|
1736
|
+
"required": false,
|
|
1737
|
+
"description": "Section subheading text."
|
|
1738
|
+
},
|
|
1739
|
+
{
|
|
1740
|
+
"name": "children",
|
|
1741
|
+
"type": "React.ReactNode",
|
|
1742
|
+
"required": true,
|
|
1743
|
+
"description": "LocationItem children."
|
|
1744
|
+
}
|
|
1745
|
+
],
|
|
1746
|
+
"example": "<Location title=\"Besuchen Sie uns\">\n <LocationItem\n name=\"Hauptsitz\"\n mapUrl=\"https://www.google.com/maps/embed?pb=...\"\n address=\"Musterstraße 1, 78462 Konstanz\"\n phone=\"+49 7531 123456\"\n />\n <LocationItem\n name=\"Zweigstelle\"\n mapUrl=\"https://www.google.com/maps/embed?pb=...\"\n address=\"Beispielweg 5, 10115 Berlin\"\n />\n</Location>"
|
|
578
1747
|
}
|
|
579
1748
|
]
|
|
580
1749
|
}
|