development/5bf50104-29ef-4c33-8384-c1bcdbb1c399
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
DK
2026-02-09 17:11:14 +00:00
commit e33f41a37a
656 changed files with 77182 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
registry/components/AboutMetric.json Normal file
View File

@@ -0,0 +1,49 @@
{
"name": "AboutMetric",
"description": "About section with centered animated title and metric cards in a responsive grid.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "At Berco Inc. we redefine innovation by empowering businesses to reach their full potential",
"minChars": 20,
"maxChars": 300
}
},
"metricRules": {
"minMetrics": 2,
"maxMetrics": 4,
"structure": {
"icon": "LucideIcon - Icon component from lucide-react (required)",
"label": "string - Descriptive label for the metric (required, e.g., 'Conversions', 'Partnered Brands')",
"value": "string - Metric value to display (required, e.g., '7,000+', '2018', '30+', '100M+')"
},
"note": "Provide 2-4 metrics for optimal layout. Grid automatically adjusts columns based on metric count (2 metrics = 2 cols, 3 metrics = 3 cols, 4 metrics = 4 cols). Import icons from lucide-react."
}
},
"propsSchema": {
"title": "string",
"metrics": "Array<{ icon: LucideIcon, label: string, value: string }>",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'About metrics section')",
"className?": "string"
},
"usageExample": "// Wrap in ThemeProvider\nimport { TrendingUp, ShoppingCart, Users, Globe } from 'lucide-react';\n\n<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"reveal-blur\" borderRadius=\"soft\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <AboutMetric \n title=\"At Berco Inc. we redefine innovation by empowering businesses to reach their full potential\" \n useInvertedBackground={\"noInvert\"}\n metrics={[\n { icon: TrendingUp, label: 'Conversions', value: '7,000+' },\n { icon: ShoppingCart, label: 'Ecommerce Since', value: '2018' },\n { icon: Users, label: 'Partnered Brands', value: '30+' },\n { icon: Globe, label: 'Global Impressions Generated Annually', value: '100M+' }\n ]} \n />\n</ThemeProvider>",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for about pages",
"Use for company information",
"Use for statistics displays",
"Use for achievement showcases",
"Requires metrics[]"
],
"dont": [
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

21
registry/components/AnimatedAuroraBackground.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "AnimatedAuroraBackground",
"description": "Aurora borealis effect with animated repeating gradients and mix-blend-difference.",
"constraints": {},
"propsSchema": {
"className?": "string",
"showRadialGradient?": "boolean (default: true)",
"invertColors": "boolean (REQUIRED - true for light backgrounds, false for dark backgrounds)"
},
"usageExample": "<AnimatedAuroraBackground invertColors={true} showRadialGradient={true} />",
"do": [
"Use for feature showcases",
"Use for capability displays"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

24
registry/components/AnimatedGridBackground.json Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "AnimatedGridBackground",
"description": "Grid pattern with animated pulsing squares using Framer Motion.",
"constraints": {},
"propsSchema": {
"squareSize?": "number (default: 100)",
"numSquares?": "number (default: 50)",
"maxOpacity?": "number (default: 0.15)",
"className?": "string"
},
"usageExample": "<AnimatedGridBackground squareSize={100} numSquares={50} maxOpacity={0.15} />",
"do": [
"Use for feature showcases",
"Use for capability displays"
],
"dont": [
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

20
registry/components/AuroraBackground.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "AuroraBackground",
"description": "Aurora borealis-style background with multiple rotated gradient bars and blur effect.",
"constraints": {},
"propsSchema": {
"className?": "string"
},
"usageExample": "<AuroraBackground />",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

33
registry/components/AvatarGroup.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "AvatarGroup",
"description": "Displays a group of user avatars with overlapping layout and optional text label.",
"constraints": {
"textRules": {
"text": {
"required": false,
"example": "Join 1,000+ members",
"minChars": 2,
"maxChars": 50
}
}
},
"propsSchema": {
"avatars": "Array<{ src: string, alt: string }> - User avatar images",
"text?": "string",
"maxVisible?": "number (default: 5)",
"className?": "string",
"ariaLabel?": "string (default: 'User avatars')"
},
"usageExample": "<AvatarGroup avatars={[{ src: '/avatar1.jpg', alt: 'User 1' }, { src: '/avatar2.jpg', alt: 'User 2' }]} text=\"Join 1,000+ members\" />",
"do": [
"Use for social proof",
"Use for customer reviews",
"Requires avatars[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

27
registry/components/BentoGlobe.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "BentoGlobe",
"description": "Interactive 3D rotating globe component using COBE library with theme-aware colors and customizable markers.",
"constraints": {
"globeRules": {
"config": {
"required": false,
"note": "Optional COBEOptions object to customize globe appearance. Default config uses theme colors: baseColor and glowColor use --card, markerColor uses --primary-cta. Can override: phi (rotation), theta (tilt), dark (darkness 0-1), diffuse (lighting), mapSamples, mapBrightness, markers (array of {location: [lat, lng], size: number}), and more. See COBE documentation for full options."
}
}
},
"propsSchema": {
"className?": "string",
"config?": "COBEOptions - Custom globe configuration (see COBE docs)"
},
"usageExample": "<Globe className=\"w-full h-full\" config={{ markers: [{ location: [40.7128, -74.006], size: 0.1 }] }} />",
"do": [
"Use for feature showcases",
"Use for capability displays"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

64
registry/components/BlogCardOne.json Normal file
View File

@@ -0,0 +1,64 @@
{
"name": "BlogCardOne",
"description": "Blog section with card grid/carousel layout featuring image, category, title, excerpt, and author info.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Latest Articles",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Insights and updates from our team",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Blog",
"minChars": 2,
"maxChars": 30
}
},
"blogRules": {
"blogs": {
"required": true,
"minItems": 1,
"example": "[{\"id\": \"1\", \"category\": \"Design\", \"title\": \"UX review presentations\", \"excerpt\": \"How to create compelling presentations\", \"imageSrc\": \"/blog-1.jpg\", \"authorName\": \"John Doe\", \"authorAvatar\": \"/avatar-1.jpg\", \"date\": \"20 Jan 2025\"}]",
"note": "Array of blog items. Each item requires id, category, title, excerpt, imageSrc, authorName, authorAvatar, and date."
}
}
},
"propsSchema": {
"blogs": "Array<{ id: string, category: string, title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Blog section')",
"className?": "string"
},
"usageExample": "<BlogCardOne blogs={[{id: '1', category: 'Design', title: 'UX review presentations', excerpt: 'How to create compelling presentations that wow your audience', imageSrc: '/blog-1.jpg', authorName: 'Olivia Rhye', authorAvatar: '/avatar-1.jpg', date: '20 Jan 2025', onBlogClick: () => console.log('clicked')}]} title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} animationType=\"slide-up\" carouselMode=\"buttons\" />",
"do": [
"Use for blog listings",
"Use for article grids",
"Requires blogs[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

67
registry/components/BlogCardThree.json Normal file
View File

@@ -0,0 +1,67 @@
{
"name": "BlogCardThree",
"description": "Blog section with vertical card layout featuring tag, title, description, and media with overlay button.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Featured Articles",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Explore our latest insights",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Blog",
"minChars": 2,
"maxChars": 30
}
},
"blogRules": {
"blogs": {
"required": true,
"minItems": 1,
"example": "[{\"id\": \"1\", \"category\": \"Software Development\", \"title\": \"Redefining Digital Performance\", \"excerpt\": \"Optimizing speed and scalability\", \"imageSrc\": \"/blog-1.jpg\"}]",
"note": "Array of blog items. Each item requires id, category, title, excerpt, and imageSrc."
}
}
},
"propsSchema": {
"blogs": "Array<{ id: string, category: string, title: string, excerpt: string, imageSrc?: string, imageAlt?: string, authorName?: string, authorAvatar?: string, date?: string, onBlogClick?: () => void }> - Blog card items",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string (default: 'min-h-none')",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Blog section')",
"className?": "string"
},
"usageExample": "<BlogCardThree blogs={[{id: '1', category: 'Software Development', title: 'Redefining Digital Performance at Scale', excerpt: 'Optimizing speed, scalability, and user experience.', imageSrc: '/blog-1.jpg', onBlogClick: () => console.log('clicked')}]} title=\"Featured Articles\" description=\"Explore our latest insights\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} animationType=\"slide-up\" />",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Use for blog listings",
"Use for article grids",
"Requires blogs[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

64
registry/components/BlogCardTwo.json Normal file
View File

@@ -0,0 +1,64 @@
{
"name": "BlogCardTwo",
"description": "Blog section with card grid/carousel layout featuring image, author/date, title, excerpt, and multiple tags.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Latest Articles",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Insights and updates from our team",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Blog",
"minChars": 2,
"maxChars": 30
}
},
"blogRules": {
"blogs": {
"required": true,
"minItems": 1,
"example": "[{\"id\": \"1\", \"category\": [\"Design\", \"Research\"], \"title\": \"UX review presentations\", \"excerpt\": \"How to create compelling presentations\", \"imageSrc\": \"/blog-1.jpg\", \"authorName\": \"Olivia Rhye\", \"date\": \"20 Jan 2025\"}]",
"note": "Array of blog items. Each item requires id, category (string | string[]), title, excerpt, imageSrc, authorName, and date."
}
}
},
"propsSchema": {
"blogs": "Array<{ id: string, category: string | string[], title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar?: string, date: string, onBlogClick?: () => void }> - Blog card items",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Blog section')",
"className?": "string"
},
"usageExample": "<BlogCardTwo blogs={[{id: '1', category: ['Design', 'Research', 'Presentation'], title: 'UX review presentations', excerpt: 'How to create compelling presentations that wow your audience', imageSrc: '/blog-1.jpg', authorName: 'Olivia Rhye', date: '20 Jan 2025', onBlogClick: () => console.log('clicked')}]} title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} animationType=\"slide-up\" carouselMode=\"buttons\" />",
"do": [
"Use for blog listings",
"Use for article grids",
"Requires blogs[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

19
registry/components/BlurBottomBackground.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "BlurBottomBackground",
"description": "Backdrop blur effect positioned at the bottom of the page with linear gradient mask.",
"constraints": {},
"propsSchema": {
"className?": "string"
},
"usageExample": "<BlurBottomBackground />",
"do": [
"Use for feature showcases",
"Use for capability displays"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

34
registry/components/ButtonBounceEffect.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "ButtonBounceEffect",
"description": "CTA button with bouncing character animation on hover.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Get Started",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"scrollToSection?": "boolean",
"className?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usageExample": "<ButtonBounceEffect text=\"Get Started\" href=\"contact\" />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

34
registry/components/ButtonDirectionalHover.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "ButtonDirectionalHover",
"description": "CTA button with a circle that expands from the mouse entry point on hover.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Get Started",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"scrollToSection?": "boolean",
"className?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usageExample": "<ButtonDirectionalHover text=\"Get Started\" href=\"contact\" />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

34
registry/components/ButtonElasticEffect.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "ButtonElasticEffect",
"description": "CTA button with elastic scale animation on hover.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Get Started",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"scrollToSection?": "boolean",
"className?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usageExample": "<ButtonElasticEffect text=\"Get Started\" href=\"contact\" />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

34
registry/components/ButtonExpandHover.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "ButtonExpandHover",
"description": "CTA button with expanding background animation from right to left on hover, with a fixed arrow icon.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Get Started",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"scrollToSection?": "boolean",
"className?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usageExample": "<ButtonExpandHover text=\"Get Started\" href=\"contact\" />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

34
registry/components/ButtonHoverBubble.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "ButtonHoverBubble",
"description": "CTA button with expanding bubble animation where an arrow icon slides out and the text expands on hover.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Contact Us",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"scrollToSection?": "boolean",
"className?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usageExample": "<ButtonHoverBubble text=\"Contact Us\" href=\"contact\" />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

35
registry/components/ButtonHoverMagnetic.json Normal file
View File

@@ -0,0 +1,35 @@
{
"name": "ButtonHoverMagnetic",
"description": "CTA button that subtly follows the cursor with a magnetic hover effect.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Button",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"scrollToSection?": "boolean",
"className?": "string",
"strengthFactor?": "number (default: 20)",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usageExample": "<ButtonHoverMagnetic text=\"Button\" href=\"contact\" />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

34
registry/components/ButtonIconArrow.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "ButtonIconArrow",
"description": "Button with a trailing arrow icon that transforms on hover.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Button",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"scrollToSection?": "boolean",
"className?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usageExample": "<ButtonIconArrow text=\"Continue\" href=\"next-section\" />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

36
registry/components/ButtonShiftHover.json Normal file
View File

@@ -0,0 +1,36 @@
{
"name": "ButtonShiftHover",
"description": "CTA button where the label nudges upward on hover and a trailing dot fills from outline to solid.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Get Started",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"scrollToSection?": "boolean",
"className?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usageExample": "<ButtonShiftHover text=\"Get Started\" href=\"pricing\" />",
"do": [
"Use for general use"
],
"dont": [
"Do not use multiple items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

34
registry/components/ButtonTextShift.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "ButtonTextShift",
"description": "CTA button with synchronized character shift animation on hover.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Get Started",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"scrollToSection?": "boolean",
"className?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usageExample": "<ButtonTextShift text=\"Get Started\" href=\"contact\" />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

34
registry/components/ButtonTextStagger.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "ButtonTextStagger",
"description": "CTA button with character stagger animation on hover.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Get Started",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"scrollToSection?": "boolean",
"className?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usageExample": "<ButtonTextStagger text=\"Get Started\" href=\"https://example.com\" />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

34
registry/components/ButtonTextUnderline.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "ButtonTextUnderline",
"description": "Text-only button where an underline animates in on hover.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Learn more",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"scrollToSection?": "boolean",
"className?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usageExample": "<ButtonTextUnderline text=\"Learn more\" href=\"about\" />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

55
registry/components/CardStack.json Normal file
View File

@@ -0,0 +1,55 @@
{
"name": "CardStack",
"description": "Adaptive layout component that displays children in a grid, timeline, or carousel based on item count and variant.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Features",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Discover our products",
"minChars": 5,
"maxChars": 300
},
"tag": {
"required": false,
"example": "New",
"minChars": 2,
"maxChars": 30
}
}
},
"propsSchema": {
"children": "React.ReactNode",
"mode?": "'auto' | 'buttons' (default: 'buttons')",
"gridVariant?": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' (default: 'uniform-all-items-equal')",
"uniformGridCustomHeightClasses?": "string (default: varies by usage)",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required - controls GSAP scroll animations with stagger effect)",
"title?": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description?": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground?": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Card stack')",
"className?": "string"
},
"usageExample": "<CardStack title=\"Features\" buttons={[{ text: 'View All', href: 'features' }]} animationType=\"slide-up\" textboxLayout=\"default\">{/* Card components */}</CardStack>",
"do": [
"Use for general use",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

20
registry/components/CircleGradientBackground.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "CircleGradientBackground",
"description": "Two large gradient circles positioned diagonally in corners.",
"constraints": {},
"propsSchema": {
"diagonal?": "'primary' | 'secondary' (default: 'primary')",
"className?": "string"
},
"usageExample": "<CircleGradientBackground diagonal=\"primary\" />",
"do": [
"Use for feature showcases",
"Use for capability displays"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

73
registry/components/ContactCenter.json Normal file
View File

@@ -0,0 +1,73 @@
{
"name": "ContactCenter",
"description": "Centered contact section with tag, animated title and description, email signup form, and terms text.",
"constraints": {
"textRules": {
"tag": {
"required": true,
"example": "Newsletter",
"minChars": 2,
"maxChars": 20
},
"title": {
"required": true,
"example": "Medium length heading goes here",
"minChars": 4,
"maxChars": 50
},
"description": {
"required": true,
"example": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
"minChars": 20,
"maxChars": 200
},
"inputPlaceholder": {
"required": false,
"default": "Enter your email",
"example": "Your email address",
"minChars": 5,
"maxChars": 30
},
"buttonText": {
"required": false,
"default": "Sign Up",
"example": "Subscribe",
"minChars": 2,
"maxChars": 15
},
"termsText": {
"required": false,
"default": "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
"example": "We respect your privacy. Unsubscribe at any time.",
"minChars": 10,
"maxChars": 150
}
}
},
"propsSchema": {
"tag": "string",
"title": "string",
"description": "string",
"tagIcon?": "LucideIcon",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"inputPlaceholder?": "string (default: 'Enter your email')",
"buttonText?": "string (default: 'Sign Up')",
"termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
"onSubmit?": "(email: string) => void",
"ariaLabel?": "string (default: 'Contact section')",
"className?": "string"
},
"usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <ContactCenter tag=\"Newsletter\" title=\"Stay updated with our latest news\" description=\"Subscribe to our newsletter for weekly updates and exclusive content.\" useInvertedBackground={\"noInvert\"} onSubmit={(email) => console.log(email)} />\n</ThemeProvider>",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for contact pages",
"Use for lead generation"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

70
registry/components/ContactFaq.json Normal file
View File

@@ -0,0 +1,70 @@
{
"name": "ContactFaq",
"description": "Split-panel contact section with CTA card on left and FAQ accordions on right.",
"constraints": {
"textRules": {
"ctaTitle": {
"required": true,
"example": "Book an intro call",
"minChars": 2,
"maxChars": 50
},
"ctaDescription": {
"required": true,
"example": "Let's get started with a brief intro call.",
"minChars": 5,
"maxChars": 100
}
},
"faqRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"title": {
"required": true,
"example": "What's included in the subscription?",
"minChars": 5,
"maxChars": 100
},
"content": {
"required": true,
"example": "Your subscription covers end-to-end digital design services...",
"minChars": 10,
"maxChars": 500,
"note": "Supports HTML content"
}
}
},
"propsSchema": {
"faqs": "Array<{ id: string, title: string, content: string }>",
"ctaTitle": "string",
"ctaDescription": "string",
"ctaButton": "{text: string, onClick?: () => void, href?: string}",
"ctaIcon": "LucideIcon (required)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect on panels)",
"accordionAnimationType?": "'smooth' | 'instant' (default: 'smooth')",
"showCard?": "boolean (default: true - controls accordion card styling)",
"ariaLabel?": "string (default: 'Contact and FAQ section')",
"className?": "string"
},
"usageExample": "<ContactFaq faqs={[{ id: '1', title: \"What's included?\", content: 'Your subscription covers...' }]} ctaTitle=\"Book an intro call\" ctaDescription=\"Let's get started with a brief intro call.\" ctaButton={{ text: 'Book a Free Call', href: '#contact' }} ctaIcon={Phone} useInvertedBackground=\"noInvert\" animationType=\"slide-up\" />",
"do": [
"Use for contact pages",
"Use for lead generation",
"Use for help pages",
"Use for support sections",
"Requires faqs[]"
],
"dont": [
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

74
registry/components/ContactForm.json Normal file
View File

@@ -0,0 +1,74 @@
{
"name": "ContactForm",
"description": "Complete contact form component with tag, animated title and description, email signup form, and terms text.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Join our newsletter",
"minChars": 4,
"maxChars": 60
},
"description": {
"required": true,
"example": "Get the latest updates and exclusive content delivered to your inbox",
"minChars": 10,
"maxChars": 200
},
"tag": {
"required": true,
"example": "Newsletter",
"minChars": 2,
"maxChars": 30
},
"inputPlaceholder": {
"required": false,
"default": "Enter your email",
"example": "Your email address",
"minChars": 5,
"maxChars": 50
},
"buttonText": {
"required": false,
"default": "Sign Up",
"example": "Subscribe",
"minChars": 2,
"maxChars": 15
},
"termsText": {
"required": false,
"default": "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
"example": "We respect your privacy. Unsubscribe anytime.",
"minChars": 10,
"maxChars": 200
}
}
},
"propsSchema": {
"title": "string (required)",
"description": "string (required)",
"tag": "string (required)",
"tagIcon?": "LucideIcon",
"inputPlaceholder?": "string (default: 'Enter your email')",
"buttonText?": "string (default: 'Sign Up')",
"termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
"onSubmit?": "(email: string) => void",
"useInvertedBackground": "'noInvert' | 'invertDefault' (required)",
"centered?": "boolean (default: false)",
"className?": "string"
},
"usageExample": "<ContactForm title=\"Join our newsletter\" description=\"Get updates\" tag=\"Newsletter\" useInvertedBackground=\"noInvert\" onSubmit={(email) => console.log(email)} />",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Use for contact pages",
"Use for lead generation"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

78
registry/components/ContactSplit.json Normal file
View File

@@ -0,0 +1,78 @@
{
"name": "ContactSplit",
"description": "Split layout contact section with tag, animated title and description on one side, media content on the other, and email signup form.",
"constraints": {
"textRules": {
"tag": {
"required": true,
"example": "Newsletter",
"minChars": 2,
"maxChars": 20
},
"title": {
"required": true,
"example": "Medium length heading goes here",
"minChars": 4,
"maxChars": 50
},
"description": {
"required": true,
"example": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
"minChars": 20,
"maxChars": 200
},
"inputPlaceholder": {
"required": false,
"default": "Enter your email",
"example": "Your email address",
"minChars": 5,
"maxChars": 30
},
"buttonText": {
"required": false,
"default": "Sign Up",
"example": "Subscribe",
"minChars": 2,
"maxChars": 15
},
"termsText": {
"required": false,
"default": "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
"example": "We respect your privacy. Unsubscribe at any time.",
"minChars": 10,
"maxChars": 150
}
}
},
"propsSchema": {
"tag": "string",
"title": "string",
"description": "string",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string (default: '')",
"videoAriaLabel?": "string (default: 'Contact section video')",
"mediaPosition?": "'left' | 'right' (default: 'right')",
"tagIcon?": "LucideIcon",
"inputPlaceholder?": "string (default: 'Enter your email')",
"buttonText?": "string (default: 'Sign Up')",
"termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
"onSubmit?": "(email: string) => void",
"ariaLabel?": "string (default: 'Contact section')",
"className?": "string"
},
"usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <ContactSplit tag=\"Newsletter\" title=\"Stay updated\" description=\"Subscribe to our newsletter for weekly updates and exclusive content.\" useInvertedBackground={\"noInvert\"} imageSrc=\"/placeholders/placeholder-16-9.svg\" onSubmit={(email) => console.log(email)} />\n</ThemeProvider>",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for contact pages",
"Use for lead generation"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

57
registry/components/ContactSplitForm.json Normal file
View File

@@ -0,0 +1,57 @@
{
"name": "ContactSplitForm",
"description": "Split layout contact form with animated title and description, dynamic input fields, optional textarea, submit button, and media content.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Medium length heading goes here",
"minChars": 4,
"maxChars": 50
},
"description": {
"required": true,
"example": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
"minChars": 20,
"maxChars": 200
},
"buttonText": {
"required": false,
"default": "Submit",
"example": "Send Message",
"minChars": 2,
"maxChars": 15
}
}
},
"propsSchema": {
"title": "string",
"description": "string",
"inputs": "Array<{ name: string, type: string, placeholder: string, required?: boolean, className?: string }> - Form input fields (min 2 required)",
"textarea?": "{ name: string, placeholder: string, rows?: number, required?: boolean, className?: string } - Optional textarea field",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string (default: '')",
"videoAriaLabel?": "string (default: 'Contact section video')",
"mediaPosition?": "'left' | 'right' (default: 'right')",
"buttonText?": "string (default: 'Submit')",
"onSubmit?": "(data: Record<string, string>) => void",
"ariaLabel?": "string (default: 'Contact section')",
"className?": "string"
},
"usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <ContactSplitForm title=\"Get in touch\" description=\"We'd love to hear from you. Send us a message.\" inputs={[{ name: 'name', type: 'text', placeholder: 'Name', required: true }, { name: 'email', type: 'email', placeholder: 'Email', required: true }]} textarea={{ name: 'message', placeholder: 'Type your message...', rows: 5, required: true }} useInvertedBackground={\"noInvert\"} imageSrc=\"/placeholders/placeholder-16-9.svg\" onSubmit={(data) => console.log(data)} />\n</ThemeProvider>",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for contact pages",
"Use for lead generation",
"Requires inputs[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

48
registry/components/ContactText.json Normal file
View File

@@ -0,0 +1,48 @@
{
"name": "ContactText",
"description": "Centered contact section with animated text and action buttons in a card container.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Ready to start your next project? Let's create something amazing together.",
"minChars": 10,
"maxChars": 200
},
"animationType": {
"required": false,
"default": "entrance-slide",
"options": [
"entrance-slide",
"reveal-blur",
"background-highlight"
],
"note": "GSAP scroll-triggered animation type for text"
}
},
"buttonRules": {
"maxButtons": 2,
"note": "Supports up to 2 buttons with px-8 spacing. Buttons use theme.defaultButtonVariant."
}
},
"propsSchema": {
"text": "string",
"animationType?": "'entrance-slide' | 'reveal-blur' | 'background-highlight' (default: 'entrance-slide')",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Contact section')",
"className?": "string"
},
"usageExample": "<ContactText text=\"Ready to start your next project? Let's create something amazing together.\" animationType=\"entrance-slide\" buttons={[{ text: 'Get in Touch', href: '/contact' }, { text: 'View Portfolio', href: '/portfolio' }]} useInvertedBackground=\"noInvert\" />",
"do": [
"Use for contact pages",
"Use for lead generation",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

23
registry/components/DotGridBackground.json Normal file
View File

@@ -0,0 +1,23 @@
{
"name": "DotGridBackground",
"description": "Dot pattern background with radial gradient dots and optional 3D perspective effect.",
"constraints": {},
"propsSchema": {
"size?": "'small' | 'medium' | 'large' (default: 'medium')",
"perspectiveThreeD?": "boolean (default: false)",
"className?": "string"
},
"usageExample": "<DotGridBackground size=\"medium\" perspectiveThreeD={false} />",
"do": [
"Use for feature showcases",
"Use for capability displays"
],
"dont": [
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

27
registry/components/DownwardRaysBackground.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "DownwardRaysBackground",
"description": "Atmospheric light rays emanating from top center directly downward with blur and radial gradient effects, with optional grid overlay.",
"constraints": {},
"propsSchema": {
"animated": "boolean - Required. When true, rays animate with pulsing opacity. When false, rays display static opacity.",
"showGrid": "boolean - Required. When true, displays a grid overlay fading from top center. When false, no grid is shown.",
"className?": "string",
"containerClassName?": "string"
},
"usageExample": "<DownwardRaysBackground animated={true} showGrid={false} />",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Use for statistics displays",
"Use for achievement showcases"
],
"dont": [
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

39
registry/components/EmailSignupForm.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "EmailSignupForm",
"description": "Compact email signup form with inline input and submit button in card container.",
"constraints": {
"textRules": {
"inputPlaceholder": {
"required": false,
"default": "Enter your email",
"example": "Your email address",
"minChars": 5,
"maxChars": 50
},
"buttonText": {
"required": false,
"default": "Sign Up",
"example": "Subscribe",
"minChars": 2,
"maxChars": 15
}
}
},
"propsSchema": {
"inputPlaceholder?": "string (default: 'Enter your email')",
"buttonText?": "string (default: 'Sign Up')",
"onSubmit?": "(email: string) => void",
"className?": "string"
},
"usageExample": "<EmailSignupForm inputPlaceholder=\"Your email\" buttonText=\"Subscribe\" onSubmit={(email) => console.log(email)} />",
"do": [
"Use for feature showcases",
"Use for capability displays"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

72
registry/components/FaqBase.json Normal file
View File

@@ -0,0 +1,72 @@
{
"name": "FaqBase",
"description": "FAQ section with accordion items and optional header.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Frequently Asked Questions",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Find answers to common questions about our products and services",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Help",
"minChars": 2,
"maxChars": 30
}
},
"faqRules": {
"faqs": {
"required": true,
"minItems": 1,
"example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]",
"note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support)."
},
"animationType": {
"required": false,
"default": "smooth",
"options": [
"smooth",
"instant"
],
"note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately."
}
}
},
"propsSchema": {
"faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"animationType?": "'smooth' | 'instant' (default: 'smooth')",
"showCard?": "boolean (default: true)",
"ariaLabel?": "string (default: 'FAQ section')",
"className?": "string"
},
"usageExample": "<FaqBase faqs={[{id: '1', title: 'What is your return policy?', content: 'We offer a 30-day money-back guarantee on all our products.'}, {id: '2', title: 'How long does shipping take?', content: 'Standard shipping typically takes 5-7 business days.'}]} title=\"Frequently Asked Questions\" description=\"Find answers to common questions\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for help pages",
"Use for support sections",
"Requires faqs[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

71
registry/components/FaqDouble.json Normal file
View File

@@ -0,0 +1,71 @@
{
"name": "FaqDouble",
"description": "FAQ section with two-column accordion layout and optional header.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Frequently Asked Questions",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Find answers to common questions about our products and services",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Help",
"minChars": 2,
"maxChars": 30
}
},
"faqRules": {
"faqs": {
"required": true,
"minItems": 1,
"example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]",
"note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support). Items are automatically split into two columns."
},
"animationType": {
"required": false,
"default": "smooth",
"options": [
"smooth",
"instant"
],
"note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately."
}
}
},
"propsSchema": {
"faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"animationType?": "'smooth' | 'instant' (default: 'smooth')",
"ariaLabel?": "string (default: 'FAQ section')",
"className?": "string"
},
"usageExample": "<FaqDouble faqs={[{id: '1', title: 'What is your return policy?', content: 'We offer a 30-day money-back guarantee on all our products.'}, {id: '2', title: 'How long does shipping take?', content: 'Standard shipping typically takes 5-7 business days.'}, {id: '3', title: 'Do you ship internationally?', content: 'Yes, we ship to over 100 countries worldwide.'}]} title=\"Frequently Asked Questions\" description=\"Find answers to common questions\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for help pages",
"Use for support sections",
"Requires faqs[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

