@shipsite.dev/components 0.2.69 → 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 +1384 -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/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/package.json +1 -1
- package/src/index.ts +1 -0
- package/src/marketing/Location.tsx +112 -0
package/components.json
CHANGED
|
@@ -6,15 +6,60 @@
|
|
|
6
6
|
"category": "marketing",
|
|
7
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
|
-
|
|
17
|
-
|
|
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
|
+
}
|
|
18
63
|
],
|
|
19
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/>"
|
|
20
65
|
},
|
|
@@ -23,9 +68,24 @@
|
|
|
23
68
|
"category": "marketing",
|
|
24
69
|
"description": "Individual feature card with an optional icon, title, and description. Used as a child of the Features grid component.",
|
|
25
70
|
"props": [
|
|
26
|
-
{
|
|
27
|
-
|
|
28
|
-
|
|
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
|
+
}
|
|
29
89
|
],
|
|
30
90
|
"example": "<Feature title=\"Fast\" description=\"Blazing fast performance out of the box.\" />"
|
|
31
91
|
},
|
|
@@ -34,11 +94,36 @@
|
|
|
34
94
|
"category": "marketing",
|
|
35
95
|
"description": "Section that displays a grid of Feature cards with an optional section title and description. Supports 2, 3, or 4 column layouts.",
|
|
36
96
|
"props": [
|
|
37
|
-
{
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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
|
+
}
|
|
42
127
|
],
|
|
43
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>"
|
|
44
129
|
},
|
|
@@ -47,9 +132,24 @@
|
|
|
47
132
|
"category": "marketing",
|
|
48
133
|
"description": "Individual bullet-point item within an AlternatingFeatureRow. Displays an optional icon, title, and description.",
|
|
49
134
|
"props": [
|
|
50
|
-
{
|
|
51
|
-
|
|
52
|
-
|
|
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
|
+
}
|
|
53
153
|
],
|
|
54
154
|
"example": "<AlternatingFeatureItem icon=\"⚡\" title=\"Lightning fast\" description=\"Sub-second load times.\" />"
|
|
55
155
|
},
|
|
@@ -58,11 +158,36 @@
|
|
|
58
158
|
"category": "marketing",
|
|
59
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.",
|
|
60
160
|
"props": [
|
|
61
|
-
{
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
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
|
+
}
|
|
66
191
|
],
|
|
67
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>"
|
|
68
193
|
},
|
|
@@ -71,10 +196,30 @@
|
|
|
71
196
|
"category": "marketing",
|
|
72
197
|
"description": "Container section for alternating feature rows. Renders rows with alternating text/image layout separated by dividers.",
|
|
73
198
|
"props": [
|
|
74
|
-
{
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
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
|
+
}
|
|
78
223
|
],
|
|
79
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>"
|
|
80
225
|
},
|
|
@@ -83,13 +228,48 @@
|
|
|
83
228
|
"category": "marketing",
|
|
84
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.",
|
|
85
230
|
"props": [
|
|
86
|
-
{
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
{
|
|
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
|
+
}
|
|
93
273
|
],
|
|
94
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/>"
|
|
95
275
|
},
|
|
@@ -98,8 +278,18 @@
|
|
|
98
278
|
"category": "marketing",
|
|
99
279
|
"description": "Data-only component that defines a row in the pricing comparison table. Must be used as a child of PricingSection.",
|
|
100
280
|
"props": [
|
|
101
|
-
{
|
|
102
|
-
|
|
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
|
+
}
|
|
103
293
|
],
|
|
104
294
|
"example": "<ComparisonRow feature=\"Custom domains\" values={[false, true, true]} />"
|
|
105
295
|
},
|
|
@@ -108,7 +298,12 @@
|
|
|
108
298
|
"category": "marketing",
|
|
109
299
|
"description": "Data-only component that adds a category header row in the pricing comparison table. Must be used as a child of PricingSection.",
|
|
110
300
|
"props": [
|
|
111
|
-
{
|
|
301
|
+
{
|
|
302
|
+
"name": "title",
|
|
303
|
+
"type": "string",
|
|
304
|
+
"required": true,
|
|
305
|
+
"description": "Category heading text."
|
|
306
|
+
}
|
|
112
307
|
],
|
|
113
308
|
"example": "<ComparisonCategory title=\"Core Features\" />"
|
|
114
309
|
},
|
|
@@ -117,13 +312,48 @@
|
|
|
117
312
|
"category": "marketing",
|
|
118
313
|
"description": "Full pricing section with plan cards, optional monthly/yearly toggle, and an optional feature comparison table. Consumes PricingPlan, ComparisonRow, and ComparisonCategory children.",
|
|
119
314
|
"props": [
|
|
120
|
-
{
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
{
|
|
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
|
+
}
|
|
127
357
|
],
|
|
128
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>"
|
|
129
359
|
},
|
|
@@ -132,11 +362,36 @@
|
|
|
132
362
|
"category": "marketing",
|
|
133
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.",
|
|
134
364
|
"props": [
|
|
135
|
-
{
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
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
|
+
}
|
|
140
395
|
],
|
|
141
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/>"
|
|
142
397
|
},
|
|
@@ -145,12 +400,42 @@
|
|
|
145
400
|
"category": "marketing",
|
|
146
401
|
"description": "Single large testimonial quote block with author info, displayed in a centered glass card.",
|
|
147
402
|
"props": [
|
|
148
|
-
{
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
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
|
+
}
|
|
154
439
|
],
|
|
155
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/>"
|
|
156
441
|
},
|
|
@@ -159,12 +444,42 @@
|
|
|
159
444
|
"category": "marketing",
|
|
160
445
|
"description": "Compact testimonial card with optional star rating. Used as a child of the Testimonials grid component.",
|
|
161
446
|
"props": [
|
|
162
|
-
{
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
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
|
+
}
|
|
168
483
|
],
|
|
169
484
|
"example": "<TestimonialCard\n quote=\"Incredible experience!\"\n author=\"John Smith\"\n role=\"CTO\"\n company=\"Globex\"\n rating={5}\n/>"
|
|
170
485
|
},
|
|
@@ -173,11 +488,36 @@
|
|
|
173
488
|
"category": "marketing",
|
|
174
489
|
"description": "Grid section that displays multiple TestimonialCard components with an optional section title and description.",
|
|
175
490
|
"props": [
|
|
176
|
-
{
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
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
|
+
}
|
|
181
521
|
],
|
|
182
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>"
|
|
183
523
|
},
|
|
@@ -186,12 +526,42 @@
|
|
|
186
526
|
"category": "marketing",
|
|
187
527
|
"description": "Full-width call-to-action banner with a centered glow effect, title, optional subtext, and a primary button. Supports additional children content.",
|
|
188
528
|
"props": [
|
|
189
|
-
{
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
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
|
+
}
|
|
195
565
|
],
|
|
196
566
|
"example": "<BannerCTA\n title=\"Ready to get started?\"\n buttonText=\"Start Free Trial\"\n buttonHref=\"/signup\"\n subtext=\"No credit card required.\"\n/>"
|
|
197
567
|
},
|
|
@@ -200,8 +570,18 @@
|
|
|
200
570
|
"category": "marketing",
|
|
201
571
|
"description": "Small inline feature item with an optional icon, designed to be placed inside a BannerCTA as a child.",
|
|
202
572
|
"props": [
|
|
203
|
-
{
|
|
204
|
-
|
|
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
|
+
}
|
|
205
585
|
],
|
|
206
586
|
"example": "<BannerFeature title=\"99.9% uptime\" icon=\"✅\" />"
|
|
207
587
|
},
|
|
@@ -210,8 +590,18 @@
|
|
|
210
590
|
"category": "marketing",
|
|
211
591
|
"description": "Individual FAQ accordion item with a question trigger and expandable answer content. Used as a child of FAQ.",
|
|
212
592
|
"props": [
|
|
213
|
-
{
|
|
214
|
-
|
|
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
|
+
}
|
|
215
605
|
],
|
|
216
606
|
"example": "<FAQItem question=\"How does billing work?\">\n We bill monthly based on your plan. You can cancel anytime.\n</FAQItem>"
|
|
217
607
|
},
|
|
@@ -220,10 +610,30 @@
|
|
|
220
610
|
"category": "marketing",
|
|
221
611
|
"description": "FAQ section with a collapsible accordion. Contains FAQItem children with question/answer pairs.",
|
|
222
612
|
"props": [
|
|
223
|
-
{
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
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
|
+
}
|
|
227
637
|
],
|
|
228
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>"
|
|
229
639
|
},
|
|
@@ -232,8 +642,18 @@
|
|
|
232
642
|
"category": "marketing",
|
|
233
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.",
|
|
234
644
|
"props": [
|
|
235
|
-
{
|
|
236
|
-
|
|
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
|
+
}
|
|
237
657
|
],
|
|
238
658
|
"example": "<Step title=\"Sign up\" description=\"Create your free account in seconds.\" />"
|
|
239
659
|
},
|
|
@@ -242,10 +662,30 @@
|
|
|
242
662
|
"category": "marketing",
|
|
243
663
|
"description": "Numbered step-by-step section with connected timeline indicators. Consumes Step children to display a vertical progression.",
|
|
244
664
|
"props": [
|
|
245
|
-
{
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
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
|
+
}
|
|
249
689
|
],
|
|
250
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>"
|
|
251
691
|
},
|
|
@@ -254,10 +694,30 @@
|
|
|
254
694
|
"category": "marketing",
|
|
255
695
|
"description": "Individual card in a grid layout with an optional icon, title, description, and link. Used as a child of CardGrid.",
|
|
256
696
|
"props": [
|
|
257
|
-
{
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
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
|
+
}
|
|
261
721
|
],
|
|
262
722
|
"example": "<CardGridItem title=\"Documentation\" description=\"Read the full docs.\" href=\"/docs\" />"
|
|
263
723
|
},
|
|
@@ -266,9 +726,24 @@
|
|
|
266
726
|
"category": "marketing",
|
|
267
727
|
"description": "Responsive grid container for CardGridItem children. Supports 2, 3, or 4 column layouts.",
|
|
268
728
|
"props": [
|
|
269
|
-
{
|
|
270
|
-
|
|
271
|
-
|
|
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
|
+
}
|
|
272
747
|
],
|
|
273
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>"
|
|
274
749
|
},
|
|
@@ -277,11 +752,36 @@
|
|
|
277
752
|
"category": "marketing",
|
|
278
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.",
|
|
279
754
|
"props": [
|
|
280
|
-
{
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
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
|
+
}
|
|
285
785
|
],
|
|
286
786
|
"example": "<CalloutCard\n title=\"Pro Tip\"\n description=\"You can customize the theme in settings.\"\n variant=\"info\"\n/>"
|
|
287
787
|
},
|
|
@@ -290,10 +790,30 @@
|
|
|
290
790
|
"category": "marketing",
|
|
291
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.",
|
|
292
792
|
"props": [
|
|
293
|
-
{
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
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
|
+
}
|
|
297
817
|
],
|
|
298
818
|
"example": "<Stat value=\"99.9\" suffix=\"%\" label=\"Uptime\" description=\"Average over the last 12 months\" />"
|
|
299
819
|
},
|
|
@@ -302,9 +822,24 @@
|
|
|
302
822
|
"category": "marketing",
|
|
303
823
|
"description": "Section displaying key statistics in a 2x2 or 4-column grid with large gradient numbers. Consumes Stat children.",
|
|
304
824
|
"props": [
|
|
305
|
-
{
|
|
306
|
-
|
|
307
|
-
|
|
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
|
+
}
|
|
308
843
|
],
|
|
309
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>"
|
|
310
845
|
},
|
|
@@ -313,11 +848,36 @@
|
|
|
313
848
|
"category": "marketing",
|
|
314
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.",
|
|
315
850
|
"props": [
|
|
316
|
-
{
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
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
|
+
}
|
|
321
881
|
],
|
|
322
882
|
"example": "<BentoItem title=\"Analytics\" description=\"Track everything in real-time.\" image=\"/images/analytics.png\" span={2} />"
|
|
323
883
|
},
|
|
@@ -326,10 +886,30 @@
|
|
|
326
886
|
"category": "marketing",
|
|
327
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.",
|
|
328
888
|
"props": [
|
|
329
|
-
{
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
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
|
+
}
|
|
333
913
|
],
|
|
334
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>"
|
|
335
915
|
},
|
|
@@ -338,9 +918,24 @@
|
|
|
338
918
|
"category": "marketing",
|
|
339
919
|
"description": "Individual gallery image card with a hover zoom effect and an optional caption. Used as a child of Gallery.",
|
|
340
920
|
"props": [
|
|
341
|
-
{
|
|
342
|
-
|
|
343
|
-
|
|
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
|
+
}
|
|
344
939
|
],
|
|
345
940
|
"example": "<GalleryItem src=\"/images/screenshot-1.png\" alt=\"Dashboard view\" caption=\"The main dashboard\" />"
|
|
346
941
|
},
|
|
@@ -349,11 +944,36 @@
|
|
|
349
944
|
"category": "marketing",
|
|
350
945
|
"description": "Responsive image gallery section with optional title and description. Displays GalleryItem children in a configurable grid.",
|
|
351
946
|
"props": [
|
|
352
|
-
{
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
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
|
+
}
|
|
357
977
|
],
|
|
358
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>"
|
|
359
979
|
},
|
|
@@ -362,10 +982,30 @@
|
|
|
362
982
|
"category": "marketing",
|
|
363
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.",
|
|
364
984
|
"props": [
|
|
365
|
-
{
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
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
|
+
}
|
|
369
1009
|
],
|
|
370
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/>"
|
|
371
1011
|
},
|
|
@@ -374,10 +1014,30 @@
|
|
|
374
1014
|
"category": "marketing",
|
|
375
1015
|
"description": "Individual card within a horizontally scrollable Carousel. Supports an image, title, description, and custom children.",
|
|
376
1016
|
"props": [
|
|
377
|
-
{
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
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
|
+
}
|
|
381
1041
|
],
|
|
382
1042
|
"example": "<CarouselItem title=\"Feature 1\" description=\"Description of feature 1.\" image=\"/images/f1.png\" />"
|
|
383
1043
|
},
|
|
@@ -386,10 +1046,30 @@
|
|
|
386
1046
|
"category": "marketing",
|
|
387
1047
|
"description": "Horizontally scrollable carousel section with snap-scrolling, left/right navigation buttons, and optional title/description. Contains CarouselItem children.",
|
|
388
1048
|
"props": [
|
|
389
|
-
{
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
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
|
+
}
|
|
393
1073
|
],
|
|
394
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>"
|
|
395
1075
|
},
|
|
@@ -398,11 +1078,36 @@
|
|
|
398
1078
|
"category": "marketing",
|
|
399
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.",
|
|
400
1080
|
"props": [
|
|
401
|
-
{
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
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
|
+
}
|
|
406
1111
|
],
|
|
407
1112
|
"example": "<TabItem label=\"Overview\" title=\"Product Overview\" description=\"Everything you need to know.\" image=\"/images/overview.png\" />"
|
|
408
1113
|
},
|
|
@@ -411,10 +1116,30 @@
|
|
|
411
1116
|
"category": "marketing",
|
|
412
1117
|
"description": "Interactive tabbed section with pill-style tab buttons and a content panel that changes based on the active tab. Consumes TabItem children.",
|
|
413
1118
|
"props": [
|
|
414
|
-
{
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
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
|
+
}
|
|
418
1143
|
],
|
|
419
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>"
|
|
420
1145
|
},
|
|
@@ -423,11 +1148,36 @@
|
|
|
423
1148
|
"category": "marketing",
|
|
424
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.",
|
|
425
1150
|
"props": [
|
|
426
|
-
{
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
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
|
+
}
|
|
431
1181
|
],
|
|
432
1182
|
"example": "<PageHero\n title=\"About Us\"\n description=\"Learn more about our mission and team.\"\n badge=\"Company\"\n/>"
|
|
433
1183
|
},
|
|
@@ -436,9 +1186,24 @@
|
|
|
436
1186
|
"category": "blog",
|
|
437
1187
|
"description": "Top-level wrapper for blog article content. Renders a centered, max-width article container with vertical padding.",
|
|
438
1188
|
"props": [
|
|
439
|
-
{
|
|
440
|
-
|
|
441
|
-
|
|
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
|
+
}
|
|
442
1207
|
],
|
|
443
1208
|
"example": "<BlogArticle>\n ## Section heading\n Content here...\n</BlogArticle>"
|
|
444
1209
|
},
|
|
@@ -447,10 +1212,30 @@
|
|
|
447
1212
|
"category": "blog",
|
|
448
1213
|
"description": "Blog listing page wrapper with an optional title, description, and children for rendering blog post cards or custom content.",
|
|
449
1214
|
"props": [
|
|
450
|
-
{
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
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
|
+
}
|
|
454
1239
|
],
|
|
455
1240
|
"example": "<BlogIndex title=\"Blog\" description=\"Latest articles and insights.\">\n {/* Blog post cards rendered here */}\n</BlogIndex>"
|
|
456
1241
|
},
|
|
@@ -459,8 +1244,18 @@
|
|
|
459
1244
|
"category": "content",
|
|
460
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.).",
|
|
461
1246
|
"props": [
|
|
462
|
-
{
|
|
463
|
-
|
|
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
|
+
}
|
|
464
1259
|
],
|
|
465
1260
|
"example": "<ContentSection title=\"Our Mission\">\n We build tools that help developers ship faster.\n</ContentSection>"
|
|
466
1261
|
},
|
|
@@ -469,10 +1264,30 @@
|
|
|
469
1264
|
"category": "content",
|
|
470
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.",
|
|
471
1266
|
"props": [
|
|
472
|
-
{
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
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
|
+
}
|
|
476
1291
|
],
|
|
477
1292
|
"example": "<ContentPage title=\"About Us\">\n <ContentSection title=\"Our Mission\">\n We build tools that help developers ship faster.\n </ContentSection>\n</ContentPage>"
|
|
478
1293
|
},
|
|
@@ -481,17 +1296,72 @@
|
|
|
481
1296
|
"category": "marketing",
|
|
482
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.",
|
|
483
1298
|
"props": [
|
|
484
|
-
{
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
{
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
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
|
+
}
|
|
495
1365
|
],
|
|
496
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/>"
|
|
497
1367
|
},
|
|
@@ -500,14 +1370,54 @@
|
|
|
500
1370
|
"category": "marketing",
|
|
501
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.",
|
|
502
1372
|
"props": [
|
|
503
|
-
{
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
{
|
|
510
|
-
|
|
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
|
+
}
|
|
511
1421
|
],
|
|
512
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/>"
|
|
513
1423
|
},
|
|
@@ -516,17 +1426,72 @@
|
|
|
516
1426
|
"category": "marketing",
|
|
517
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.",
|
|
518
1428
|
"props": [
|
|
519
|
-
{
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
{
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
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
|
+
}
|
|
530
1495
|
],
|
|
531
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/>"
|
|
532
1497
|
},
|
|
@@ -535,13 +1500,48 @@
|
|
|
535
1500
|
"category": "marketing",
|
|
536
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.",
|
|
537
1502
|
"props": [
|
|
538
|
-
{
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
{
|
|
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
|
+
}
|
|
545
1545
|
],
|
|
546
1546
|
"example": "<FormField name=\"email\" type=\"email\" label=\"Work Email\" required={true} colSpan={2} />"
|
|
547
1547
|
},
|
|
@@ -550,15 +1550,60 @@
|
|
|
550
1550
|
"category": "marketing",
|
|
551
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.",
|
|
552
1552
|
"props": [
|
|
553
|
-
{
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
{
|
|
560
|
-
|
|
561
|
-
|
|
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
|
+
}
|
|
562
1607
|
],
|
|
563
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>"
|
|
564
1609
|
},
|
|
@@ -567,16 +1612,138 @@
|
|
|
567
1612
|
"category": "marketing",
|
|
568
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.",
|
|
569
1614
|
"props": [
|
|
570
|
-
{
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
{
|
|
577
|
-
|
|
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
|
+
}
|
|
578
1663
|
],
|
|
579
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>"
|
|
580
1747
|
}
|
|
581
1748
|
]
|
|
582
1749
|
}
|