98
registry/components/FaqSplitMedia.json Normal file
View File

@@ -0,0 +1,98 @@
{
"name": "FaqSplitMedia",
"description": "FAQ section with split layout featuring media (image/video) on one side and accordion list on the other.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Frequently Asked Questions",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Find answers to common questions about our products and services",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Help",
"minChars": 2,
"maxChars": 30
}
},
"faqRules": {
"faqs": {
"required": true,
"minItems": 1,
"example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]",
"note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support)."
},
"animationType": {
"required": false,
"default": "smooth",
"options": [
"smooth",
"instant"
],
"note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately."
},
"mediaPosition": {
"required": false,
"default": "left",
"options": [
"left",
"right"
],
"note": "Position of media relative to FAQ list."
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"note": "Path to image file. Either imageSrc or videoSrc should be provided."
},
"videoSrc": {
"required": false,
"note": "Path to video file. Either imageSrc or videoSrc should be provided."
}
}
},
"propsSchema": {
"faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string (default: '')",
"videoAriaLabel?": "string (default: 'FAQ section video')",
"mediaPosition?": "'left' | 'right' (default: 'left')",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"animationType?": "'smooth' | 'instant' (default: 'smooth')",
"showCard?": "boolean (default: true)",
"ariaLabel?": "string (default: 'FAQ section')",
"className?": "string"
},
"usageExample": "<FaqSplitMedia faqs={[{id: '1', title: 'What is your return policy?', content: 'We offer a 30-day money-back guarantee on all our products.'}, {id: '2', title: 'How long does shipping take?', content: 'Standard shipping typically takes 5-7 business days.'}]} imageSrc=\"/images/faq-hero.jpg\" imageAlt=\"Customer support representative\" title=\"Frequently Asked Questions\" description=\"Find answers to common questions\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} mediaPosition=\"left\" />",
"do": [
"Use for help pages",
"Use for support sections",
"Requires faqs[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

71
registry/components/FaqSplitText.json Normal file
View File

@@ -0,0 +1,71 @@
{
"name": "FaqSplitText",
"description": "FAQ section with split layout featuring animated text on one side and accordion list on the other.",
"constraints": {
"textRules": {
"sideTitle": {
"required": true,
"example": "Frequently Asked Questions",
"minChars": 2,
"maxChars": 100
},
"sideDescription": {
"required": false,
"example": "Everything you need to know",
"minChars": 5,
"maxChars": 250
}
},
"faqRules": {
"faqs": {
"required": true,
"minItems": 1,
"example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]",
"note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support)."
},
"animationType": {
"required": false,
"default": "smooth",
"options": [
"smooth",
"instant"
],
"note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately."
},
"textPosition": {
"required": false,
"default": "left",
"options": [
"left",
"right"
],
"note": "Position of title/description text relative to FAQ list."
}
}
},
"propsSchema": {
"faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
"sideTitle": "string",
"sideDescription?": "string",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textPosition?": "'left' | 'right' (default: 'left')",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"animationType?": "'smooth' | 'instant' (default: 'smooth')",
"showCard?": "boolean (default: true)",
"ariaLabel?": "string (default: 'FAQ section')",
"className?": "string"
},
"usageExample": "<FaqSplitText faqs={[{id: '1', title: 'How can I be part of Buenro?', content: 'You can join by signing up on our platform.'}, {id: '2', title: 'Can anyone join Buenro?', content: 'Yes! We welcome remote workers and entrepreneurs.'}]} sideTitle=\"Frequently Asked Questions\" textPosition=\"left\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for help pages",
"Use for support sections",
"Requires faqs[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

111
registry/components/FeatureCardEight.json Normal file
View File

@@ -0,0 +1,111 @@
{
"name": "FeatureCardEight",
"description": "Horizontal timeline feature section with auto-advancing progress bars, numbered step badges, and shared media display.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Our Process",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Discover how we bring ideas to life",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "How It Works",
"minChars": 2,
"maxChars": 30
}
},
"featureCardRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 3,
"note": "Step number displayed in circular badge"
},
"title": {
"required": true,
"example": "Research & Planning",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Understanding user needs, market trends, and project requirements",
"minChars": 10,
"maxChars": 300
}
},
"mediaRules": {
"imageSrc": {
"required": true,
"example": "/feature1.jpg",
"note": "Either imageSrc or videoSrc required per card (discriminated union)"
},
"videoSrc": {
"required": true,
"example": "/feature1.mp4",
"note": "Either imageSrc or videoSrc required per card (discriminated union)"
},
"imageAlt": {
"required": false,
"example": "Research and planning illustration",
"note": "Falls back to feature title if not provided"
},
"videoAriaLabel": {
"required": false,
"example": "Research and planning video",
"note": "Falls back to feature title if not provided"
}
},
"itemRules": {
"minItems": 2,
"maxItems": 4,
"recommendedItems": "2-4",
"note": "Works best with 2-4 features. Grid layout adapts based on item count."
}
},
"propsSchema": {
"features": "Array<{ id: number, title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Feature section')",
"className?": "string"
},
"usageExample": "<FeatureCardEight features={[{ id: 1, title: 'Research & Planning', description: 'Understanding user needs, market trends, and project requirements', imageSrc: '/feature1.jpg' }]} title=\"Our Process\" description=\"Discover how we bring ideas to life\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for process flows",
"Use for roadmaps",
"Use for step-by-step explanation",
"Use for feature showcases",
"Use for capability displays",
"Requires features[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [
"Do not use non-sequential content",
"Do not use single item",
"Do not use more than 4 items",
"Do not use less than 2 items",
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

70
registry/components/FeatureCardMedia.json Normal file
View File

@@ -0,0 +1,70 @@
{
"name": "FeatureCardMedia",
"description": "Feature section with media cards displaying tag overlay, title, description, and optional buttons.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "From concept to launch, we've got you covered",
"minChars": 10,
"maxChars": 100
},
"description": {
"required": true,
"example": "Discover how we bring ideas to life through a proven methodology",
"minChars": 20,
"maxChars": 300
},
"tag": {
"required": false,
"example": "Our Process",
"minChars": 2,
"maxChars": 30
}
},
"featuresRules": {
"minItems": 2,
"recommendedItems": 3,
"maxItems": 6,
"structure": {
"id": "string - Unique identifier (required)",
"title": "string - Card title (required)",
"description": "string - Card description (required)",
"tag": "string - Tag displayed on media top-right (required)",
"imageSrc": "string - Image source URL (optional)",
"videoSrc": "string - Video source URL (optional)",
"buttons": "ButtonConfig[] - Optional action buttons for the card"
},
"note": "Each card requires id, title, description, and tag. Media (imageSrc or videoSrc) recommended. Buttons are optional per card."
}
},
"propsSchema": {
"features": "Array<{ id: string, title: string, description: string, tag: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: ButtonConfig[], onCardClick?: () => void }>",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
"title": "string",
"description": "string",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "ButtonConfig[]",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string",
"ariaLabel?": "string (default: 'Features section')",
"className?": "string"
},
"usageExample": "<FeatureCardMedia features={[{ id: '1', title: 'Research', description: 'Understanding user needs and market trends', tag: 'Phase 1', imageSrc: '/img.jpg', buttons: [{ text: 'Learn more', href: '#' }] }]} animationType=\"slide-up\" textboxLayout=\"default\" title=\"Our Process\" description=\"Discover how we work\" useInvertedBackground=\"noInvert\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Requires features[]",
"Requires titleSegments?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

130
registry/components/FeatureCardNine.json Normal file
View File

@@ -0,0 +1,130 @@
{
"name": "FeatureCardNine",
"description": "Scroll-based timeline feature section with two animated phone frames and centered content.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Powerful Features",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Everything you need to build amazing products",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Features",
"minChars": 2,
"maxChars": 30
}
},
"featureCardRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 3,
"note": "Feature identifier"
},
"title": {
"required": true,
"example": "Seamless Integration",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Connect your tools and workflows effortlessly. Our platform integrates with your existing systems.",
"minChars": 10,
"maxChars": 300
}
},
"phoneMediaRules": {
"phoneOne": {
"imageSrc": {
"required": true,
"example": "/phone1.jpg",
"note": "Either imageSrc or videoSrc required for phoneOne (discriminated union)"
},
"videoSrc": {
"required": true,
"example": "/phone1.mp4",
"note": "Either imageSrc or videoSrc required for phoneOne (discriminated union)"
},
"imageAlt": {
"required": false,
"example": "First phone mockup",
"note": "Falls back to '[title] - Phone 1' if not provided"
},
"videoAriaLabel": {
"required": false,
"example": "First phone video",
"note": "Falls back to '[title] - Phone 1 video' if not provided"
}
},
"phoneTwo": {
"imageSrc": {
"required": true,
"example": "/phone2.jpg",
"note": "Either imageSrc or videoSrc required for phoneTwo (discriminated union)"
},
"videoSrc": {
"required": true,
"example": "/phone2.mp4",
"note": "Either imageSrc or videoSrc required for phoneTwo (discriminated union)"
},
"imageAlt": {
"required": false,
"example": "Second phone mockup",
"note": "Falls back to '[title] - Phone 2' if not provided"
},
"videoAriaLabel": {
"required": false,
"example": "Second phone video",
"note": "Falls back to '[title] - Phone 2 video' if not provided"
}
}
},
"itemRules": {
"minItems": 2,
"maxItems": 4,
"recommendedItems": "2-4",
"note": "Each feature takes 100vh height. Recommend 2-4 features to avoid excessive scroll."
}
},
"propsSchema": {
"features": "Array<{ id: number, title: string, description: string, phoneOne: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }), phoneTwo: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }) }>",
"showStepNumbers": "boolean (required - controls whether step number badges display)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Feature section')",
"className?": "string"
},
"usageExample": "<FeatureCardNine features={[{ id: 1, title: 'Seamless Integration', description: 'Connect your tools and workflows effortlessly', phoneOne: { imageSrc: '/phone1.jpg' }, phoneTwo: { imageSrc: '/phone2.jpg' } }]} showStepNumbers={true} title=\"Powerful Features\" description=\"Everything you need to build amazing products\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Requires features[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [
"Do not use less than 2 items",
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

111
registry/components/FeatureCardNineteen.json Normal file
View File

@@ -0,0 +1,111 @@
{
"name": "FeatureCardNineteen",
"description": "Timeline feature section with full-width cards showing step numbers and rotated media.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Our Process",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Discover how we bring ideas to life",
"minChars": 5,
"maxChars": 300
},
"tag": {
"required": false,
"example": "How it works",
"minChars": 2,
"maxChars": 30
}
},
"featureCardRules": {
"id": {
"required": true,
"example": 1,
"note": "Numeric ID used to generate step number (01, 02, etc.)"
},
"tag": {
"required": true,
"example": "Expertise",
"minChars": 2,
"maxChars": 30
},
"title": {
"required": true,
"example": "Strategy",
"minChars": 2,
"maxChars": 30
},
"subtitle": {
"required": true,
"example": "Data-driven decisions for growth.",
"minChars": 5,
"maxChars": 60
},
"description": {
"required": true,
"example": "We analyze market trends and user behavior to create strategies that drive real results.",
"minChars": 10,
"maxChars": 250
},
"imageSrc": {
"required": false,
"example": "/images/strategy.webp",
"note": "Image source URL (either imageSrc or videoSrc)"
},
"videoSrc": {
"required": false,
"example": "/videos/strategy.mp4",
"note": "Video source URL (either imageSrc or videoSrc)"
},
"buttons": {
"required": false,
"example": [
{
"text": "Learn more",
"href": "/strategy"
}
],
"note": "Optional buttons per feature card (max 2)"
}
}
},
"propsSchema": {
"features": "Array<{ id: number, tag: string, title: string, subtitle: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: Array<{text: string, onClick?: () => void, href?: string}> }> (required)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"ariaLabel?": "string (default: 'Feature section')",
"className?": "string"
},
"usageExample": "<FeatureCardNineteen features={[{ id: 1, tag: 'Expertise', title: 'Strategy', subtitle: 'Data-driven decisions', description: 'We analyze market trends...', imageSrc: '/images/strategy.webp' }]} title=\"Our Process\" description=\"Discover how we bring ideas to life\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />",
"do": [
"Use for process flows",
"Use for roadmaps",
"Use for step-by-step explanation",
"Use for feature showcases",
"Use for capability displays",
"Requires features[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [
"Do not use multiple items",
"Do not use non-sequential content",
"Do not use single item"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

73
registry/components/FeatureCardOne.json Normal file
View File

@@ -0,0 +1,73 @@
{
"name": "FeatureCardOne",
"description": "Adaptive feature section with image/video-based cards in customizable bento grid layouts or carousel.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Our Features",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Discover the tools and capabilities that make our platform powerful",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Features",
"minChars": 2,
"maxChars": 30
}
},
"featureCardRules": {
"title": {
"required": true,
"example": "Advanced Analytics",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Get detailed insights into your business performance",
"minChars": 10,
"maxChars": 250
}
}
},
"propsSchema": {
"features": "Array<{ title: string, description: string, button?: {text: string, onClick?: () => void, href?: string} } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' (required)",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required - controls GSAP scroll animations with stagger effect)",
"uniformGridCustomHeightClasses?": "string",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"ariaLabel?": "string (default: 'Feature section')",
"className?": "string",
"useInvertedBackground": "'noInvert' | 'invertDefault'"
},
"usageExample": "<FeatureCardOne features={[{ title: 'Analytics', description: 'Get insights', imageSrc: '/feature.jpg', button: { text: 'Learn More', href: '#' } }]} title=\"Our Features\" description=\"Discover what makes us different\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for statistics displays",
"Use for achievement showcases",
"Requires features[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

103
registry/components/FeatureCardSeven.json Normal file
View File

@@ -0,0 +1,103 @@
{
"name": "FeatureCardSeven",
"description": "Vertical stack feature section with alternating left/right layouts and numbered step cards with square images.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Our Features",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Sequential features with numbered badges",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Features",
"minChars": 2,
"maxChars": 30
}
},
"featureCardRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 3,
"note": "Step number displayed in circular badge"
},
"title": {
"required": true,
"example": "Modern Architecture",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Built with the latest technologies and best practices",
"minChars": 10,
"maxChars": 300
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/feature1.jpg",
"note": "Either imageSrc or videoSrc required per card"
},
"videoSrc": {
"required": false,
"example": "/feature1.mp4",
"note": "Either imageSrc or videoSrc required per card"
},
"imageAlt": {
"required": false,
"example": "Modern architecture illustration",
"note": "Falls back to feature title if not provided"
},
"videoAriaLabel": {
"required": false,
"example": "Modern architecture video",
"note": "Falls back to feature title if not provided"
}
}
},
"propsSchema": {
"features": "Array<{ id: number, title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Feature section')",
"className?": "string"
},
"usageExample": "<FeatureCardSeven features={[{ id: 1, title: 'Modern Architecture', description: 'Built with the latest technologies and best practices', imageSrc: '/feature1.jpg' }]} title=\"Our Features\" description=\"Sequential features with numbered badges\" textboxLayout=\"default\" animationType=\"blur-reveal\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for process flows",
"Use for roadmaps",
"Use for step-by-step explanation",
"Use for feature showcases",
"Use for capability displays",
"Requires features[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [
"Do not use non-sequential content",
"Do not use single item"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

102
registry/components/FeatureCardSix.json Normal file
View File

@@ -0,0 +1,102 @@
{
"name": "FeatureCardSix",
"description": "Timeline-based feature section with scroll-triggered stacking animations and numbered step cards.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Our Process",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Discover how we bring ideas to life",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Process",
"minChars": 2,
"maxChars": 30
}
},
"featureCardRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 3,
"note": "Step number displayed in circular badge"
},
"title": {
"required": true,
"example": "Research & Planning",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Understanding user needs, market trends, and project requirements",
"minChars": 10,
"maxChars": 300
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/step1.jpg",
"note": "Either imageSrc or videoSrc required per card"
},
"videoSrc": {
"required": false,
"example": "/step1.mp4",
"note": "Either imageSrc or videoSrc required per card"
},
"imageAlt": {
"required": false,
"example": "Research phase illustration",
"note": "Falls back to feature title if not provided"
},
"videoAriaLabel": {
"required": false,
"example": "Research phase video",
"note": "Falls back to feature title if not provided"
}
}
},
"propsSchema": {
"features": "Array<{ id: number, title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Feature section')",
"className?": "string"
},
"usageExample": "<FeatureCardSix features={[{ id: 1, title: 'Research & Planning', description: 'Understanding user needs and project requirements', imageSrc: '/step1.jpg' }]} title=\"Our Process\" description=\"Discover how we bring ideas to life\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for process flows",
"Use for roadmaps",
"Use for step-by-step explanation",
"Use for feature showcases",
"Use for capability displays",
"Requires features[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [
"Do not use non-sequential content",
"Do not use single item"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

80
registry/components/FeatureCardSixteen.json Normal file
View File

@@ -0,0 +1,80 @@
{
"name": "FeatureCardSixteen",
"description": "Comparison section with negative and positive cards showing contrasting features.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "What makes us stand out",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "See how we compare to traditional approaches",
"minChars": 5,
"maxChars": 300
},
"tag": {
"required": false,
"example": "Why us",
"minChars": 2,
"maxChars": 30
}
},
"negativeCardRules": {
"items": {
"required": true,
"example": [
"Time-consuming processes",
"Limited scalability",
"Higher costs"
],
"minItems": 2,
"maxItems": 10,
"note": "List of negative aspects displayed with X icons"
}
},
"positiveCardRules": {
"items": {
"required": true,
"example": [
"Streamlined workflow",
"Scalable solutions",
"Better value"
],
"minItems": 2,
"maxItems": 10,
"note": "List of positive aspects displayed with Check icons"
}
}
},
"propsSchema": {
"negativeCard": "{ items: string[] } (required)",
"positiveCard": "{ items: string[] } (required)",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"ariaLabel?": "string (default: 'Feature comparison section')",
"className?": "string"
},
"usageExample": "<FeatureCardSixteen negativeCard={{ items: ['Time-consuming processes', 'Limited scalability'] }} positiveCard={{ items: ['Streamlined workflow', 'Scalable solutions'] }} animationType=\"slide-up\" title=\"What makes us stand out\" description=\"See how we compare\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

90
registry/components/FeatureCardThree.json Normal file
View File

@@ -0,0 +1,90 @@
{
"name": "FeatureCardThree",
"description": "Adaptive feature section with hover-reveal cards displaying numbered features with images.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Our Features",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Discover what makes us different",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Features",
"minChars": 2,
"maxChars": 30
}
},
"featureCardRules": {
"id": {
"required": true,
"example": "01",
"minChars": 1,
"maxChars": 3,
"note": "Displayed in the flip badge"
},
"title": {
"required": true,
"example": "Advanced Analytics",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Get detailed insights into your business performance",
"minChars": 10,
"maxChars": 250
}
},
"mediaRules": {
"imageSrc": {
"required": true,
"example": "/feature.jpg",
"note": "Supports external URLs with unoptimized prop"
},
"imageAlt": {
"required": false,
"example": "Feature background",
"note": "Empty string marks image as decorative (aria-hidden)"
}
}
},
"propsSchema": {
"features": "Array<{ id: string, title: string, description: string, imageSrc: string, imageAlt?: string }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' (required)",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"uniformGridCustomHeightClasses?": "string",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"ariaLabel?": "string (default: 'Feature section')",
"className?": "string",
"useInvertedBackground": "'noInvert' | 'invertDefault'"
},
"usageExample": "<FeatureCardThree features={[{ id: '01', title: 'Analytics', description: 'Track performance with detailed insights', imageSrc: '/feature.jpg' }]} title=\"Our Features\" description=\"Discover what makes us different\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Requires features[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

98
registry/components/FeatureCardTwelve.json Normal file
View File

@@ -0,0 +1,98 @@
{
"name": "FeatureCardTwelve",
"description": "List-based feature section with large label on left and content with bullet points on right.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Choose Your Plan",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Find the perfect fit for your needs",
"minChars": 5,
"maxChars": 300
},
"tag": {
"required": false,
"example": "Plans",
"minChars": 2,
"maxChars": 30
}
},
"featureRules": {
"id": {
"required": true,
"example": "premium",
"note": "Unique identifier for the feature"
},
"label": {
"required": true,
"example": "Premium",
"minChars": 2,
"maxChars": 30,
"note": "Large display label shown on left side (5xl mobile, 6xl desktop)"
},
"title": {
"required": true,
"example": "Premium features for your most demanding needs",
"minChars": 10,
"maxChars": 120,
"note": "Feature heading shown at xl (mobile) / 3xl (desktop)"
},
"items": {
"required": true,
"minItems": 1,
"maxItems": 8,
"structure": "string[]",
"note": "Inline bullet list with accent-colored dots. Each item should be 5-50 characters."
},
"buttons": {
"required": false,
"maxButtons": 2,
"structure": "Array<{text: string, onClick?: () => void, href?: string}>",
"note": "Optional buttons at bottom of content area. First button is primary, second is secondary."
}
},
"itemRules": {
"minItems": 1,
"maxItems": 8,
"recommendedItems": "2-5",
"note": "Works best with 2-5 features for clear comparison"
}
},
"propsSchema": {
"features": "Array<{ id: string, label: string, title: string, items: string[], buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"ariaLabel?": "string (default: 'Feature section')",
"className?": "string"
},
"usageExample": "<FeatureCardTwelve features={[{ id: 'premium', label: 'Premium', title: 'Premium features for your most demanding needs and growth goals', items: ['Priority support', 'Advanced features', 'Custom integrations'], buttons: [{ text: 'Learn more', href: '#' }, { text: 'Get started', onClick: () => console.log('clicked') }] }]} animationType=\"opacity\" title=\"Choose Your Plan\" description=\"Find the perfect fit for your needs\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for pricing pages",
"Use for subscription tiers",
"Requires features[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [
"Do not use more than 8 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

86
registry/components/FeatureCardTwentyOne.json Normal file
View File

@@ -0,0 +1,86 @@
{
"name": "FeatureCardTwentyOne",
"description": "Split layout with media on one side and TextBox with accordion items on the other.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Custom designs",
"minChars": 2,
"maxChars": 60
},
"description": {
"required": true,
"example": "Explore our range of customizable solutions designed to meet your unique needs.",
"minChars": 10,
"maxChars": 300
},
"tag": {
"required": false,
"example": "Features",
"minChars": 2,
"maxChars": 30
}
},
"accordionRules": {
"id": {
"required": true,
"example": "1",
"note": "Unique identifier for each accordion item"
},
"title": {
"required": true,
"example": "Inspiration + innovation",
"minChars": 2,
"maxChars": 60,
"note": "Accordion header text"
},
"content": {
"required": true,
"example": "From custom colourways to bespoke elements built from the ground up.",
"minChars": 10,
"maxChars": 500,
"note": "Accordion expanded content (supports HTML)"
}
},
"itemRules": {
"minItems": 2,
"maxItems": 6,
"recommendedItems": 3
}
},
"propsSchema": {
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"accordionItems": "Array<{ id: string, title: string, content: string }>",
"imageSrc?": "string (either imageSrc or videoSrc required)",
"imageAlt?": "string",
"videoSrc?": "string (either imageSrc or videoSrc required)",
"videoAriaLabel?": "string",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"mediaPosition?": "'left' | 'right' (default: 'left')",
"ariaLabel?": "string (default: 'Feature section')",
"className?": "string"
},
"usageExample": "<FeatureCardTwentyOne title=\"Custom designs\" description=\"Explore our range of customizable solutions.\" tag=\"Features\" imageSrc=\"/images/feature.webp\" imageAlt=\"Feature showcase\" accordionItems={[{ id: '1', title: 'Inspiration + innovation', content: 'Collaborate with us on custom designs.' }, { id: '2', title: 'Sustainability + us', content: 'Committed to sustainable practices.' }, { id: '3', title: 'Request samples', content: 'Get in touch for samples and pricing.' }]} buttons={[{ text: 'Learn more', href: '#' }]} useInvertedBackground=\"noInvert\" mediaPosition=\"left\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Requires titleSegments?[]",
"Requires buttons?[]",
"Requires accordionItems[]"
],
"dont": [
"Do not use less than 2 items",
"Do not use more than 6 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

67
registry/components/FeatureProcessSteps.json Normal file
View File

@@ -0,0 +1,67 @@
{
"name": "FeatureProcessSteps",
"description": "Split-layout feature section with text on left and numbered process steps with timeline on right.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Getting you results without the complexity",
"minChars": 10,
"maxChars": 100
},
"description": {
"required": true,
"example": "Our three-step process takes you from identifying opportunities to launching systems, with clear communication and support at every stage.",
"minChars": 20,
"maxChars": 300
},
"tag": {
"required": false,
"example": "How we work",
"minChars": 2,
"maxChars": 30
}
},
"stepsRules": {
"minSteps": 2,
"recommendedSteps": 3,
"maxSteps": 6,
"structure": {
"number": "string - Step number to display (required, e.g., '01', '02', '1', '2')",
"title": "string - Step title (required, e.g., 'Discovery & Assessment')",
"description": "string - Step description (required)",
"tag": "string - Optional tag/badge for the step (e.g., 'Week 1', 'Ongoing')"
},
"note": "Minimum 2 steps required, but 3+ steps recommended for optimal visual balance. Each step shows a numbered card with a connecting timeline line."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"steps": "Array<{ number: string, title: string, description: string, tag?: string }>",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "ButtonConfig[]",
"ariaLabel?": "string (default: 'Process steps section')",
"className?": "string"
},
"usageExample": "// Wrap in ThemeProvider\nimport { Sparkles } from 'lucide-react';\n\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" cardStyle=\"solid\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <FeatureProcessSteps\n tag=\"How we work\"\n tagIcon={Sparkles}\n title=\"Getting you results without the complexity\"\n description=\"Our three-step process takes you from identifying opportunities to launching systems.\"\n buttons={[{ text: 'Book a call', href: '#' }, { text: 'Watch video', href: '#' }]}\n steps={[\n { number: '01', title: 'Discovery & Assessment', tag: 'Week 1', description: 'We analyze your workflows and identify opportunities.' },\n { number: '02', title: 'Build & Deploy', tag: 'Weeks 2-4', description: 'We create and launch custom systems tailored to your operations.' },\n { number: '03', title: 'Train & Support', tag: 'Ongoing', description: 'We train your team and provide ongoing support.' }\n ]}\n useInvertedBackground=\"noInvert\"\n />\n</ThemeProvider>",
"do": [
"Use for process flows",
"Use for roadmaps",
"Use for step-by-step explanation",
"Use for feature showcases",
"Use for capability displays",
"Requires steps[]"
],
"dont": [
"Do not use non-sequential content",
"Do not use single item"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

19
registry/components/FloatingGradientBackground.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "FloatingGradientBackground",
"description": "Five animated gradient circles with CSS animations and vertical gradient mask.",
"constraints": {},
"propsSchema": {
"className?": "string"
},
"usageExample": "<FloatingGradientBackground />",
"do": [
"Use for feature showcases",
"Use for capability displays"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

19
registry/components/FluidBackground.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "FluidBackground",
"description": "Generative fluid patterns using CPPN shader with theme color integration.",
"constraints": {},
"propsSchema": {
"className?": "string"
},
"usageExample": "<FluidBackground />",
"do": [
"Use for feature showcases",
"Use for capability displays"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

71
registry/components/FooterBase.json Normal file
View File

@@ -0,0 +1,71 @@
{
"name": "FooterBase",
"description": "Classic footer with logo, multi-column navigation, copyright text, and privacy policy link.",
"constraints": {
"textRules": {
"logoText": {
"required": false,
"default": "Webild",
"example": "Company Name",
"minChars": 2,
"maxChars": 30
},
"copyrightText": {
"required": false,
"default": "© 2025 | Webild",
"example": "© 2025 Company Name",
"minChars": 5,
"maxChars": 50
},
"columnTitle": {
"required": true,
"example": "Product",
"minChars": 2,
"maxChars": 20
},
"itemLabel": {
"required": true,
"example": "Features",
"minChars": 2,
"maxChars": 30
}
},
"structureRules": {
"columns": {
"required": true,
"minColumns": 1,
"maxColumns": 3,
"note": "Each column must have title and items array"
},
"items": {
"required": true,
"minItems": 1,
"structure": {
"label": "string - Link text (required)",
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
"onClick": "() => void - Additional click handler (optional)"
}
}
}
},
"propsSchema": {
"columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
"logoText?": "string (default: 'Webild')",
"copyrightText?": "string (default: '© 2025 | Webild')",
"onPrivacyClick?": "() => void",
"ariaLabel?": "string (default: 'Site footer')",
"className?": "string"
},
"usageExample": "<FooterBase columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"© 2025 | Company\" onPrivacyClick={() => console.log('Privacy clicked')} />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Requires columns[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

54
registry/components/FooterBaseCard.json Normal file
View File

@@ -0,0 +1,54 @@
{
"name": "FooterBaseCard",
"description": "Card-wrapped footer with logo, navigation columns, copyright, and privacy policy link.",
"constraints": {
"textRules": {
"copyrightText": {
"required": false,
"example": "© 2025 | Webild",
"minChars": 5,
"maxChars": 100,
"note": "Copyright text displayed at bottom left"
},
"logoText": {
"required": false,
"example": "Webild",
"minChars": 2,
"maxChars": 30,
"note": "Text used for h2 heading"
}
},
"columnsRules": {
"required": true,
"structure": {
"title": "string - Column heading (required)",
"items": "Array<{ label: string, href: string }> - Navigation links (required)"
},
"minColumns": 1,
"maxColumns": 5,
"note": "Array of footer column objects. Each column must have title and items array."
},
"logoRules": {
"note": "Uses logoText as h2 heading."
}
},
"propsSchema": {
"logoText?": "string (default: 'Webild')",
"columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
"copyrightText?": "string (default: '© 2025 | Webild')",
"onPrivacyClick?": "() => void",
"ariaLabel?": "string (default: 'Site footer')",
"className?": "string"
},
"usageExample": "<FooterBaseCard columns={[{ title: 'Product', items: [{ label: 'Features', href: '/features' }, { label: 'Pricing', href: '/pricing' }] }, { title: 'Company', items: [{ label: 'About', href: '/about' }, { label: 'Blog', href: '/blog' }] }]} logoText=\"Webild\" copyrightText=\"© 2025 | Webild\" onPrivacyClick={() => console.log('Privacy clicked')} />",
"do": [
"Use for general use",
"Requires columns[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

62
registry/components/FooterBaseReveal.json Normal file
View File

@@ -0,0 +1,62 @@
{
"name": "FooterBaseReveal",
"description": "Animated footer reveal wrapper that creates a fixed footer with scroll-triggered reveal effect.",
"constraints": {
"textRules": {
"copyrightText": {
"required": false,
"default": "© 2025 | Webild",
"example": "© 2025 Company Name",
"minChars": 5,
"maxChars": 50
},
"columnTitle": {
"required": true,
"example": "Product",
"minChars": 2,
"maxChars": 20
},
"itemLabel": {
"required": true,
"example": "Features",
"minChars": 2,
"maxChars": 30
}
},
"structureRules": {
"columns": {
"required": true,
"minColumns": 1,
"maxColumns": 3,
"note": "Each column must have title and items array"
},
"items": {
"required": true,
"minItems": 1,
"structure": {
"label": "string - Link text (required)",
"href": "string - Link destination (optional). External URLs open in new tab, internal values scroll to sections",
"onClick": "() => void - Additional click handler (optional)"
}
}
}
},
"propsSchema": {
"columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
"copyrightText?": "string",
"onPrivacyClick?": "() => void",
"ariaLabel?": "string",
"className?": "string"
},
"usageExample": "<FooterBaseReveal columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"© 2025 | Company\" />",
"do": [
"Use for general use",
"Requires columns[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

53
registry/components/FooterCard.json Normal file
View File

@@ -0,0 +1,53 @@
{
"name": "FooterCard",
"description": "Minimalist footer with card wrapper containing logo, divider, copyright, and optional social links.",
"constraints": {
"textRules": {
"copyrightText": {
"required": false,
"example": "© 2025 | Webild",
"minChars": 5,
"maxChars": 100,
"note": "Copyright text displayed at bottom left"
},
"logoText": {
"required": false,
"example": "Webild",
"minChars": 2,
"maxChars": 30,
"note": "Text used for SVG logo"
}
},
"socialLinksRules": {
"required": false,
"structure": {
"icon": "LucideIcon - Icon component (required)",
"href": "string - Social profile URL (required)",
"ariaLabel": "string - Accessibility label (required)"
},
"note": "Optional array of social links. Only renders if provided and has length > 0."
},
"logoRules": {
"note": "Uses logoText for SVG text logo via FooterLogo component."
}
},
"propsSchema": {
"logoText?": "string (default: 'Webild')",
"copyrightText?": "string (default: '© 2025 | Webild')",
"socialLinks?": "Array<{ icon: LucideIcon, href: string, ariaLabel: string }> - Social media links",
"ariaLabel?": "string (default: 'Site footer')",
"className?": "string",
"logoLineHeight?": "number (default: 1.1)"
},
"usageExample": "<FooterCard logoText=\"Webild\" copyrightText=\"© 2025 | Webild\" socialLinks={[{ icon: Twitter, href: 'https://twitter.com/webild', ariaLabel: 'Twitter' }, { icon: Linkedin, href: 'https://linkedin.com/company/webild', ariaLabel: 'LinkedIn' }]} />",
"do": [
"Use for general use",
"Requires socialLinks?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

61
registry/components/FooterLogoEmphasis.json Normal file
View File

@@ -0,0 +1,61 @@
{
"name": "FooterLogoEmphasis",
"description": "Footer with prominent centered logo emphasis and grid-based navigation layout with chevron icons.",
"constraints": {
"textRules": {
"logoText": {
"required": false,
"default": "Webild",
"example": "Company Name",
"minChars": 2,
"maxChars": 30
},
"itemLabel": {
"required": true,
"example": "Features",
"minChars": 2,
"maxChars": 30
}
},
"structureRules": {
"columns": {
"required": true,
"minColumns": 1,
"maxColumns": 5,
"note": "Grid automatically adjusts from 1-5 columns based on array length"
},
"items": {
"required": true,
"minItems": 1,
"structure": {
"label": "string - Link text (required)",
"href": "string - Link destination (optional). External URLs open in new tab, internal values scroll to sections",
"onClick": "() => void - Additional click handler (optional)"
}
},
"logo": {
"note": "Uses logoText for SVG text logo"
}
}
},
"propsSchema": {
"columns": "Array<{ items: Array<{ label: string, href?: string, onClick?: () => void }> }> - Footer navigation columns (required, max 5)",
"logoText?": "string (default: 'Webild')",
"ariaLabel?": "string (default: 'Site footer')",
"className?": "string"
},
"usageExample": "<FooterLogoEmphasis columns={[{ items: [{ label: 'Features', href: 'features' }] }, { items: [{ label: 'About', href: 'about' }] }]} logoText=\"Company\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Requires columns[]"
],
"dont": [
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

37
registry/components/FooterLogoReveal.json Normal file
View File

@@ -0,0 +1,37 @@
{
"name": "FooterLogoReveal",
"description": "Minimalist footer with logo that reveals on scroll using fixed positioning and clip-path.",
"constraints": {
"textRules": {
"logoText": {
"required": false,
"example": "Webild",
"minChars": 2,
"maxChars": 30,
"note": "Text used for SVG logo"
}
},
"logoRules": {
"note": "Uses logoText for SVG text logo via FooterLogo component."
},
"revealEffectRules": {
"note": "Component uses fixed positioning and clip-path for scroll reveal effect. Requires page content above footer to trigger scroll. ResizeObserver dynamically updates footer height for responsive reveal."
}
},
"propsSchema": {
"logoText?": "string (default: 'Webild')",
"logoLineHeight?": "number (default: 1.1)",
"ariaLabel?": "string (default: 'Site footer')",
"className?": "string"
},
"usageExample": "<FooterLogoReveal logoText=\"Webild\" />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

86
registry/components/FooterMedia.json Normal file
View File

@@ -0,0 +1,86 @@
{
"name": "FooterMedia",
"description": "Footer with full-width media (image/video) above classic navigation layout.",
"constraints": {
"textRules": {
"logoText": {
"required": false,
"default": "Webild",
"example": "Company Name",
"minChars": 2,
"maxChars": 30
},
"copyrightText": {
"required": false,
"default": "© 2025 | Webild",
"example": "© 2025 Company Name",
"minChars": 5,
"maxChars": 50
},
"columnTitle": {
"required": true,
"example": "Product",
"minChars": 2,
"maxChars": 20
},
"itemLabel": {
"required": true,
"example": "Features",
"minChars": 2,
"maxChars": 30
}
},
"mediaRules": {
"note": "Either imageSrc or videoSrc is required (discriminated union)",
"imageSrc": {
"required": "conditional - required if no videoSrc",
"example": "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1920"
},
"videoSrc": {
"required": "conditional - required if no imageSrc",
"example": "/videos/footer-background.mp4"
}
},
"structureRules": {
"columns": {
"required": true,
"minColumns": 1,
"maxColumns": 3,
"note": "Each column must have title and items array"
},
"items": {
"required": true,
"minItems": 1,
"structure": {
"label": "string - Link text (required)",
"href": "string - Link destination (optional)",
"onClick": "() => void - Additional click handler (optional)"
}
}
}
},
"propsSchema": {
"imageSrc": "string (required if no videoSrc)",
"imageAlt?": "string (default: '')",
"videoSrc": "string (required if no imageSrc)",
"videoAriaLabel?": "string (default: 'Footer video')",
"columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
"logoText?": "string (default: 'Webild')",
"copyrightText?": "string (default: '© 2025 | Webild')",
"onPrivacyClick?": "() => void",
"ariaLabel?": "string (default: 'Site footer')",
"className?": "string"
},
"usageExample": "<FooterMedia imageSrc=\"https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1920\" columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"© 2025 | Company\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Requires columns[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

68
registry/components/FooterSimple.json Normal file
View File

@@ -0,0 +1,68 @@
{
"name": "FooterSimple",
"description": "Minimal footer with navigation columns, divider, and bottom text row.",
"constraints": {
"textRules": {
"bottomLeftText": {
"required": true,
"example": "© 2025 Company. All rights reserved.",
"minChars": 5,
"maxChars": 60
},
"bottomRightText": {
"required": true,
"example": "Made with Webild",
"minChars": 2,
"maxChars": 50
},
"columnTitle": {
"required": true,
"example": "Navigate",
"minChars": 2,
"maxChars": 20
},
"itemLabel": {
"required": true,
"example": "Home",
"minChars": 2,
"maxChars": 30
}
},
"structureRules": {
"columns": {
"required": true,
"minColumns": 2,
"maxColumns": 5,
"note": "Each column must have title and items array. Columns spread evenly across width."
},
"items": {
"required": true,
"minItems": 1,
"structure": {
"label": "string - Link text (required)",
"href": "string - Link destination (optional)",
"onClick": "() => void - Click handler (optional)"
}
}
}
},
"propsSchema": {
"columns": "Array<{ title: string, items: Array<{ label: string, href?: string, onClick?: () => void }> }>",
"bottomLeftText": "string",
"bottomRightText": "string",
"ariaLabel?": "string (default: 'Site footer')",
"className?": "string"
},
"usageExample": "<FooterSimple columns={[{ title: 'Navigate', items: [{ label: 'Home', href: '#' }, { label: 'About', href: '#' }] }, { title: 'Resources', items: [{ label: 'Blog', href: '#' }, { label: 'FAQ', href: '#' }] }, { title: 'Legal', items: [{ label: 'Privacy', href: '#' }, { label: 'Terms', href: '#' }] }]} bottomLeftText=\"© 2025 Company. All rights reserved.\" bottomRightText=\"Made with Webild\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Requires columns[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

26
registry/components/GradientBarsBackground.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "GradientBarsBackground",
"description": "Vertical gradient bars with dynamic height distribution creating a wave-like pattern.",
"constraints": {},
"propsSchema": {
"className?": "string",
"numBarsPerSide?": "number (default: 8)",
"gradientFrom?": "string (default: 'var(--color-primary-cta)')",
"gradientTo?": "string (default: 'transparent')",
"opacity?": "number (default: 0.075)",
"sideWidth?": "string (default: '35%')"
},
"usageExample": "<GradientBarsBackground numBarsPerSide={8} gradientFrom=\"var(--color-primary-cta)\" gradientTo=\"transparent\" opacity={0.075} sideWidth=\"35%\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for statistics displays",
"Use for achievement showcases"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

23
registry/components/GridBackround.json Normal file
View File

@@ -0,0 +1,23 @@
{
"name": "GridBackround",
"description": "Grid pattern background with line-based grid and optional 3D perspective effect.",
"constraints": {},
"propsSchema": {
"size?": "'small' | 'medium' | 'large' (default: 'medium')",
"perspectiveThreeD?": "boolean (default: false)",
"className?": "string"
},
"usageExample": "<GridBackround size=\"medium\" perspectiveThreeD={false} />",
"do": [
"Use for feature showcases",
"Use for capability displays"
],
"dont": [
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

86
registry/components/HeroBillboard.json Normal file
View File

@@ -0,0 +1,86 @@
{
"name": "HeroBillboard",
"description": "Full-width hero section with centered text content, optional tag, buttons, and single image/video below in a card frame.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Welcome to Our Platform",
"minChars": 2,
"maxChars": 40
},
"description": {
"required": true,
"example": "Create beautiful, responsive web experiences",
"minChars": 5,
"maxChars": 200
},
"tag": {
"required": false,
"example": "New Release",
"minChars": 2,
"maxChars": 30
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/hero-image.jpg",
"note": "Supports external URLs with unoptimized prop"
},
"videoSrc": {
"required": false,
"example": "/hero-video.mp4",
"note": "Takes precedence over imageSrc if both provided"
},
"imageAlt": {
"required": false,
"example": "Hero background",
"note": "Empty string marks image as decorative (aria-hidden)"
}
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
"onClick": "() => void - Additional click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
},
"examples": [
"{ text: 'Get Started', href: 'https://example.com' }",
"{ text: 'Learn More', href: 'about' }"
],
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string (default: '')",
"videoAriaLabel?": "string (default: 'Hero video')",
"ariaLabel?": "string (default: 'Hero section')",
"className?": "string"
},
"usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n <HeroBillboard \n title=\"Welcome to Our Platform\" \n description=\"Create beautiful, responsive web experiences\" \n tag=\"New Release\" \n imageSrc=\"/hero.jpg\" \n imageAlt=\"Hero banner\"\n buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n />\n</ThemeProvider>",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Requires buttons?[]"
],
"dont": [
"Do not use multiple items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

76
registry/components/HeroBillboardCarousel.json Normal file
View File

@@ -0,0 +1,76 @@
{
"name": "HeroBillboardCarousel",
"description": "Full-width hero section with centered text and 5+ auto-scrolling images in carousel layout.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Our Portfolio",
"minChars": 2,
"maxChars": 40
},
"description": {
"required": true,
"example": "Browse through our collection of projects",
"minChars": 5,
"maxChars": 200
},
"tag": {
"required": false,
"example": "Portfolio",
"minChars": 2,
"maxChars": 30
}
},
"mediaRules": {
"mediaItems": {
"required": true,
"example": "[{ imageSrc: '/img1.jpg', imageAlt: 'Product 1' }, { imageSrc: '/img2.jpg', imageAlt: 'Product 2' }, { imageSrc: '/img3.jpg', imageAlt: 'Product 3' }, { imageSrc: '/img4.jpg', imageAlt: 'Product 4' }, { imageSrc: '/img5.jpg', imageAlt: 'Product 5' }]",
"note": "Array of 5+ MediaItem objects. Each item can have imageSrc, videoSrc, imageAlt, videoAriaLabel. Requires minimum 5 images."
}
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
"onClick": "() => void - Additional click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
},
"examples": [
"{ text: 'View Portfolio', href: 'https://example.com' }",
"{ text: 'Contact Us', href: 'contact' }"
],
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"mediaItems": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Each item requires either imageSrc or videoSrc",
"ariaLabel?": "string (default: 'Hero section')",
"className?": "string"
},
"usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n <HeroBillboardCarousel \n title=\"Our Portfolio\" \n description=\"Browse through our collection of projects\" \n tag=\"Portfolio\" \n mediaItems={[\n { imageSrc: '/img1.jpg', imageAlt: 'Product 1' },\n { imageSrc: '/img2.jpg', imageAlt: 'Product 2' },\n { imageSrc: '/img3.jpg', imageAlt: 'Product 3' },\n { imageSrc: '/img4.jpg', imageAlt: 'Product 4' },\n { imageSrc: '/img5.jpg', imageAlt: 'Product 5' },\n { imageSrc: '/img6.jpg', imageAlt: 'Product 6' },\n { imageSrc: '/img7.jpg', imageAlt: 'Product 7' }\n ]}\n buttons={[{ text: 'View Portfolio', href: 'https://example.com' }, { text: 'Contact Us', href: 'contact' }]} \n />\n</ThemeProvider>",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Use for portfolios",
"Use for image galleries",
"Requires buttons?[]",
"Requires mediaItems[]"
],
"dont": [
"Do not use less than 5 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

76
registry/components/HeroBillboardGallery.json Normal file
View File

@@ -0,0 +1,76 @@
{
"name": "HeroBillboardGallery",
"description": "Full-width hero section with centered text and 3-5 overlapping rotated images in gallery layout.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Explore Our Collection",
"minChars": 2,
"maxChars": 40
},
"description": {
"required": true,
"example": "Discover amazing products and experiences",
"minChars": 5,
"maxChars": 200
},
"tag": {
"required": false,
"example": "Featured",
"minChars": 2,
"maxChars": 30
}
},
"mediaRules": {
"mediaItems": {
"required": true,
"example": "[{ imageSrc: '/img1.jpg', imageAlt: 'Gallery 1' }, { imageSrc: '/img2.jpg', imageAlt: 'Gallery 2' }, { imageSrc: '/img3.jpg', imageAlt: 'Gallery 3' }]",
"note": "Array of 3-5 MediaItem objects. Each item can have imageSrc, videoSrc, imageAlt, videoAriaLabel. Supports 3-5 images maximum."
}
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
"onClick": "() => void - Additional click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
},
"examples": [
"{ text: 'View Gallery', href: 'https://example.com' }",
"{ text: 'Learn More', href: 'about' }"
],
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"mediaItems": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Each item requires either imageSrc or videoSrc",
"ariaLabel?": "string (default: 'Hero section')",
"className?": "string"
},
"usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n <HeroBillboardGallery \n title=\"Explore Our Collection\" \n description=\"Discover amazing products and experiences\" \n tag=\"Featured\" \n mediaItems={[\n { imageSrc: '/img1.jpg', imageAlt: 'Gallery 1' },\n { imageSrc: '/img2.jpg', imageAlt: 'Gallery 2' },\n { imageSrc: '/img3.jpg', imageAlt: 'Gallery 3' },\n { imageSrc: '/img4.jpg', imageAlt: 'Gallery 4' },\n { imageSrc: '/img5.jpg', imageAlt: 'Gallery 5' }\n ]}\n buttons={[{ text: 'View Gallery', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n />\n</ThemeProvider>",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Use for portfolios",
"Use for image galleries",
"Requires buttons?[]",
"Requires mediaItems[]"
],
"dont": [
"Do not use less than 3 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

81
registry/components/HeroBillboardRotatedCarousel.json Normal file
View File

@@ -0,0 +1,81 @@
{
"name": "HeroBillboardRotatedCarousel",
"description": "Hero section with centered text content and angled/rotated carousel below. Features auto-playing carousel with scaled and rotated side cards.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Transform Your Workflow",
"minChars": 2,
"maxChars": 60
},
"description": {
"required": true,
"example": "Experience the power of seamless collaboration and productivity tools designed for modern teams",
"minChars": 5,
"maxChars": 200
},
"tag": {
"required": false,
"example": "New Release",
"minChars": 2,
"maxChars": 30
}
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional)",
"onClick": "() => void - Click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
},
"note": "Button variant controlled by ThemeProvider's defaultButtonVariant. All sections should be wrapped in a single ThemeProvider at the app/page level."
},
"carouselItemRules": {
"required": true,
"minItems": 6,
"structure": {
"id": "string - Unique identifier (required)",
"imageSrc": "string - Image URL (optional)",
"videoSrc": "string - Video URL (optional, takes precedence over imageSrc)",
"imageAlt": "string - Alt text for image (optional)",
"videoAriaLabel": "string - ARIA label for video (optional)"
},
"note": "Minimum 6 items required to prevent duplicate keys. Carousel displays 5 positions simultaneously (-2, -1, 0, 1, 2). Each item should have either imageSrc or videoSrc. Uses MediaContent component for rendering."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"carouselItems": "Array<{ id: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel items (minimum 6 items)",
"autoPlay?": "boolean (default: true)",
"autoPlayInterval?": "number (default: 4000)",
"ariaLabel?": "string (default: 'Hero section')",
"className?": "string"
},
"usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n <HeroBillboardRotatedCarousel \n title=\"Transform Your Workflow\" \n description=\"Experience seamless collaboration and productivity\" \n tag=\"New Release\" \n tagIcon={Sparkles}\n buttons={[{ text: 'Get Started' }, { text: 'Learn More' }]}\n carouselItems={[\n { id: '1', imageSrc: '/image1.jpg', imageAlt: 'Product 1' },\n { id: '2', imageSrc: '/image2.jpg', imageAlt: 'Product 2' },\n { id: '3', imageSrc: '/image3.jpg', imageAlt: 'Product 3' },\n { id: '4', imageSrc: '/image4.jpg', imageAlt: 'Product 4' },\n { id: '5', imageSrc: '/image5.jpg', imageAlt: 'Product 5' },\n { id: '6', imageSrc: '/image6.jpg', imageAlt: 'Product 6' }\n ]}\n autoPlay={true}\n autoPlayInterval={4000}\n />\n</ThemeProvider>",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Use for portfolios",
"Use for image galleries",
"Use for product catalogs",
"Use for e-commerce",
"Requires buttons?[]",
"Requires carouselItems[]"
],
"dont": [
"Do not use less than 6 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

101
registry/components/HeroBillboardScroll.json Normal file
View File

@@ -0,0 +1,101 @@
{
"name": "HeroBillboardScroll",
"description": "Full-screen hero section with centered text and media card that animates with 3D perspective transforms on scroll (desktop only).",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Scroll Animations",
"minChars": 2,
"maxChars": 60
},
"description": {
"required": true,
"example": "Experience smooth, performant animations as you scroll through your content",
"minChars": 5,
"maxChars": 200
},
"tag": {
"required": false,
"example": "Unleash the Power",
"minChars": 2,
"maxChars": 30
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/dashboard.jpg",
"note": "Image to display in the animated card. Supports external URLs with unoptimized prop"
},
"videoSrc": {
"required": false,
"example": "/demo.mp4",
"note": "Video to display in the animated card. Takes precedence over imageSrc if both provided"
},
"imageAlt": {
"required": false,
"example": "Dashboard preview",
"note": "Empty string marks image as decorative (aria-hidden)"
},
"animationBehavior": {
"desktop": {
"rotateX": "Animates from 20deg to 0deg based on scroll progress",
"scale": "Animates from 1.05 to 1 based on scroll progress",
"height": "h-[75svh] (75% of viewport height)",
"note": "Uses Framer Motion's useScroll and useTransform for smooth scroll-linked animations"
},
"mobile": {
"rotateX": "Static 20deg rotation (no animation)",
"scale": "No scale animation",
"height": "h-[50svh] (50% of viewport height)",
"note": "Separate static div implementation to prevent performance issues and hydration errors"
},
"perspective": "1000px applied to container for 3D effect"
}
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
"onClick": "() => void - Additional click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
},
"examples": [
"{ text: 'Get Started', onClick: () => console.log('Get Started clicked') }",
"{ text: 'Learn More', href: 'about' }"
],
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string (default: '')",
"videoAriaLabel?": "string (default: 'Hero video')",
"ariaLabel?": "string (default: 'Hero section')",
"className?": "string"
},
"usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n <HeroBillboardScroll \n title=\"Scroll Animations\" \n description=\"Experience smooth, performant animations as you scroll through your content\" \n tag=\"Unleash the Power\" \n imageSrc=\"/dashboard.jpg\" \n imageAlt=\"Dashboard preview\"\n buttons={[{ text: 'Get Started', onClick: () => console.log('Get Started clicked') }, { text: 'Learn More', href: 'about' }]} \n />\n</ThemeProvider>",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Use for product catalogs",
"Use for e-commerce",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

78
registry/components/HeroCarouselLogo.json Normal file
View File

@@ -0,0 +1,78 @@
{
"name": "HeroCarouselLogo",
"description": "Full-screen hero section with auto-playing carousel background, large text logo at bottom that scales to fill container width, description and button row above, with progress bars and linear gradient blur overlay.",
"constraints": {
"textRules": {
"logoText": {
"required": true,
"example": "WEBILD",
"minChars": 2,
"maxChars": 20
},
"description": {
"required": true,
"example": "Create stunning, responsive websites with our comprehensive component library",
"minChars": 5,
"maxChars": 200
}
},
"mediaRules": {
"slides": {
"required": true,
"example": "[{ imageSrc: '/slide1.jpg', imageAlt: 'Slide 1' }, { imageSrc: '/slide2.jpg', imageAlt: 'Slide 2' }]",
"note": "Array of CarouselSlide objects. Each slide can have imageSrc, videoSrc, imageAlt, videoAriaLabel. Video takes precedence over image if both provided in a slide."
},
"autoplayDelay": {
"required": false,
"default": 3000,
"note": "Milliseconds between automatic slide transitions"
},
"showDimOverlay": {
"required": false,
"default": false,
"note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text and logo contrast"
}
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
"onClick": "() => void - Additional click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
},
"examples": [
"{ text: 'Get Started', href: 'https://github.com' }",
"{ text: 'Learn More', href: 'about' }"
],
"note": "Buttons are required (cannot be empty array). Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
}
},
"propsSchema": {
"logoText": "string",
"description": "string",
"buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
"slides": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel slide items",
"autoplayDelay?": "number (default: 3000)",
"showDimOverlay?": "boolean (default: false)",
"logoLineHeight?": "number (default: 1.1)",
"ariaLabel?": "string (default: 'Hero section')",
"className?": "string"
},
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n <HeroCarouselLogo \n logoText=\"WEBILD\" \n description=\"Create stunning, responsive websites with our comprehensive component library\" \n buttons={[{ text: 'Get Started', href: 'https://github.com' }, { text: 'Learn More', href: 'about' }]} \n slides={[{ imageSrc: '/slide1.jpg', imageAlt: 'Slide 1' }, { imageSrc: '/slide2.jpg', imageAlt: 'Slide 2' }, { imageSrc: '/slide3.jpg', imageAlt: 'Slide 3' }]}\n autoplayDelay={5000}\n />\n</ThemeProvider>",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Requires buttons[]",
"Requires slides[]"
],
"dont": [
"Do not use less than 5 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

82
registry/components/HeroLogo.json Normal file
View File

@@ -0,0 +1,82 @@
{
"name": "HeroLogo",
"description": "Full-screen hero section with background media, large text logo at bottom that scales to fill container width, description and button row above, featuring a linear gradient blur overlay.",
"constraints": {
"textRules": {
"logoText": {
"required": true,
"example": "Webild",
"minChars": 2,
"maxChars": 20
},
"description": {
"required": true,
"example": "Building the future of web design with innovative solutions",
"minChars": 5,
"maxChars": 200
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/hero-background.jpg",
"note": "Background image that fills the viewport. Supports external URLs with unoptimized prop"
},
"videoSrc": {
"required": false,
"example": "/hero-background.mp4",
"note": "Background video that fills the viewport. Takes precedence over imageSrc if both provided"
},
"imageAlt": {
"required": false,
"example": "Hero background",
"note": "Empty string marks image as decorative (aria-hidden)"
},
"showDimOverlay": {
"required": false,
"default": false,
"note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text and logo contrast"
}
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
"onClick": "() => void - Additional click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
},
"examples": [
"{ text: 'Get Started', href: 'https://github.com' }",
"{ text: 'Learn More', href: 'about' }"
],
"note": "Buttons are required (cannot be empty array). Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
}
},
"propsSchema": {
"logoText": "string",
"description": "string",
"buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string (default: '')",
"videoAriaLabel?": "string (default: 'Hero video')",
"showDimOverlay?": "boolean (default: false)",
"logoLineHeight?": "number (default: 1.1)",
"ariaLabel?": "string (default: 'Hero section')",
"className?": "string"
},
"usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n <HeroLogo \n logoText=\"Webild\" \n description=\"Building the future of web design with innovative solutions\" \n buttons={[{ text: 'Get Started', href: 'https://github.com' }, { text: 'Learn More', href: 'about' }]} \n imageSrc=\"/placeholders/placeholder5.jpg\" \n imageAlt=\"Hero background\"\n />\n</ThemeProvider>",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Requires buttons[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

73
registry/components/HeroLogoBillboard.json Normal file
View File

@@ -0,0 +1,73 @@
{
"name": "HeroLogoBillboard",
"description": "Hero section with large text logo at top that scales to fill container width, description text, and single framed media (card or browser style) below.",
"constraints": {
"textRules": {
"logoText": {
"required": true,
"example": "klime studio",
"minChars": 2,
"maxChars": 30
},
"description": {
"required": true,
"example": "we help driven founders build the brands of tomorrow through websites, product design & branding.",
"minChars": 5,
"maxChars": 300
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/hero-image.jpg",
"note": "Supports external URLs with unoptimized prop"
},
"videoSrc": {
"required": false,
"example": "/hero-video.mp4",
"note": "Takes precedence over imageSrc if both provided"
},
"imageAlt": {
"required": false,
"example": "Product showcase",
"note": "Empty string marks image as decorative (aria-hidden)"
},
"frameStyle": {
"required": false,
"options": [
"card",
"browser"
],
"default": "card",
"note": "'card' displays media in simple card with padding. 'browser' wraps media in browser mockup with address bar and window controls."
}
}
},
"propsSchema": {
"logoText": "string",
"description": "string",
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string (default: '')",
"videoAriaLabel?": "string (default: 'Hero video')",
"frameStyle?": "'card' | 'browser' (default: 'card')",
"logoLineHeight?": "number (default: 1.1)",
"ariaLabel?": "string (default: 'Hero section')",
"className?": "string"
},
"usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\" cardStyle=\"layered-gradient\">\n <HeroLogoBillboard \n logoText=\"klime studio\" \n description=\"we help driven founders build the brands of tomorrow through websites, product design & branding.\" \n imageSrc=\"/hero.jpg\"\n imageAlt=\"Hero showcase\"\n frameStyle=\"card\"\n />\n</ThemeProvider>",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays"
],
"dont": [
"Do not use multiple items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

92
registry/components/HeroLogoBillboardSplit.json Normal file
View File

@@ -0,0 +1,92 @@
{
"name": "HeroLogoBillboardSplit",
"description": "Hero section with split layout (description left, buttons right), large text logo that scales to fill container width, and single framed media at bottom. Supports flex-col or flex-col-reverse layout order.",
"constraints": {
"textRules": {
"logoText": {
"required": true,
"example": "ACME",
"minChars": 2,
"maxChars": 30
},
"description": {
"required": true,
"example": "Create stunning, responsive websites with our comprehensive component library",
"minChars": 5,
"maxChars": 300
}
},
"layoutRules": {
"layoutOrder": {
"required": true,
"options": [
"default",
"reverse"
],
"note": "'default' displays split section (description/buttons) then logo (flex-col). 'reverse' displays logo then split section (flex-col-reverse)."
}
},
"buttonRules": {
"buttons": {
"required": true,
"minItems": 1,
"maxItems": 2,
"note": "Only first 2 buttons are displayed using slice(0, 2). Uses theme.defaultButtonVariant for styling."
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/hero-image.jpg",
"note": "Supports external URLs with unoptimized prop"
},
"videoSrc": {
"required": false,
"example": "/hero-video.mp4",
"note": "Takes precedence over imageSrc if both provided"
},
"imageAlt": {
"required": false,
"example": "Product showcase",
"note": "Empty string marks image as decorative (aria-hidden)"
},
"frameStyle": {
"required": false,
"options": [
"card",
"browser"
],
"default": "card",
"note": "'card' displays media in simple card with padding. 'browser' wraps media in browser mockup with address bar and window controls."
}
}
},
"propsSchema": {
"logoText": "string",
"description": "string",
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)",
"buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
"layoutOrder": "'default' | 'reverse'",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string (default: '')",
"videoAriaLabel?": "string (default: 'Hero video')",
"frameStyle?": "'card' | 'browser' (default: 'card')",
"logoLineHeight?": "number (default: 1.1)",
"ariaLabel?": "string (default: 'Hero section')",
"className?": "string"
},
"usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\" cardStyle=\"layered-gradient\">\n <HeroLogoBillboardSplit \n logoText=\"ACME\" \n description=\"Create stunning, responsive websites with our comprehensive component library\" \n buttons={[\n { text: 'Get Started', href: '#' },\n { text: 'Learn More', href: '#' }\n ]}\n layoutOrder=\"default\"\n imageSrc=\"/hero.jpg\"\n imageAlt=\"Hero showcase\"\n frameStyle=\"browser\"\n />\n</ThemeProvider>",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Requires buttons[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

105
registry/components/HeroOverlay.json Normal file
View File

@@ -0,0 +1,105 @@
{
"name": "HeroOverlay",
"description": "Full-screen hero section with background image/video overlay, circular blur effect, and configurable text positioning (center or bottom-left).",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Build Modern Web Experiences",
"minChars": 2,
"maxChars": 40
},
"description": {
"required": true,
"example": "Create stunning, responsive websites with our comprehensive component library",
"minChars": 5,
"maxChars": 200
},
"tag": {
"required": false,
"example": "New Release",
"minChars": 2,
"maxChars": 30
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/hero-background.jpg",
"note": "Background image that fills the viewport. Supports external URLs with unoptimized prop"
},
"videoSrc": {
"required": false,
"example": "/hero-background.mp4",
"note": "Background video that fills the viewport. Takes precedence over imageSrc if both provided"
},
"imageAlt": {
"required": false,
"example": "Hero background",
"note": "Empty string marks image as decorative (aria-hidden)"
},
"textPosition": {
"required": false,
"options": [
"center",
"bottom-left"
],
"default": "bottom-left",
"note": "'center' positions text in the center of viewport, 'bottom-left' positions text at bottom-left corner"
},
"showBlur": {
"required": false,
"default": true,
"note": "Controls circular blur effect with radial gradient. Blur follows text position (centered or bottom-left corner)"
},
"showDimOverlay": {
"required": false,
"default": false,
"note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text contrast"
}
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
"onClick": "() => void - Additional click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
},
"examples": [
"{ text: 'Get Started', href: 'https://example.com' }",
"{ text: 'Learn More', href: 'about' }"
],
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string (default: '')",
"videoAriaLabel?": "string (default: 'Hero video')",
"textPosition?": "'center' | 'bottom-left' (default: 'bottom-left')",
"showDimOverlay?": "boolean (default: false)",
"showBlur?": "boolean (default: true)",
"ariaLabel?": "string (default: 'Hero section')",
"className?": "string"
},
"usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n <HeroOverlay \n title=\"Build Modern Web Experiences\" \n description=\"Create stunning, responsive websites with our comprehensive component library\" \n tag=\"New Release\" \n imageSrc=\"/hero-background.jpg\" \n imageAlt=\"Hero background\"\n textPosition=\"bottom-left\"\n showBlur={true}\n showDimOverlay={false}\n buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n />\n</ThemeProvider>",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

97
registry/components/HeroSplit.json Normal file
View File

@@ -0,0 +1,97 @@
{
"name": "HeroSplit",
"description": "Split-layout hero section with text content on one side and single image/video on the other, with responsive centering.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Build Better Products",
"minChars": 2,
"maxChars": 36
},
"description": {
"required": true,
"example": "Create exceptional user experiences with our design system",
"minChars": 5,
"maxChars": 200
},
"tag": {
"required": false,
"example": "New Release",
"minChars": 2,
"maxChars": 30
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/hero-image.jpg",
"note": "Supports external URLs with unoptimized prop"
},
"videoSrc": {
"required": false,
"example": "/hero-video.mp4",
"note": "Takes precedence over imageSrc if both provided"
},
"imageAlt": {
"required": false,
"example": "Product showcase",
"note": "Empty string marks image as decorative (aria-hidden)"
},
"imagePosition": {
"required": false,
"options": [
"left",
"right"
],
"default": "right"
}
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
"onClick": "() => void - Additional click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
},
"examples": [
"{ text: 'Get Started', href: 'https://example.com' }",
"{ text: 'Learn More', href: 'about' }"
],
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
"avatarText?": "string - Text displayed next to the avatar group",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string (default: '')",
"videoAriaLabel?": "string (default: 'Hero video')",
"ariaLabel?": "string (default: 'Hero section')",
"imagePosition?": "'left' | 'right' (default: 'right')",
"fixedMediaHeight?": "boolean (default: true) - When true, media wrapper is aspect-square on mobile and md:h-[65vh] on desktop",
"className?": "string"
},
"usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <HeroSplit \n title=\"Build Better Products\" \n description=\"Create exceptional user experiences with our design system\" \n tag=\"New Release\"\n imagePosition=\"right\" \n imageSrc=\"/hero.jpg\"\n imageAlt=\"Product showcase\"\n buttons={[{ text: 'Start Building', href: 'https://example.com' }, { text: 'View Demo', href: 'demo' }]} \n />\n</ThemeProvider>",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Requires buttons?[]",
"Requires avatars?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

106
registry/components/HeroSplitKpi.json Normal file
View File

@@ -0,0 +1,106 @@
{
"name": "HeroSplitKpi",
"description": "Split-layout hero with media image/video and three KPI metric boxes positioned around it.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "The Future of Supply Chain",
"minChars": 2,
"maxChars": 36
},
"description": {
"required": true,
"example": "Ship globally within 3 days post-production with smart fulfillment",
"minChars": 5,
"maxChars": 200
},
"tag": {
"required": false,
"example": "Trusted by 150+ Brands",
"minChars": 2,
"maxChars": 30
}
},
"kpiRules": {
"kpis": {
"required": true,
"note": "Array of exactly 3 KPI items. Each item has 'value' (the metric) and 'label' (description)",
"structure": {
"value": "string - The metric value (e.g., '99.8%', '10x', '4-10 Days')",
"label": "string - Description of the metric (e.g., 'Order Accuracy')"
},
"example": "[{ value: '4-10 Days', label: 'Worldwide Delivery' }, { value: '99.8%', label: 'Order Accuracy' }, { value: '10x', label: 'Faster Lead Times' }]"
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/hero-image.jpg",
"note": "Image displayed in scaled card wrapper"
},
"videoSrc": {
"required": false,
"example": "/hero-video.mp4",
"note": "Video takes precedence over image if both provided"
},
"imageAlt": {
"required": false,
"example": "Product showcase",
"note": "Empty string marks image as decorative (aria-hidden)"
},
"imagePosition": {
"required": false,
"options": [
"left",
"right"
],
"default": "right"
}
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional)",
"onClick": "() => void - Additional click handler (optional)"
}
}
},
"propsSchema": {
"title": "string",
"description": "string",
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)",
"kpis": "[KpiItem, KpiItem, KpiItem] - Array of exactly 3 KPI items with value and label",
"enableKpiAnimation": "boolean - Enable/disable mouse-following animation on KPI boxes",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
"avatarText?": "string - Text displayed next to the avatar group",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string (default: '')",
"videoAriaLabel?": "string (default: 'Hero video')",
"ariaLabel?": "string (default: 'Hero section')",
"imagePosition?": "'left' | 'right' (default: 'right')",
"className?": "string"
},
"usageExample": "<HeroSplitKpi title=\"The Future of Supply Chain\" description=\"Ship globally within 3 days with smart fulfillment\" background={{ variant: \"radial-gradient\" }} enableKpiAnimation={true} kpis={[{ value: '4-10 Days', label: 'Worldwide Delivery' }, { value: '99.8%', label: 'Order Accuracy' }, { value: '10x', label: 'Faster Lead Times' }]} imageSrc=\"/hero-image.jpg\" imageAlt=\"Supply chain\" buttons={[{ text: 'Get Started', href: 'https://example.com' }]} />",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Use for statistics displays",
"Use for achievement showcases",
"Requires kpis[]",
"Requires buttons?[]",
"Requires avatars?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

61
registry/components/InlineImageSplitTextAbout.json Normal file
View File

@@ -0,0 +1,61 @@
{
"name": "InlineImageSplitTextAbout",
"description": "About section with dynamic heading composed of alternating text and inline image segments.",
"constraints": {
"textRules": {
"heading[].content": {
"required": "text segments require content",
"example": "Building the future with",
"minChars": 1,
"maxChars": 100,
"note": "Each text segment in the heading array"
}
},
"imageRules": {
"heading[].src": {
"required": "image segments require src",
"example": "/brand/logo.png or https://example.com/image.png",
"note": "Supports local paths and external URLs. External URLs are rendered with unoptimized flag."
},
"heading[].alt": {
"required": false,
"example": "Company logo",
"note": "Optional alt text for images. Omit or use empty string for decorative images (aria-hidden=true when empty)."
}
},
"headingRules": {
"minSegments": 1,
"note": "heading array can contain any number of text and image segments in any order. Images automatically alternate rotation direction (1st: -rotate-12, 2nd: rotate-12, etc.)."
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional)",
"onClick": "() => void - Click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
},
"note": "Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius."
}
},
"propsSchema": {
"heading": "Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>",
"buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'About section')",
"className?": "string"
},
"usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <InlineImageSplitTextAbout heading={[{ type: 'text', content: 'Building the future with' }, { type: 'image', src: '/brand/logo.png', alt: 'Company logo' }, { type: 'text', content: 'innovative solutions' }]} useInvertedBackground={\"noInvert\"} buttons={[{ text: 'Get Started', href: '/signup' }, { text: 'Learn More', href: '/about' }]} />\n</ThemeProvider>",
"do": [
"Use for about pages",
"Use for company information",
"Requires heading[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

35
registry/components/Input.json Normal file
View File

@@ -0,0 +1,35 @@
{
"name": "Input",
"description": "Styled text input field with secondary-button styling and rounded-theme borders.",
"constraints": {
"textRules": {
"placeholder": {
"required": false,
"example": "Enter your name",
"minChars": 2,
"maxChars": 50
}
}
},
"propsSchema": {
"value": "string (required)",
"onChange": "(value: string) => void (required)",
"type?": "string (default: 'text')",
"placeholder?": "string",
"required?": "boolean (default: false)",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"className?": "string"
},
"usageExample": "<Input value={name} onChange={(value) => setName(value)} type=\"text\" placeholder=\"Name\" required />",
"do": [
"Use for feature showcases",
"Use for capability displays"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

84
registry/components/MediaAbout.json Normal file
View File

@@ -0,0 +1,84 @@
{
"name": "MediaAbout",
"description": "Full-width media about section with centered TextBox content overlaid on image or video.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Elevate Your Experience",
"minChars": 2,
"maxChars": 100
},
"description": {
"required": true,
"example": "Discover a new way to connect, create, and inspire with our innovative solutions.",
"minChars": 10,
"maxChars": 300
},
"tag": {
"required": false,
"example": "About Us",
"minChars": 2,
"maxChars": 30
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/about-hero.jpg",
"note": "Either imageSrc or videoSrc should be provided. Image is recommended for static visuals."
},
"videoSrc": {
"required": false,
"example": "/about-video.mp4",
"note": "Either imageSrc or videoSrc should be provided. Video is recommended for motion content."
},
"imageAlt": {
"required": false,
"example": "Our team in action",
"note": "Alt text for image. Defaults to empty string (decorative)."
},
"videoAriaLabel": {
"required": false,
"example": "About us video",
"note": "ARIA label for video accessibility."
}
},
"buttonRules": {
"maxButtons": 2,
"minButtons": 0,
"note": "Buttons are part of TextBox, centered and overlaid on media. First button is primary, second is secondary. Button variant controlled by ThemeProvider's defaultButtonVariant."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string",
"videoAriaLabel?": "string",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'About section')",
"className?": "string"
},
"usageExample": "<MediaAbout title=\"Elevate Your Experience\" description=\"Discover a new way to connect, create, and inspire.\" tag=\"About Us\" imageSrc=\"/about-hero.jpg\" imageAlt=\"Our team\" buttons={[{ text: 'Shop Now', href: '/shop' }]} useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for landing pages",
"Use for feature showcases",
"Use for capability displays",
"Use for about pages",
"Use for company information",
"Use for product catalogs",
"Use for e-commerce",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

90
registry/components/MediaSplitTabsAbout.json Normal file
View File

@@ -0,0 +1,90 @@
{
"name": "MediaSplitTabsAbout",
"description": "Split-layout about section with interactive tabs, animated descriptions, and 60/40 grid with media.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Why Choose Us",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": false,
"example": "We deliver excellence across every aspect of our work",
"minChars": 10,
"maxChars": 200
}
},
"tabRules": {
"minTabs": 2,
"maxTabs": 5,
"structure": {
"id": "string - Unique identifier (required)",
"label": "string - Tab button text (required)",
"description": "string - Description shown when tab is active (required)"
},
"note": "First tab is selected by default. Tab indicator dot animates smoothly between tabs."
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/team-photo.jpg",
"note": "Either imageSrc or videoSrc should be provided."
},
"videoSrc": {
"required": false,
"example": "/intro-video.mp4",
"note": "Either imageSrc or videoSrc should be provided."
},
"imageAlt": {
"required": false,
"example": "Team collaboration",
"note": "Alt text for image."
},
"videoAriaLabel": {
"required": false,
"example": "Introduction video",
"note": "ARIA label for video accessibility."
},
"imagePosition": {
"required": false,
"default": "right",
"options": [
"left",
"right"
],
"note": "Position of media card relative to content card."
}
}
},
"propsSchema": {
"title": "string",
"description?": "string",
"tabs": "Array<{ id: string, label: string, description: string }> - Tab options for content switching",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string",
"videoAriaLabel?": "string",
"imagePosition?": "'left' | 'right' (default: 'right')",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'About section')",
"className?": "string"
},
"usageExample": "<MediaSplitTabsAbout title=\"Why Choose Us\" tabs={[{ id: 'collaboration', label: 'Deep Collaboration', description: 'We work side by side with your team, fostering open communication and shared accountability.' }, { id: 'expertise', label: 'Expertise', description: 'Our team brings decades of combined experience across industries.' }, { id: 'solutions', label: 'Tailored Solutions', description: 'Every challenge is unique. We craft custom strategies that align with your specific goals.' }]} imageSrc=\"/team-photo.jpg\" imageAlt=\"Team collaboration\" imagePosition=\"right\" useInvertedBackground=\"noInvert\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for about pages",
"Use for company information",
"Requires tabs[]"
],
"dont": [
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

95
registry/components/MetricCardEleven.json Normal file
View File

@@ -0,0 +1,95 @@
{
"name": "MetricCardEleven",
"description": "Metrics section with paired text and media cards. Each metric displays a value card alongside an image/video card in a 2-column layout.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Our Impact",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "See the results we've delivered for our clients",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Results",
"minChars": 2,
"maxChars": 30
}
},
"metricRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"value": {
"required": true,
"example": "10M+",
"minChars": 1,
"maxChars": 15,
"note": "Large metric value displayed prominently at top of text card"
},
"title": {
"required": true,
"example": "Organic Views",
"minChars": 2,
"maxChars": 50,
"note": "Metric title displayed at bottom of text card, truncates"
},
"description": {
"required": true,
"example": "Growth through smart content strategy",
"minChars": 5,
"maxChars": 100,
"note": "Metric description below accent divider, truncates to single line"
},
"media": {
"required": true,
"note": "Either imageSrc or videoSrc must be provided for each metric"
}
},
"itemRules": {
"minItems": 1,
"maxItems": 6,
"recommendedItems": "2-4"
}
},
"propsSchema": {
"metrics": "Array<{ id: string, value: string, title: string, description: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }>",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Metrics section')",
"className?": "string"
},
"usageExample": "<MetricCardEleven metrics={[{ id: '1', value: '10M+', title: 'Organic Views', description: 'Growth through smart content strategy', imageSrc: '/hero/hero-1.webp', imageAlt: 'Content creator working' }, { id: '2', value: '500K+', title: 'New Followers', description: 'Engaged community members gained', imageSrc: '/hero/hero-2.webp', imageAlt: 'Social media engagement' }]} title=\"Our Impact\" description=\"See the results we've delivered for our clients\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" animationType=\"slide-up\" />",
"do": [
"Use for statistics displays",
"Use for achievement showcases",
"Requires metrics[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [
"Do not use more than 4 items",
"Do not use more than 6 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

69
registry/components/MetricCardFourteen.json Normal file
View File

@@ -0,0 +1,69 @@
{
"name": "MetricCardFourteen",
"description": "Metrics section with animated title, tag badge, and metric cards with large values and descriptions.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "We're committed to sustainability and reducing our environmental impact.",
"minChars": 10,
"maxChars": 200
},
"tag": {
"required": true,
"example": "Impact",
"minChars": 2,
"maxChars": 30
}
},
"metricRules": {
"id": {
"required": true,
"example": "1",
"note": "Unique identifier for each metric"
},
"value": {
"required": true,
"example": "16x",
"minChars": 1,
"maxChars": 10,
"note": "Large metric value displayed prominently"
},
"description": {
"required": true,
"example": "By using 80% less steel, we've lowered our carbon footprint by 16x.",
"minChars": 10,
"maxChars": 200,
"note": "Description text below the divider"
}
},
"itemRules": {
"minItems": 1,
"maxItems": 4,
"recommendedItems": 2
}
},
"propsSchema": {
"title": "string",
"tag": "string",
"metrics": "Array<{ id: string, value: string, description: string }>",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Metrics section')",
"className?": "string"
},
"usageExample": "<MetricCardFourteen title=\"We're committed to sustainability and reducing our environmental impact.\" tag=\"Impact\" metrics={[{ id: '1', value: '16x', description: 'By using 80% less steel, we've lowered our carbon footprint.' }, { id: '2', value: '95%', description: 'Customer satisfaction rate across all products.' }]} useInvertedBackground=\"noInvert\" />",
"do": [
"Use for statistics displays",
"Use for achievement showcases",
"Requires metrics[]"
],
"dont": [
"Do not use more than 4 items",
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

91
registry/components/MetricCardOne.json Normal file
View File

@@ -0,0 +1,91 @@
{
"name": "MetricCardOne",
"description": "Metric card with large gradient value text, title, description, and icon badge.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Our Impact",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Key metrics that showcase our growth and success",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Statistics",
"minChars": 2,
"maxChars": 30
}
},
"metricRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"value": {
"required": true,
"example": "100",
"minChars": 1,
"maxChars": 5,
"note": "Large metric value displayed with gradient effect."
},
"title": {
"required": true,
"example": "million",
"minChars": 2,
"maxChars": 30,
"note": "Metric label displayed below value with negative margin overlap"
},
"description": {
"required": true,
"example": "Active users worldwide",
"minChars": 5,
"maxChars": 150,
"note": "Supporting description text displayed below title"
},
"icon": {
"required": true,
"example": "TrendingUp",
"note": "Lucide icon displayed in bottom-left corner with primary-button styling"
}
}
},
"propsSchema": {
"metrics": "Array<{ id: string, value: string, title: string, description: string, icon: LucideIcon }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' (required)",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"uniformGridCustomHeightClasses?": "string",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Metrics section')",
"className?": "string"
},
"usageExample": "<MetricCardOne metrics={[{ id: '1', value: '100', title: 'million', description: 'Active users worldwide', icon: TrendingUp }, { id: '2', value: '700', title: 'thousand', description: 'Projects completed successfully', icon: Users }]} title=\"Our Impact\" description=\"See how we're making a difference\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for statistics displays",
"Use for achievement showcases",
"Requires metrics[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

89
registry/components/MetricCardSeven.json Normal file
View File

@@ -0,0 +1,89 @@
{
"name": "MetricCardSeven",
"description": "Metric card with large accent value, title, and feature list with checkmarks.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Our Impact",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Key metrics that showcase our growth",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Stats",
"minChars": 2,
"maxChars": 30
}
},
"metricRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"value": {
"required": true,
"example": "15+",
"minChars": 1,
"maxChars": 10,
"note": "Large metric value displayed at top of card in accent color"
},
"title": {
"required": true,
"example": "Years in business consulting",
"minChars": 5,
"maxChars": 60,
"note": "Metric description displayed below value"
},
"items": {
"required": true,
"example": "['8+ industries served', '5+ countries reached']",
"minItems": 1,
"maxItems": 5,
"note": "Array of supporting bullet points displayed with checkmarks"
}
}
},
"propsSchema": {
"metrics": "Array<{ id: string, value: string, title: string, items: string[] }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"uniformGridCustomHeightClasses?": "string",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Metrics section')",
"className?": "string"
},
"usageExample": "<MetricCardSeven metrics={[{ id: '1', value: '15+', title: 'Years in business consulting', items: ['8+ industries served', '5+ countries reached'] }, { id: '2', value: '500+', title: 'Projects completed', items: ['98% client satisfaction', 'Award-winning designs'] }]} title=\"Our Impact\" description=\"Key metrics that showcase our growth\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground=\"noInvert\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for pricing pages",
"Use for subscription tiers",
"Use for statistics displays",
"Use for achievement showcases",
"Requires metrics[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

106
registry/components/MetricCardTen.json Normal file
View File

@@ -0,0 +1,106 @@
{
"name": "MetricCardTen",
"description": "Job listing style metric cards with title, subtitle, category indicator, value, and optional footer buttons.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Open Positions",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Join our team and help shape the future of AI",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Careers",
"minChars": 2,
"maxChars": 30
}
},
"metricRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"title": {
"required": true,
"example": "Senior Software Engineer, Platform",
"minChars": 5,
"maxChars": 80,
"note": "Main title displayed at top of card, truncates if too long"
},
"subtitle": {
"required": true,
"example": "San Francisco, CA · Full-time · Remote eligible",
"minChars": 5,
"maxChars": 100,
"note": "Secondary info like location, type, or details"
},
"category": {
"required": true,
"example": "Engineering",
"minChars": 2,
"maxChars": 30,
"note": "Category label with dot indicator, truncates on overflow"
},
"value": {
"required": true,
"example": "$185K – $265K",
"minChars": 1,
"maxChars": 25,
"note": "Value displayed on bottom right (salary, price, etc.)"
},
"buttons": {
"required": false,
"maxItems": 2,
"note": "Optional buttons in footer section with accent background"
}
},
"itemRules": {
"minItems": 1,
"maxItems": 12,
"recommendedItems": "3-6"
}
},
"propsSchema": {
"metrics": "Array<{ id: string, title: string, subtitle: string, category: string, value: string, buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Metrics section')",
"className?": "string"
},
"usageExample": "<MetricCardTen metrics={[{ id: '1', title: 'Senior Software Engineer, Platform', subtitle: 'San Francisco, CA · Full-time · Remote eligible', category: 'Engineering', value: '$185K – $265K', buttons: [{ text: 'Apply Now', href: '#' }] }, { id: '2', title: 'Product Designer, Enterprise', subtitle: 'New York, NY · Full-time', category: 'Design', value: '$145K – $195K', buttons: [{ text: 'Apply Now', href: '#' }] }, { id: '3', title: 'Data Scientist, ML Platform', subtitle: 'Remote · Full-time', category: 'Data Science', value: '$168K – $238K', buttons: [{ text: 'Apply Now', href: '#' }] }]} title=\"Open Positions\" description=\"Join our team and help shape the future of AI\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" animationType=\"slide-up\" />",
"do": [
"Use for pricing pages",
"Use for subscription tiers",
"Use for statistics displays",
"Use for achievement showcases",
"Requires metrics[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [
"Do not use more than 12 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

85
registry/components/MetricCardThree.json Normal file
View File

@@ -0,0 +1,85 @@
{
"name": "MetricCardThree",
"description": "Metric card with icon badge, title header, and large value display.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Performance Metrics",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Track your key performance indicators",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "KPIs",
"minChars": 2,
"maxChars": 30
}
},
"metricRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"icon": {
"required": true,
"example": "TrendingUp",
"note": "Lucide icon displayed in primary-button styled circular badge"
},
"title": {
"required": true,
"example": "Conversions",
"minChars": 2,
"maxChars": 30,
"note": "Metric category/label displayed next to icon"
},
"value": {
"required": true,
"example": "7,000+",
"minChars": 1,
"maxChars": 15,
"note": "Large metric value displayed below icon and title"
}
}
},
"propsSchema": {
"metrics": "Array<{ id: string, icon: LucideIcon, title: string, value: string }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"uniformGridCustomHeightClasses?": "string",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Metrics section')",
"className?": "string"
},
"usageExample": "<MetricCardThree metrics={[{ id: '1', icon: TrendingUp, title: 'Conversions', value: '7,000+' }, { id: '2', icon: Users, title: 'Active Users', value: '50,000+' }]} title=\"Performance Metrics\" description=\"See how we're making a difference\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for statistics displays",
"Use for achievement showcases",
"Requires metrics[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

79
registry/components/MetricCardTwo.json Normal file
View File

@@ -0,0 +1,79 @@
{
"name": "MetricCardTwo",
"description": "Simple metric card with large value and description text.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Key Metrics",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Performance indicators at a glance",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Stats",
"minChars": 2,
"maxChars": 30
}
},
"metricRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"value": {
"required": true,
"example": "98%",
"minChars": 1,
"maxChars": 15,
"note": "Large metric value displayed prominently"
},
"description": {
"required": true,
"example": "Customer Satisfaction Rate",
"minChars": 5,
"maxChars": 100,
"note": "Metric label/description displayed below value"
}
}
},
"propsSchema": {
"metrics": "Array<{ id: string, value: string, description: string }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' (required)",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"uniformGridCustomHeightClasses?": "string",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Metrics section')",
"className?": "string"
},
"usageExample": "<MetricCardTwo metrics={[{ id: '1', value: '98%', description: 'Customer Satisfaction Rate' }, { id: '2', value: '50K+', description: 'Active Users Worldwide' }]} title=\"Key Metrics\" description=\"See how we're making a difference\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for statistics displays",
"Use for achievement showcases",
"Requires metrics[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

63
registry/components/MetricSplitMediaAbout.json Normal file
View File

@@ -0,0 +1,63 @@
{
"name": "MetricSplitMediaAbout",
"description": "Split-layout about section with text, metrics cards, and media in a 2-column grid.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "We help automate what matters most",
"minChars": 10,
"maxChars": 100
},
"description": {
"required": true,
"example": "Hamilton, a growing e-commerce business, was overwhelmed by repetitive tasks. We built custom automation that integrated with their tools.",
"minChars": 20,
"maxChars": 500
},
"tag": {
"required": false,
"example": "Case study",
"minChars": 2,
"maxChars": 30
}
},
"metricRules": {
"minMetrics": 1,
"maxMetrics": 2,
"structure": {
"value": "string - Large metric value (required, e.g., '50+', '40%', '10x')",
"title": "string - Metric label/title (required, e.g., 'Hours saved every month')"
},
"note": "Provide 1-2 metrics for optimal layout. Grid displays 1 metric as single column, 2 metrics as 2 columns on desktop."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"metrics": "Array<{ value: string, title: string }>",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"tag?": "string",
"tagIcon?": "LucideIcon",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string",
"videoAriaLabel?": "string (default: 'About section video')",
"ariaLabel?": "string (default: 'About section')",
"className?": "string"
},
"usageExample": "// Wrap in ThemeProvider\nimport { Sparkles } from 'lucide-react';\n\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" cardStyle=\"solid\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <MetricSplitMediaAbout\n tag=\"Case study\"\n tagIcon={Sparkles}\n title=\"We help automate what matters most\"\n description=\"Hamilton, a growing e-commerce business, was overwhelmed by repetitive order processing. We built custom automation that integrated seamlessly with their existing tools.\"\n metrics={[{ value: '50+', title: 'Hours saved every month' }, { value: '40%', title: 'Reduction in manual work' }]}\n imageSrc=\"/placeholders/placeholder.jpg\"\n imageAlt=\"Case study image\"\n useInvertedBackground=\"noInvert\"\n />\n</ThemeProvider>",
"do": [
"Use for about pages",
"Use for company information",
"Use for statistics displays",
"Use for achievement showcases",
"Requires metrics[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

69
registry/components/NavbarLayoutFloatingInline.json Normal file
View File

@@ -0,0 +1,69 @@
{
"name": "NavbarLayoutFloatingInline",
"description": "Floating inline navbar with centered links, left-aligned logo, and right-aligned call-to-action button.",
"constraints": {
"minLinks": 3,
"maxLinks": 6,
"preferredCount": 4,
"brandRules": {
"required": false,
"minChars": 2,
"maxChars": 20,
"example": "Webild",
"fallbackBehavior": "Shows brandName text"
},
"buttonRules": {
"text": {
"required": true,
"minChars": 2,
"maxChars": 24,
"example": "Get Started"
},
"href": {
"required": false,
"format": "url | section-id",
"example": "https://webild.io"
},
"onClick": {
"required": false,
"note": "Optional click handler"
}
},
"linkRules": {
"name": {
"required": true,
"minChars": 2,
"maxChars": 15,
"example": "About"
},
"id": {
"required": true,
"format": "section-id | url",
"examples": [
"about",
"services",
"https://github.com",
"www.example.com"
],
"behavior": "Internal IDs scroll to section, URLs open in new tab"
}
}
},
"propsSchema": {
"navItems": "Array<{name: string, id: string}>",
"brandName?": "string (default: 'Webild')",
"button": "{text: string, onClick?: () => void, href?: string}",
"className?": "string (default: '')"
},
"usageExample": "",
"do": [
"Use for general use",
"Requires navItems[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

69
registry/components/NavbarLayoutFloatingOverlay.json Normal file
View File

@@ -0,0 +1,69 @@
{
"name": "NavbarLayoutFloatingOverlay",
"description": "Floating rounded navbar with right‑side CTA and a circular menu button. Clicking the button opens a rounded overlay panel with the site menu.",
"constraints": {
"minLinks": 2,
"maxLinks": 8,
"preferredCount": 5,
"brandRules": {
"required": false,
"minChars": 2,
"maxChars": 20,
"example": "Webild",
"fallbackBehavior": "Shows brandName text"
},
"buttonRules": {
"text": {
"required": true,
"minChars": 2,
"maxChars": 24,
"example": "Get Started"
},
"href": {
"required": false,
"format": "url | section-id",
"example": "https://webild.io"
},
"onClick": {
"required": false,
"note": "Optional click handler"
}
},
"linkRules": {
"name": {
"required": true,
"minChars": 2,
"maxChars": 15,
"example": "About"
},
"id": {
"required": true,
"format": "section-id | url",
"examples": [
"about",
"services",
"https://github.com",
"www.example.com"
],
"behavior": "Internal IDs scroll to section, URLs open in new tab"
}
}
},
"propsSchema": {
"navItems": "Array<{name: string, id: string}>",
"className?": "string",
"brandName?": "string (default: 'Webild')",
"button": "{text: string, onClick?: () => void, href?: string}"
},
"usageExample": "",
"do": [
"Use for general use",
"Requires navItems[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

51
registry/components/NavbarStyleApple.json Normal file
View File

@@ -0,0 +1,51 @@
{
"name": "NavbarStyleApple",
"description": "Minimal Apple-style navigation bar with brand/logo on the left and inline navigation links aligned right.",
"constraints": {
"minLinks": 3,
"maxLinks": 7,
"preferredCount": 5,
"brandRules": {
"required": false,
"minChars": 2,
"maxChars": 20,
"example": "Webild",
"fallbackBehavior": "Shows brandName text"
},
"linkRules": {
"name": {
"required": true,
"minChars": 2,
"maxChars": 15,
"example": "About"
},
"id": {
"required": true,
"format": "section-id | url",
"examples": [
"about",
"services",
"https://github.com",
"www.example.com"
],
"behavior": "Internal IDs scroll to section, URLs open in new tab"
}
}
},
"propsSchema": {
"navItems": "Array<{name: string, id: string}>",
"brandName?": "string (default: 'Webild')"
},
"usageExample": "",
"do": [
"Use for product catalogs",
"Use for e-commerce",
"Requires navItems[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

72
registry/components/NavbarStyleCentered.json Normal file
View File

@@ -0,0 +1,72 @@
{
"name": "NavbarStyleCentered",
"description": "Centered dropdown navigation with animated expand/collapse and staggered link reveals.",
"constraints": {
"minLinks": 3,
"maxLinks": 6,
"preferredCount": 5,
"brandRules": {
"required": false,
"minChars": 2,
"maxChars": 20,
"example": "Webild",
"fallbackBehavior": "Shows brandName text"
},
"buttonRules": {
"text": {
"required": true,
"minChars": 2,
"maxChars": 15,
"example": "Get Started"
},
"href": {
"required": false,
"format": "url | section-id",
"example": "contact"
},
"onClick": {
"required": false,
"note": "Optional click handler"
}
},
"linkRules": {
"name": {
"required": true,
"minChars": 2,
"maxChars": 15,
"example": "About"
},
"id": {
"required": true,
"format": "section-id | url",
"examples": [
"about",
"services",
"https://github.com",
"www.example.com"
],
"behavior": "Internal IDs scroll to section, URLs open in new tab"
}
}
},
"propsSchema": {
"navItems": "Array<{name: string, id: string}>",
"button": "{text: string, onClick?: () => void, href?: string}",
"brandName?": "string (default: 'Webild')",
"className?": "string (default: '')"
},
"usageExample": "<NavbarStyleCentered navItems={[{name: 'Home', id: 'home'}, {name: 'About', id: 'about'}, {name: 'Services', id: 'services'}, {name: 'Blog', id: 'blog'}, {name: 'Contact', id: 'contact'}]} button={{text: 'Get Started', href: 'contact'}} />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Requires navItems[]"
],
"dont": [
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

67
registry/components/NavbarStyleFullscreen.json Normal file
View File

@@ -0,0 +1,67 @@
{
"name": "NavbarStyleFullscreen",
"description": "Fullscreen overlay navigation with animated menu reveal and staggered link animations.",
"constraints": {
"minLinks": 3,
"maxLinks": 5,
"preferredCount": 5,
"brandRules": {
"required": false,
"minChars": 2,
"maxChars": 20,
"example": "Webild",
"fallbackBehavior": "Shows brandName text"
},
"linkRules": {
"name": {
"required": true,
"minChars": 2,
"maxChars": 15,
"example": "About"
},
"id": {
"required": true,
"format": "section-id | url",
"examples": [
"about",
"services",
"https://github.com",
"www.example.com"
],
"behavior": "Internal IDs scroll to section, URLs open in new tab"
}
},
"bottomTextRules": {
"bottomLeftText": {
"required": false,
"minChars": 2,
"maxChars": 30,
"example": "Global Community"
},
"bottomRightText": {
"required": false,
"minChars": 2,
"maxChars": 30,
"example": "hello@example.com"
}
}
},
"propsSchema": {
"navItems": "Array<{name: string, id: string}>",
"brandName?": "string (default: 'Webild')",
"bottomLeftText?": "string (default: 'Global Community')",
"bottomRightText?": "string (default: 'hello@example.com')"
},
"usageExample": "<NavbarStyleFullscreen navItems={[{name: 'Home', id: 'home'}, {name: 'About', id: 'about'}, {name: 'Services', id: 'services'}, {name: 'Blog', id: 'blog'}, {name: 'Contact', id: 'contact'}]} bottomLeftText=\"Global Community\" bottomRightText=\"hello@example.com\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Requires navItems[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

18
registry/components/PlainBackground.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "PlainBackground",
"description": "Simple solid background using theme background color.",
"constraints": {},
"propsSchema": {
"className?": "string"
},
"usageExample": "<PlainBackground />",
"do": [
"Use for general use"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

84
registry/components/PricingCardEight.json Normal file
View File

@@ -0,0 +1,84 @@
{
"name": "PricingCardEight",
"description": "Pricing card with nested card layout featuring badge, price, buttons in secondary-button container, and feature list below.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Choose Your Plan",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Select the perfect plan for your needs",
"minChars": 10,
"maxChars": 200
},
"tag": {
"required": false,
"example": "Pricing",
"minChars": 2,
"maxChars": 30
}
},
"planRules": {
"minPlans": 1,
"maxPlans": 6,
"structure": {
"id": "string - Unique identifier (required)",
"badge": "string - Badge text, e.g., 'Most Popular' (required)",
"badgeIcon": "LucideIcon - Optional icon for badge",
"price": "string - Price display, e.g., '$29/mo' (required)",
"subtitle": "string - Subtitle below price, e.g., 'Perfect for small teams' (required)",
"buttons": "Array<{text: string, onClick?: () => void, href?: string}> - Action buttons, max 2 (required)",
"features": "string[] - List of features included (required)"
},
"note": "Each plan displays in a nested card layout with secondary-button styling for the top section."
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional)",
"onClick": "() => void - Click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
},
"note": "Buttons render full-width inside secondary-button container. Button variant controlled by ThemeProvider."
}
},
"propsSchema": {
"plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Pricing section')",
"className?": "string"
},
"usageExample": "<PricingCardEight plans={[{ id: '1', badge: 'Most Popular', price: '$29/mo', subtitle: 'Perfect for small teams', buttons: [{ text: 'Get Started', href: '/signup' }], features: ['Up to 10 team members', '100GB storage', 'Priority support'] }]} animationType=\"slide-up\" title=\"Choose Your Plan\" description=\"Select the perfect plan for your needs\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for pricing pages",
"Use for subscription tiers",
"Requires plans[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [
"Do not use more than 4 items"
],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

106
registry/components/PricingCardFive.json Normal file
View File

@@ -0,0 +1,106 @@
{
"name": "PricingCardFive",
"description": "Vertical stack pricing cards with split layout showing plan details and feature checklist.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Simple, Transparent Pricing",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Choose the plan that fits your needs",
"minChars": 5,
"maxChars": 300
},
"tag": {
"required": false,
"example": "Pricing",
"minChars": 2,
"maxChars": 30
}
},
"planRules": {
"id": {
"required": true,
"example": "monthly-retainer",
"minChars": 1,
"maxChars": 30
},
"tag": {
"required": true,
"example": "Monthly Retainer Plan",
"minChars": 2,
"maxChars": 40
},
"price": {
"required": true,
"example": "$5,000",
"minChars": 1,
"maxChars": 20
},
"period": {
"required": true,
"example": "/m",
"minChars": 1,
"maxChars": 10
},
"description": {
"required": true,
"example": "Scale design, no-code builds & copy quicker than recruiting in-house.",
"minChars": 10,
"maxChars": 200
},
"button": {
"required": true,
"note": "ButtonConfig with text and href or onClick"
},
"featuresTitle": {
"required": true,
"example": "What's Included:",
"minChars": 2,
"maxChars": 50
},
"features": {
"required": true,
"example": [
"Unlimited design requests",
"48-hour turnaround"
],
"note": "Array of feature strings displayed as checklist"
}
}
},
"propsSchema": {
"plans": "Array<{ id: string, tag: string, tagIcon?: LucideIcon, price: string, period: string, description: string, button: {text: string, onClick?: () => void, href?: string}, featuresTitle: string, features: string[] }>",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"ariaLabel?": "string (default: 'Pricing section')",
"className?": "string"
},
"usageExample": "<PricingCardFive plans={[{ id: 'monthly', tag: 'Monthly Retainer Plan', price: '$5,000', period: '/m', description: 'Scale design quicker than recruiting in-house.', button: { text: 'Schedule a call', href: '#contact' }, featuresTitle: \"What's Included:\", features: ['Unlimited design requests', '48-hour turnaround', 'Dedicated project manager'] }]} animationType=\"slide-up\" title=\"Simple Pricing\" description=\"Choose the plan that fits your needs\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for pricing pages",
"Use for subscription tiers",
"Requires plans[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

99
registry/components/PricingCardNine.json Normal file
View File

@@ -0,0 +1,99 @@
{
"name": "PricingCardNine",
"description": "Pricing cards with image, price tag, title, feature checklist, and CTA button.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Coaching Plans",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Choose the plan that fits your goals",
"minChars": 5,
"maxChars": 300
},
"tag": {
"required": false,
"example": "Pricing",
"minChars": 2,
"maxChars": 30
}
},
"planRules": {
"id": {
"required": true,
"example": "basic",
"minChars": 1,
"maxChars": 30
},
"title": {
"required": true,
"example": "Basic",
"minChars": 2,
"maxChars": 40
},
"price": {
"required": true,
"example": "$59",
"minChars": 1,
"maxChars": 20
},
"period": {
"required": true,
"example": "/month",
"minChars": 1,
"maxChars": 10
},
"imageSrc": {
"required": true,
"example": "/images/coaching-basic.jpg",
"note": "Image for the plan card"
},
"button": {
"required": true,
"note": "ButtonConfig with text and href or onClick"
},
"features": {
"required": true,
"example": [
"Free initial consultation",
"Weekly checking"
],
"note": "Array of feature strings displayed as checklist"
}
}
},
"propsSchema": {
"plans": "Array<{ id: string, title: string, price: string, period: string, features: string[], button: {text: string, onClick?: () => void, href?: string}, imageSrc: string, imageAlt?: string }>",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"ariaLabel?": "string (default: 'Pricing section')",
"className?": "string"
},
"usageExample": "<PricingCardNine plans={[{ id: 'basic', title: 'Basic', price: '$59', period: '/month', imageSrc: '/images/plan-basic.jpg', button: { text: 'Get in touch', href: '#contact' }, features: ['Free initial consultation', '1x per 2 weeks training plan update', 'Weekly checking'] }]} animationType=\"slide-up\" title=\"Coaching Plans\" description=\"Choose the plan that fits your goals\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for pricing pages",
"Use for subscription tiers",
"Requires plans[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

100
registry/components/PricingCardOne.json Normal file
View File

@@ -0,0 +1,100 @@
{
"name": "PricingCardOne",
"description": "Pricing card with badge, price, subtitle, and feature list with checkmarks.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Choose Your Plan",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Select the perfect plan for your needs",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Pricing",
"minChars": 2,
"maxChars": 30
}
},
"pricingPlanRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"badge": {
"required": true,
"example": "Most Popular",
"minChars": 2,
"maxChars": 30,
"note": "Required for visual consistency across all cards"
},
"price": {
"required": true,
"example": "$29/mo",
"minChars": 1,
"maxChars": 20
},
"subtitle": {
"required": true,
"example": "Perfect for small teams",
"minChars": 5,
"maxChars": 100,
"note": "Required for visual consistency across all cards"
},
"features": {
"required": true,
"example": [
"Up to 10 team members",
"100GB storage",
"Priority support"
],
"note": "Array of feature strings, required for visual consistency"
},
"badgeIcon": {
"required": false,
"example": "Sparkles",
"note": "Optional Lucide icon to display next to badge"
}
}
},
"propsSchema": {
"plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, features: string[] }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required - controls GSAP scroll animations with stagger effect)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Pricing section')",
"className?": "string"
},
"usageExample": "<PricingCardOne plans={[{ id: '1', badge: 'Most Popular', price: '$29/mo', subtitle: 'Perfect for small teams', features: ['Up to 10 team members', '100GB storage', 'Priority support'] }]} title=\"Choose Your Plan\" description=\"Find the perfect plan for your needs\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for pricing pages",
"Use for subscription tiers",
"Requires plans[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

111
registry/components/PricingCardThree.json Normal file
View File

@@ -0,0 +1,111 @@
{
"name": "PricingCardThree",
"description": "Pricing card with optional floating badge, price, plan name, two CTA buttons, and feature list.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Choose Your Plan",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Select the perfect plan for your needs",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Pricing",
"minChars": 2,
"maxChars": 30
}
},
"pricingPlanRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"badge": {
"required": false,
"example": "Most popular plan",
"minChars": 2,
"maxChars": 40,
"note": "Optional badge that floats above the card. Can be on ANY plan. Always exists but uses visible/invisible for consistent spacing."
},
"badgeIcon": {
"required": false,
"example": "Sparkles",
"note": "Optional Lucide icon to display next to badge"
},
"price": {
"required": true,
"example": "$29/mo",
"minChars": 1,
"maxChars": 20
},
"name": {
"required": true,
"example": "Business plan",
"minChars": 2,
"maxChars": 50,
"note": "Plan name displayed below price"
},
"buttons": {
"required": true,
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional)",
"onClick": "() => void - Click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
},
"note": "First button (index 0) = primary-button, second (index 1) = secondary-button. Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius. All sections should be wrapped in a single ThemeProvider at the app/page level."
},
"features": {
"required": true,
"example": [
"Up to 10 team members",
"100GB storage",
"Priority support"
],
"note": "Array of feature strings, required for visual consistency"
}
}
},
"propsSchema": {
"plans": "Array<{ id: string, badge?: string, badgeIcon?: LucideIcon, price: string, name: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Pricing section')",
"className?": "string"
},
"usageExample": "<PricingCardThree plans={[{ id: '1', price: '$10/mo', name: 'Basic plan', buttons: [{ text: 'Get started', onClick: () => console.log('clicked') }, { text: 'Chat to sales', onClick: () => console.log('chat') }], features: ['Up to 10 users', '20GB storage', 'Email support'] }, { id: '2', badge: 'Most popular plan', badgeIcon: Sparkles, price: '$20/mo', name: 'Business plan', buttons: [{ text: 'Get started', onClick: () => console.log('clicked') }, { text: 'Chat to sales', onClick: () => console.log('chat') }], features: ['Up to 20 users', '40GB storage', 'Priority support'] }]} title=\"Choose Your Plan\" description=\"Find the perfect plan for your needs\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for pricing pages",
"Use for subscription tiers",
"Requires plans[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

111
registry/components/PricingCardTwo.json Normal file
View File

@@ -0,0 +1,111 @@
{
"name": "PricingCardTwo",
"description": "Pricing card with badge, price, subtitle, two CTA buttons, and feature list with checkmarks.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Choose Your Plan",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Select the perfect plan for your needs",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Pricing",
"minChars": 2,
"maxChars": 30
}
},
"pricingPlanRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"badge": {
"required": true,
"example": "Business Plan",
"minChars": 2,
"maxChars": 30,
"note": "Required for visual consistency across all cards"
},
"price": {
"required": true,
"example": "$29/mo",
"minChars": 1,
"maxChars": 20
},
"subtitle": {
"required": true,
"example": "Perfect for small teams",
"minChars": 5,
"maxChars": 100,
"note": "Required for visual consistency across all cards"
},
"buttons": {
"required": true,
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional)",
"onClick": "() => void - Click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
},
"note": "First button (index 0) = primary-button, second (index 1) = secondary-button. Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius. All sections should be wrapped in a single ThemeProvider at the app/page level."
},
"features": {
"required": true,
"example": [
"Up to 10 team members",
"100GB storage",
"Priority support"
],
"note": "Array of feature strings, required for visual consistency"
},
"badgeIcon": {
"required": false,
"example": "Sparkles",
"note": "Optional Lucide icon to display next to badge"
}
}
},
"propsSchema": {
"plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Pricing section')",
"className?": "string"
},
"usageExample": "<PricingCardTwo plans={[{ id: '1', badge: 'Business Plan', price: '$29/mo', subtitle: 'Perfect for small teams', buttons: [{ text: 'Get Started', onClick: () => console.log('clicked') }, { text: 'Chat to Sales', onClick: () => console.log('chat') }], features: ['Up to 10 team members', '100GB storage', 'Priority support'] }]} title=\"Choose Your Plan\" description=\"Find the perfect plan for your needs\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for feature showcases",
"Use for capability displays",
"Use for pricing pages",
"Use for subscription tiers",
"Requires plans[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

92
registry/components/ProductCardFour.json Normal file
View File

@@ -0,0 +1,92 @@
{
"name": "ProductCardFour",
"description": "E-commerce product card with name, variant description, and price in horizontal layout with favorite toggle.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Featured Products",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Discover our latest collection of premium apparel",
"minChars": 5,
"maxChars": 200
},
"tag": {
"required": false,
"example": "New Arrivals",
"minChars": 2,
"maxChars": 30
}
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional)",
"onClick": "() => void - Click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
},
"note": "Button variant controlled by ThemeProvider's defaultButtonVariant. All sections should be wrapped in a single ThemeProvider at the app/page level."
},
"productCardRules": {
"name": {
"required": true,
"example": "Represent X Puma Graphic T-Shirt",
"minChars": 2,
"maxChars": 100
},
"price": {
"required": true,
"example": "$100",
"note": "Display price with currency symbol"
},
"variant": {
"required": true,
"example": "Dark Grey 3 Colors",
"minChars": 2,
"maxChars": 100,
"note": "Product variant description (color, size options, etc.)"
},
"imageSrc": {
"required": true,
"example": "/product.jpg",
"note": "Product image URL"
}
}
},
"propsSchema": {
"products": "Array<{ id: string, name: string, price: string, variant: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }> - Product items",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'one-large-left-three-stacked-right' (required)",
"uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault' (required)",
"ariaLabel?": "string (default: 'Product section')",
"className?": "string"
},
"usageExample": "<ProductCardFour products={[{ id: '1', name: 'Represent X Puma Graphic T-Shirt', price: '$100', variant: 'Dark Grey 3 Colors', imageSrc: '/product.jpg', imageAlt: 'Product image', isFavorited: false, onFavorite: () => console.log('favorited'), onProductClick: () => window.open('/product', '_blank') }]} title=\"Featured Products\" description=\"Discover our latest collection\" tag=\"New Arrivals\" tagIcon={Package} textboxLayout=\"default\" gridVariant=\"uniform-all-items-equal\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for product catalogs",
"Use for e-commerce",
"Requires products[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

89
registry/components/ProductCardOne.json Normal file
View File

@@ -0,0 +1,89 @@
{
"name": "ProductCardOne",
"description": "Simple product card showing name, price, and arrow icon for viewing details.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Featured Products",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Discover our latest collection of premium products",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "New Arrivals",
"minChars": 2,
"maxChars": 30
}
},
"productCardRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"name": {
"required": true,
"example": "Eclipse Motion Pro",
"minChars": 2,
"maxChars": 50
},
"price": {
"required": true,
"example": "$150",
"minChars": 1,
"maxChars": 20
}
},
"mediaRules": {
"imageSrc": {
"required": true,
"example": "/product.jpg",
"note": "Supports external URLs with unoptimized prop"
},
"imageAlt": {
"required": false,
"example": "Product name",
"note": "Empty string marks image as decorative (aria-hidden)"
}
}
},
"propsSchema": {
"products": "Array<{ id: string, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Product section')",
"className?": "string"
},
"usageExample": "<ProductCardOne products={[{ id: '1', name: 'Eclipse Motion Pro', price: '$150', imageSrc: '/product.jpg', onProductClick: () => window.open('https://example.com', '_blank') }]} title=\"Featured Products\" description=\"Explore our curated collection\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for product catalogs",
"Use for e-commerce",
"Requires products[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

94
registry/components/ProductCardThree.json Normal file
View File

@@ -0,0 +1,94 @@
{
"name": "ProductCardThree",
"description": "E-commerce product card with quantity selector and add-to-cart price button.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Shop Now",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Add your favorite items to cart",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Limited Stock",
"minChars": 2,
"maxChars": 30
}
},
"productCardRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"name": {
"required": true,
"example": "TIMBUK2 Classic Messenger Bag",
"minChars": 2,
"maxChars": 50
},
"price": {
"required": true,
"example": "$119.00",
"minChars": 1,
"maxChars": 20
},
"initialQuantity": {
"required": false,
"example": 1,
"note": "Default quantity value (default: 1)"
}
},
"mediaRules": {
"imageSrc": {
"required": true,
"example": "/product.jpg",
"note": "Supports external URLs with unoptimized prop"
},
"imageAlt": {
"required": false,
"example": "Product name",
"note": "Empty string marks image as decorative (aria-hidden)"
}
}
},
"propsSchema": {
"products": "Array<{ id: string, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, onQuantityChange?: (quantity: number) => void, isFavorited?: boolean, initialQuantity?: number, priceButtonProps?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'one-large-left-three-stacked-right' (required)",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Product section')",
"className?": "string"
},
"usageExample": "<ProductCardThree products={[{ id: '1', name: 'TIMBUK2 Classic Messenger Bag', price: '$119.00', imageSrc: '/product.jpg', onProductClick: () => window.open('https://example.com', '_blank'), onQuantityChange: (qty) => console.log(qty) }]} title=\"Shop Now\" description=\"Explore our curated collection\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for product catalogs",
"Use for e-commerce",
"Requires products[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

106
registry/components/ProductCardTwo.json Normal file
View File

@@ -0,0 +1,106 @@
{
"name": "ProductCardTwo",
"description": "Product card displaying brand name, star rating, and review count for social proof.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Premium Collection",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Curated selection of top-rated products",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Best Sellers",
"minChars": 2,
"maxChars": 30
}
},
"productCardRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"brand": {
"required": true,
"example": "Wofurnitures",
"minChars": 2,
"maxChars": 30
},
"name": {
"required": true,
"example": "Single Accent Chair",
"minChars": 2,
"maxChars": 50
},
"price": {
"required": true,
"example": "$650.00",
"minChars": 1,
"maxChars": 20
},
"rating": {
"required": true,
"example": 4,
"note": "Number from 1-5 representing star rating"
},
"reviewCount": {
"required": true,
"example": "23.9k",
"minChars": 1,
"maxChars": 10
}
},
"mediaRules": {
"imageSrc": {
"required": true,
"example": "/product.jpg",
"note": "Supports external URLs with unoptimized prop"
},
"imageAlt": {
"required": false,
"example": "Product name",
"note": "Empty string marks image as decorative (aria-hidden)"
}
}
},
"propsSchema": {
"products": "Array<{ id: string, brand: string, name: string, price: string, rating: number, reviewCount: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' (required)",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
"title": "string",
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'noInvert' | 'invertDefault'",
"ariaLabel?": "string (default: 'Product section')",
"className?": "string"
},
"usageExample": "<ProductCardTwo products={[{ id: '1', brand: 'Wofurnitures', name: 'Single Accent Chair', price: '$650.00', rating: 4, reviewCount: '23.9k', imageSrc: '/product.jpg', onProductClick: () => window.open('https://example.com', '_blank') }]} title=\"Premium Collection\" description=\"Explore our curated collection\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />",
"do": [
"Use for product catalogs",
"Use for e-commerce",
"Requires products[]",
"Requires titleSegments?[]",
"Requires buttons?[]"
],
"dont": [],
"editRules": {
"textOnly": true,
"layoutLocked": true,
"styleLocked": true
}
}

Some files were not shown because too many files have changed in this diff Show More