{
  "$schema": "https://pro.reactbits.dev/showcase-manifest.schema.json",
  "generatedAt": "2026-08-10T15:51:47.627Z",
  "site": "https://pro.reactbits.dev",
  "note": "Public catalogue of React Bits Pro. Metadata only — no source code or protected content. Generated by scripts/generate-showcase-manifest.ts; do not edit by hand.",
  "assets": {
    "baseUrl": "https://reactbits.dev/rbp",
    "sources": {
      "components": "public/previews/components",
      "library-showcase": "public/library/showcase"
    },
    "format": "webp",
    "note": "Paths are relative to baseUrl. Join with a single slash. Component previews ship in light and dark; treat a null `preview` as 'no capture yet' and fall back to a text card."
  },
  "summary": "134 components · 238 blocks · 300 app UI · 11 templates · 19 agent skills",
  "counts": {
    "components": 134,
    "blocks": 238,
    "blockCategories": 21,
    "appUi": 300,
    "appUiCategories": 38,
    "templates": 11,
    "agentKit": 19,
    "total": 683
  },
  "groups": {
    "components": [
      "Text",
      "Backgrounds",
      "3D & Shaders",
      "Cursor Effects",
      "UI & Cards"
    ],
    "appUi": [
      "AI & Agents",
      "Navigation",
      "Data",
      "Forms",
      "Overlays",
      "Auth & Onboarding",
      "Workflows"
    ]
  },
  "tiers": [
    {
      "id": "starter",
      "name": "Starter",
      "includes": [
        "components"
      ]
    },
    {
      "id": "pro",
      "name": "Pro",
      "includes": [
        "components",
        "blocks",
        "appUi",
        "agentKit",
        "builder"
      ]
    },
    {
      "id": "ultimate",
      "name": "Ultimate",
      "includes": [
        "components",
        "blocks",
        "appUi",
        "agentKit",
        "builder",
        "templates"
      ]
    }
  ],
  "components": [
    {
      "name": "Staggered Text",
      "slug": "staggered-text",
      "description": "Flexible, feature-rich text animation component for staggered reveals",
      "group": "Text",
      "tags": [
        "animation",
        "text"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/staggered-text",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/staggered-text-light.webp",
        "dark": "components/staggered-text-dark.webp"
      }
    },
    {
      "name": "Glitch Text",
      "slug": "glitch-text",
      "description": "Interactive canvas-based text with sticky glitch effect that responds to cursor movement",
      "group": "Text",
      "tags": [
        "animation",
        "text"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/glitch-text",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/glitch-text-light.webp",
        "dark": "components/glitch-text-dark.webp"
      }
    },
    {
      "name": "Smooth Cursor",
      "slug": "smooth-cursor",
      "description": "Canvas-based smooth cursor trail with spring physics",
      "group": "Cursor Effects",
      "tags": [
        "cursor",
        "animation"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/smooth-cursor",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/smooth-cursor-light.webp",
        "dark": "components/smooth-cursor-dark.webp"
      }
    },
    {
      "name": "Text Path",
      "slug": "text-path",
      "description": "Animated text that follows an SVG path with GSAP",
      "group": "Text",
      "tags": [
        "animation",
        "text"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/text-path",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/text-path-light.webp",
        "dark": "components/text-path-dark.webp"
      }
    },
    {
      "name": "3D Text Reveal",
      "slug": "3d-text-reveal",
      "description": "Scroll-triggered 3D text animation with GSAP",
      "group": "Text",
      "tags": [
        "animation",
        "text",
        "3d"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/3d-text-reveal",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/3d-text-reveal-light.webp",
        "dark": "components/3d-text-reveal-dark.webp"
      }
    },
    {
      "name": "Particle Text",
      "slug": "particle-text",
      "description": "Interactive 3D particle text with WebGL",
      "group": "Text",
      "tags": [
        "animation",
        "text",
        "particles"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/particle-text",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/particle-text-light.webp",
        "dark": "components/particle-text-dark.webp"
      }
    },
    {
      "name": "Text Scatter",
      "slug": "text-scatter",
      "description": "Interactive letter scatter effect",
      "group": "Text",
      "tags": [
        "animation",
        "text"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/text-scatter",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/text-scatter-light.webp",
        "dark": "components/text-scatter-dark.webp"
      }
    },
    {
      "name": "3D Letter Swap",
      "slug": "3d-letter-swap",
      "description": "Staggered customizable 3D letter swap animation",
      "group": "Text",
      "tags": [
        "animation",
        "text",
        "3d"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/3d-letter-swap",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/3d-letter-swap-light.webp",
        "dark": "components/3d-letter-swap-dark.webp"
      }
    },
    {
      "name": "Custom Cursor",
      "slug": "custom-cursor",
      "description": "Interactive cursor component with smooth animations and target morphing",
      "group": "Cursor Effects",
      "tags": [
        "cursor",
        "animation"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/custom-cursor",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/custom-cursor-light.webp",
        "dark": "components/custom-cursor-dark.webp"
      }
    },
    {
      "name": "Blur Highlight",
      "slug": "blur-highlight",
      "description": "Animated paragraph with blur-in effect and automatic text highlighting",
      "group": "Text",
      "tags": [
        "animation",
        "effect",
        "text"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/blur-highlight",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/blur-highlight-light.webp",
        "dark": "components/blur-highlight-dark.webp"
      }
    },
    {
      "name": "Globe",
      "slug": "globe",
      "description": "Interactive 3D globe with animated arcs and location markers",
      "group": "3D & Shaders",
      "tags": [
        "3d",
        "visualization"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/globe",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/globe-light.webp",
        "dark": "components/globe-dark.webp"
      }
    },
    {
      "name": "Rotating Cards",
      "slug": "rotating-cards",
      "description": "3D circular carousel with draggable rotating cards",
      "group": "3D & Shaders",
      "tags": [
        "animation",
        "cards",
        "3d"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/rotating-cards",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/rotating-cards-light.webp",
        "dark": "components/rotating-cards-dark.webp"
      }
    },
    {
      "name": "Draggable Grid",
      "slug": "draggable-grid",
      "description": "Pannable grid with smooth drag and momentum",
      "group": "UI & Cards",
      "tags": [
        "interaction",
        "grid",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/draggable-grid",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/draggable-grid-light.webp",
        "dark": "components/draggable-grid-dark.webp"
      }
    },
    {
      "name": "Comparison Slider",
      "slug": "comparison-slider",
      "description": "Before/after image comparison with draggable or hover controls",
      "group": "UI & Cards",
      "tags": [
        "interaction",
        "slider",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/comparison-slider",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/comparison-slider-light.webp",
        "dark": "components/comparison-slider-dark.webp"
      }
    },
    {
      "name": "Shader Reveal",
      "slug": "shader-reveal",
      "description": "Interactive liquid image reveal",
      "group": "3D & Shaders",
      "tags": [
        "animation",
        "shader"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/shader-reveal",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/shader-reveal-light.webp",
        "dark": "components/shader-reveal-dark.webp"
      }
    },
    {
      "name": "Device",
      "slug": "device",
      "description": "Performant CSS device mockup with custom content",
      "group": "UI & Cards",
      "tags": [
        "ui",
        "mockup"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/device",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/device-light.webp",
        "dark": "components/device-dark.webp"
      }
    },
    {
      "name": "Simple Graph",
      "slug": "simple-graph",
      "description": "Animated line graph w/ custom interactions and advanced customization",
      "group": "UI & Cards",
      "tags": [
        "visualization",
        "graph",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/simple-graph",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/simple-graph-light.webp",
        "dark": "components/simple-graph-dark.webp"
      }
    },
    {
      "name": "Credit Card",
      "slug": "credit-card",
      "description": "Interactive 3D credit card with parallax tilt and hover effects",
      "group": "UI & Cards",
      "tags": [
        "ui",
        "card"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/credit-card",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/credit-card-light.webp",
        "dark": "components/credit-card-dark.webp"
      }
    },
    {
      "name": "Circle Gallery",
      "slug": "circle-gallery",
      "description": "Draggable circular carousel with inertia and 3D transforms",
      "group": "UI & Cards",
      "tags": [
        "gallery",
        "animation",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/circle-gallery",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/circle-gallery-light.webp",
        "dark": "components/circle-gallery-dark.webp"
      }
    },
    {
      "name": "AI Blob",
      "slug": "ai-blob",
      "description": "Animated 3D blob with customizable colors and glow effects",
      "group": "3D & Shaders",
      "tags": [
        "animation",
        "effect",
        "3d"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/ai-blob",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/ai-blob-light.webp",
        "dark": "components/ai-blob-dark.webp"
      }
    },
    {
      "name": "Gradient Carousel",
      "slug": "gradient-carousel",
      "description": "3D card carousel with dynamic gradient background extraction",
      "group": "UI & Cards",
      "tags": [
        "carousel",
        "animation",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/gradient-carousel",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/gradient-carousel-light.webp",
        "dark": "components/gradient-carousel-dark.webp"
      }
    },
    {
      "name": "Circles",
      "slug": "circles",
      "description": "Rotating orbital rings with images and customizable animations",
      "group": "UI & Cards",
      "tags": [
        "animation",
        "effect",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/circles",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/circles-light.webp",
        "dark": "components/circles-dark.webp"
      }
    },
    {
      "name": "Shader Card",
      "slug": "shader-card",
      "description": "Card with animated WebGL shader background effect",
      "group": "3D & Shaders",
      "tags": [
        "card",
        "shader"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/shader-card",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/shader-card-light.webp",
        "dark": "components/shader-card-dark.webp"
      }
    },
    {
      "name": "Preloader",
      "slug": "preloader",
      "description": "Animated loading screens with multiple style variants",
      "group": "UI & Cards",
      "tags": [
        "loading",
        "animation",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/preloader",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/preloader-light.webp",
        "dark": "components/preloader-dark.webp"
      }
    },
    {
      "name": "Hover Preview",
      "slug": "hover-preview",
      "description": "Interactive text image previews when hovering over target words.",
      "group": "UI & Cards",
      "tags": [
        "interaction",
        "preview",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/hover-preview",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/hover-preview-light.webp",
        "dark": "components/hover-preview-dark.webp"
      }
    },
    {
      "name": "Modal Cards",
      "slug": "modal-cards",
      "description": "Expandable cards that open into full-screen modals",
      "group": "UI & Cards",
      "tags": [
        "modal",
        "cards"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/modal-cards",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/modal-cards-light.webp",
        "dark": "components/modal-cards-dark.webp"
      }
    },
    {
      "name": "Pixelate Hover",
      "slug": "pixelate-hover",
      "description": "Interactive pixelation effect with cursor-controlled reveal",
      "group": "3D & Shaders",
      "tags": [
        "animation",
        "effect",
        "shader"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/pixelate-hover",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/pixelate-hover-light.webp",
        "dark": "components/pixelate-hover-dark.webp"
      }
    },
    {
      "name": "Animated List",
      "slug": "animated-list",
      "description": "Animated list with animated items",
      "group": "UI & Cards",
      "tags": [
        "animation",
        "list",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/animated-list",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/animated-list-light.webp",
        "dark": "components/animated-list-dark.webp"
      }
    },
    {
      "name": "Neon Reveal",
      "slug": "neon-reveal",
      "description": "Realistic neon bar effect that sweeps across the container",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/neon-reveal",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/neon-reveal-light.webp",
        "dark": "components/neon-reveal-dark.webp"
      }
    },
    {
      "name": "Depth Card",
      "slug": "depth-card",
      "description": "Perspective depth effect that responds to mouse movement",
      "group": "3D & Shaders",
      "tags": [
        "card",
        "3d"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/depth-card",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/depth-card-light.webp",
        "dark": "components/depth-card-dark.webp"
      }
    },
    {
      "name": "Liquid Swap",
      "slug": "liquid-swap",
      "description": "Swap images transition with a stunning liquid glass ball effect",
      "group": "UI & Cards",
      "tags": [
        "animation",
        "transition",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/liquid-swap",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/liquid-swap-light.webp",
        "dark": "components/liquid-swap-dark.webp"
      }
    },
    {
      "name": "Parallax Cards",
      "slug": "parallax-cards",
      "description": "3D layered card display with mouse-driven parallax depth effect",
      "group": "UI & Cards",
      "tags": [
        "animation",
        "cards",
        "parallax",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/parallax-cards",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/parallax-cards-light.webp",
        "dark": "components/parallax-cards-dark.webp"
      }
    },
    {
      "name": "Perspective Grid",
      "slug": "perspective-grid",
      "description": "Infinite scrolling 3D perspective grid with WebGL shader rendering",
      "group": "Backgrounds",
      "tags": [
        "3d",
        "grid",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/perspective-grid",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/perspective-grid-light.webp",
        "dark": "components/perspective-grid-dark.webp"
      }
    },
    {
      "name": "Glitter Warp",
      "slug": "glitter-warp",
      "description": "Starfield warp tunnel with glittering particle effects",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/glitter-warp",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/glitter-warp-light.webp",
        "dark": "components/glitter-warp-dark.webp"
      }
    },
    {
      "name": "Shader Waves",
      "slug": "shader-waves",
      "description": "Animated wave patterns with customizable colors and noise",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "shader",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/shader-waves",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/shader-waves-light.webp",
        "dark": "components/shader-waves-dark.webp"
      }
    },
    {
      "name": "Gradient Blob",
      "slug": "gradient-blob",
      "description": "Morphing 3D blob with gradient colors and cursor interaction",
      "group": "3D & Shaders",
      "tags": [
        "animation",
        "effect",
        "3d"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/gradient-blob",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/gradient-blob-light.webp",
        "dark": "components/gradient-blob-dark.webp"
      }
    },
    {
      "name": "Light Droplets",
      "slug": "light-droplets",
      "description": "Falling light streaks with rotation and glow effects",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/light-droplets",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/light-droplets-light.webp",
        "dark": "components/light-droplets-dark.webp"
      }
    },
    {
      "name": "Lightspeed",
      "slug": "lightspeed",
      "description": "Hyperspace light streak effect with click interaction",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/lightspeed",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/lightspeed-light.webp",
        "dark": "components/lightspeed-dark.webp"
      }
    },
    {
      "name": "Dither Wave",
      "slug": "dither-wave",
      "description": "Animated wave effect with retro dithering pattern",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/dither-wave",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/dither-wave-light.webp",
        "dark": "components/dither-wave-dark.webp"
      }
    },
    {
      "name": "Radial Liquid",
      "slug": "radial-liquid",
      "description": "Radial shader waves with distortion and various effects",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/radial-liquid",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/radial-liquid-light.webp",
        "dark": "components/radial-liquid-dark.webp"
      }
    },
    {
      "name": "Chroma Waves",
      "slug": "chroma-waves",
      "description": "Animated wave shader effect with noise distortion",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/chroma-waves",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/chroma-waves-light.webp",
        "dark": "components/chroma-waves-dark.webp"
      }
    },
    {
      "name": "Mosaic",
      "slug": "mosaic",
      "description": "Mosaic effect with animated wave or video background",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/mosaic",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/mosaic-light.webp",
        "dark": "components/mosaic-dark.webp"
      }
    },
    {
      "name": "Vortex",
      "slug": "vortex",
      "description": "Infinitely spinning 3D tunnel with particles and depth effect",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "3d",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/vortex",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/vortex-light.webp",
        "dark": "components/vortex-dark.webp"
      }
    },
    {
      "name": "Portal",
      "slug": "portal",
      "description": "Circular portal shader with customizable particle effects",
      "group": "3D & Shaders",
      "tags": [
        "animation",
        "effect",
        "shader"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/portal",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/portal-light.webp",
        "dark": "components/portal-dark.webp"
      }
    },
    {
      "name": "Rising Lines",
      "slug": "rising-lines",
      "description": "Ascending lines and particles with laser beam effect",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "shader",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/rising-lines",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/rising-lines-light.webp",
        "dark": "components/rising-lines-dark.webp"
      }
    },
    {
      "name": "Color Loops",
      "slug": "color-loops",
      "description": "Animated colorful loops with orbital motion",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/color-loops",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/color-loops-light.webp",
        "dark": "components/color-loops-dark.webp"
      }
    },
    {
      "name": "Rotating Stars",
      "slug": "rotating-stars",
      "description": "Spinning star particles with orbital animation",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "particles",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/rotating-stars",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/rotating-stars-light.webp",
        "dark": "components/rotating-stars-dark.webp"
      }
    },
    {
      "name": "Dither Cursor",
      "slug": "dither-cursor",
      "description": "Cursor with dithering pixelated trail effect",
      "group": "Cursor Effects",
      "tags": [
        "cursor",
        "effect"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/dither-cursor",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/dither-cursor-light.webp",
        "dark": "components/dither-cursor-dark.webp"
      }
    },
    {
      "name": "Ascii Cursor",
      "slug": "ascii-cursor",
      "description": "Cursor that leaves ASCII character trail",
      "group": "Cursor Effects",
      "tags": [
        "cursor",
        "ascii"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/ascii-cursor",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/ascii-cursor-light.webp",
        "dark": "components/ascii-cursor-dark.webp"
      }
    },
    {
      "name": "Ascii Waves",
      "slug": "ascii-waves",
      "description": "Wave effect made of ASCII characters",
      "group": "Backgrounds",
      "tags": [
        "background",
        "animation",
        "ascii"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/ascii-waves",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/ascii-waves-light.webp",
        "dark": "components/ascii-waves-dark.webp"
      }
    },
    {
      "name": "Synaptic Shift",
      "slug": "synaptic-shift",
      "description": "Neural network-like connection animations",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "particles",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/synaptic-shift",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/synaptic-shift-light.webp",
        "dark": "components/synaptic-shift-dark.webp"
      }
    },
    {
      "name": "Dot Shift",
      "slug": "dot-shift",
      "description": "Shifting grid of animated dots",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "grid",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/dot-shift",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/dot-shift-light.webp",
        "dark": "components/dot-shift-dark.webp"
      }
    },
    {
      "name": "Star Burst",
      "slug": "star-burst",
      "description": "Star burst explosion effect with particles",
      "group": "3D & Shaders",
      "tags": [
        "animation",
        "particles"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/star-burst",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/star-burst-light.webp",
        "dark": "components/star-burst-dark.webp"
      }
    },
    {
      "name": "Silk Waves",
      "slug": "silk-waves",
      "description": "Smooth flowing silk-like wave animation",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/silk-waves",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/silk-waves-light.webp",
        "dark": "components/silk-waves-dark.webp"
      }
    },
    {
      "name": "Falling Rays",
      "slug": "falling-rays",
      "description": "Rays falling from top like rain of light",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "particles",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/falling-rays",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/falling-rays-light.webp",
        "dark": "components/falling-rays-dark.webp"
      }
    },
    {
      "name": "Liquid Bars",
      "slug": "liquid-bars",
      "description": "Animated liquid bar effect with smooth wave motion",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/liquid-bars",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/liquid-bars-light.webp",
        "dark": "components/liquid-bars-dark.webp"
      }
    },
    {
      "name": "Aurora Blur",
      "slug": "aurora-blur",
      "description": "Ethereal aurora borealis blur effect",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/aurora-blur",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/aurora-blur-light.webp",
        "dark": "components/aurora-blur-dark.webp"
      }
    },
    {
      "name": "Chroma Card",
      "slug": "chroma-card",
      "description": "Card with chromatic color shifting effect",
      "group": "UI & Cards",
      "tags": [
        "card",
        "effect"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/chroma-card",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/chroma-card-light.webp",
        "dark": "components/chroma-card-dark.webp"
      }
    },
    {
      "name": "Liquid Lines",
      "slug": "liquid-lines",
      "description": "Flowing liquid line animation effect",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/liquid-lines",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/liquid-lines-light.webp",
        "dark": "components/liquid-lines-dark.webp"
      }
    },
    {
      "name": "Squircle Shift",
      "slug": "squircle-shift",
      "description": "Morphing squircle shape animation",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "shape",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/squircle-shift",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/squircle-shift-light.webp",
        "dark": "components/squircle-shift-dark.webp"
      }
    },
    {
      "name": "Grain Wave",
      "slug": "grain-wave",
      "description": "Grainy wave texture animation effect",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "texture",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/grain-wave",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/grain-wave-light.webp",
        "dark": "components/grain-wave-dark.webp"
      }
    },
    {
      "name": "Glass Flow",
      "slug": "glass-flow",
      "description": "Flowing glass-like blur animation",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/glass-flow",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/glass-flow-light.webp",
        "dark": "components/glass-flow-dark.webp"
      }
    },
    {
      "name": "Shadow Bars",
      "slug": "shadow-bars",
      "description": "Animated shadow bar effect with depth",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/shadow-bars",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/shadow-bars-light.webp",
        "dark": "components/shadow-bars-dark.webp"
      }
    },
    {
      "name": "Warp Twister",
      "slug": "warp-twister",
      "description": "Twisting warp distortion effect",
      "group": "Backgrounds",
      "tags": [
        "animation",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/warp-twister",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/warp-twister-light.webp",
        "dark": "components/warp-twister-dark.webp"
      }
    },
    {
      "name": "Center Flow",
      "slug": "center-flow",
      "description": "Radial flowing animation from center",
      "group": "UI & Cards",
      "tags": [
        "animation",
        "effect",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/center-flow",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/center-flow-light.webp",
        "dark": "components/center-flow-dark.webp"
      }
    },
    {
      "name": "Glass Cursor",
      "slug": "glass-cursor",
      "description": "Glass-like cursor trail with refraction and blur",
      "group": "Cursor Effects",
      "tags": [
        "cursor",
        "effect",
        "3d"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/glass-cursor",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/glass-cursor-light.webp",
        "dark": "components/glass-cursor-dark.webp"
      }
    },
    {
      "name": "Agentic Ball",
      "slug": "agentic-ball",
      "description": "Animated 3D orb with swirl and glow effects",
      "group": "3D & Shaders",
      "tags": [
        "3d",
        "shader",
        "effect"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/agentic-ball",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/agentic-ball-light.webp",
        "dark": "components/agentic-ball-dark.webp"
      }
    },
    {
      "name": "Black Hole",
      "slug": "black-hole",
      "description": "Gravitational particle effect with color cycling",
      "group": "Backgrounds",
      "tags": [
        "3d",
        "shader",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/black-hole",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/black-hole-light.webp",
        "dark": "components/black-hole-dark.webp"
      }
    },
    {
      "name": "Blurred Rays",
      "slug": "blurred-rays",
      "description": "Flickering vertical light beams with bloom",
      "group": "Backgrounds",
      "tags": [
        "3d",
        "shader",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/blurred-rays",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/blurred-rays-light.webp",
        "dark": "components/blurred-rays-dark.webp"
      }
    },
    {
      "name": "Click Stack",
      "slug": "click-stack",
      "description": "Click-to-cycle animated card stack",
      "group": "UI & Cards",
      "tags": [
        "animation",
        "interaction",
        "cards",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/click-stack",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/click-stack-light.webp",
        "dark": "components/click-stack-dark.webp"
      }
    },
    {
      "name": "Flame Paths",
      "slug": "flame-paths",
      "description": "Animated flame-like wave effect",
      "group": "Backgrounds",
      "tags": [
        "3d",
        "shader",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/flame-paths",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/flame-paths-light.webp",
        "dark": "components/flame-paths-dark.webp"
      }
    },
    {
      "name": "Frame Border",
      "slug": "frame-border",
      "description": "Animated noise-textured border effect",
      "group": "3D & Shaders",
      "tags": [
        "3d",
        "shader",
        "effect"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/frame-border",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/frame-border-light.webp",
        "dark": "components/frame-border-dark.webp"
      }
    },
    {
      "name": "Gradient Bars",
      "slug": "gradient-bars",
      "description": "Animated striped gradient bars",
      "group": "Backgrounds",
      "tags": [
        "3d",
        "shader",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/gradient-bars",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/gradient-bars-light.webp",
        "dark": "components/gradient-bars-dark.webp"
      }
    },
    {
      "name": "Halftone Vortex",
      "slug": "halftone-vortex",
      "description": "Cursor-reactive halftone dot vortex",
      "group": "Cursor Effects",
      "tags": [
        "3d",
        "shader",
        "cursor"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/halftone-vortex",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/halftone-vortex-light.webp",
        "dark": "components/halftone-vortex-dark.webp"
      }
    },
    {
      "name": "Halftone Wave",
      "slug": "halftone-wave",
      "description": "Animated halftone dot grid with noise",
      "group": "Backgrounds",
      "tags": [
        "3d",
        "shader",
        "effect",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/halftone-wave",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/halftone-wave-light.webp",
        "dark": "components/halftone-wave-dark.webp"
      }
    },
    {
      "name": "Infinite Gallery",
      "slug": "infinite-gallery",
      "description": "3D infinite scrolling image gallery with drag and parallax",
      "group": "3D & Shaders",
      "tags": [
        "3d",
        "gallery",
        "interactive"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/infinite-gallery",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/infinite-gallery-light.webp",
        "dark": "components/infinite-gallery-dark.webp"
      }
    },
    {
      "name": "Liquid Ascii",
      "slug": "liquid-ascii",
      "description": "Fluid simulation rendered as ASCII characters",
      "group": "Cursor Effects",
      "tags": [
        "ascii",
        "simulation",
        "cursor"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/liquid-ascii",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/liquid-ascii-light.webp",
        "dark": "components/liquid-ascii-dark.webp"
      }
    },
    {
      "name": "Metallic Swirl",
      "slug": "metallic-swirl",
      "description": "Metallic swirl shader background",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "3d",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/metallic-swirl",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/metallic-swirl-light.webp",
        "dark": "components/metallic-swirl-dark.webp"
      }
    },
    {
      "name": "Retro Lines",
      "slug": "retro-lines",
      "description": "Retro perspective grid with scrolling waves",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "3d",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/retro-lines",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/retro-lines-light.webp",
        "dark": "components/retro-lines-dark.webp"
      }
    },
    {
      "name": "Rubber Fluid",
      "slug": "rubber-fluid",
      "description": "Rubbery fluid distortion shader",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "3d",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/rubber-fluid",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/rubber-fluid-light.webp",
        "dark": "components/rubber-fluid-dark.webp"
      }
    },
    {
      "name": "Simple Swirl",
      "slug": "simple-swirl",
      "description": "Rotating concentric swirl with glow",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "3d",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/simple-swirl",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/simple-swirl-light.webp",
        "dark": "components/simple-swirl-dark.webp"
      }
    },
    {
      "name": "Square Matrix",
      "slug": "square-matrix",
      "description": "Animated dot grid with wave presets",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "3d",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/square-matrix",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/square-matrix-light.webp",
        "dark": "components/square-matrix-dark.webp"
      }
    },
    {
      "name": "Star Swipe",
      "slug": "star-swipe",
      "description": "Conformal star warp shader with sweeping motion",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "3d",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/star-swipe",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/star-swipe-light.webp",
        "dark": "components/star-swipe-dark.webp"
      }
    },
    {
      "name": "Swirl Blend",
      "slug": "swirl-blend",
      "description": "Colorful iterative swirl shader with palette controls",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "3d",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/swirl-blend",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/swirl-blend-light.webp",
        "dark": "components/swirl-blend-dark.webp"
      }
    },
    {
      "name": "Text Cube",
      "slug": "text-cube",
      "description": "Cursor-following 3D text cube with depth fade",
      "group": "Cursor Effects",
      "tags": [
        "canvas",
        "cursor",
        "3d"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/text-cube",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/text-cube-light.webp",
        "dark": "components/text-cube-dark.webp"
      }
    },
    {
      "name": "Warped Card",
      "slug": "warped-card",
      "description": "Image card with mouse-following bulge distortion shader",
      "group": "3D & Shaders",
      "tags": [
        "shader",
        "3d",
        "card",
        "hover"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/warped-card",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/warped-card-light.webp",
        "dark": "components/warped-card-dark.webp"
      }
    },
    {
      "name": "Watercolor",
      "slug": "watercolor",
      "description": "Animated watercolor noise shader with two-color blend",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "3d",
        "background"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/watercolor",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/watercolor-light.webp",
        "dark": "components/watercolor-dark.webp"
      }
    },
    {
      "name": "Fog Sphere",
      "slug": "fog-sphere",
      "description": "A soft, swirling sphere of fog",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "3d",
        "background",
        "effect"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/fog-sphere",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/fog-sphere-light.webp",
        "dark": "components/fog-sphere-dark.webp"
      }
    },
    {
      "name": "ASCII Tiles",
      "slug": "ascii-tiles",
      "description": "A field of glassy tiles made of glowing ASCII characters",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "3d",
        "background",
        "ascii",
        "effect"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/ascii-tiles",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/ascii-tiles-light.webp",
        "dark": "components/ascii-tiles-dark.webp"
      }
    },
    {
      "name": "Cursor Wave",
      "slug": "cursor-wave",
      "description": "A grid of shapes that reacts to your cursor and clicks",
      "group": "Cursor Effects",
      "tags": [
        "interactive",
        "cursor",
        "background",
        "canvas",
        "effect"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/cursor-wave",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/cursor-wave-light.webp",
        "dark": "components/cursor-wave-dark.webp"
      }
    },
    {
      "name": "Twilight Lines",
      "slug": "twilight-lines",
      "description": "Soft glowing lines that pulse with a warm sweep",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "background",
        "lines",
        "glow",
        "webgl"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/twilight-lines",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/twilight-lines-light.webp",
        "dark": "components/twilight-lines-dark.webp"
      }
    },
    {
      "name": "Chroma Blinds",
      "slug": "chroma-blinds",
      "description": "Colorful diagonal stripes that bend toward your cursor",
      "group": "Cursor Effects",
      "tags": [
        "shader",
        "background",
        "stripes",
        "color",
        "cursor",
        "webgl"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/chroma-blinds",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/chroma-blinds-light.webp",
        "dark": "components/chroma-blinds-dark.webp"
      }
    },
    {
      "name": "Pixel Reveal",
      "slug": "pixel-reveal",
      "description": "An image that reveals itself through a sweep of pixels",
      "group": "3D & Shaders",
      "tags": [
        "shader",
        "image",
        "reveal",
        "pixels",
        "scroll",
        "webgl"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/pixel-reveal",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/pixel-reveal-light.webp",
        "dark": "components/pixel-reveal-dark.webp"
      }
    },
    {
      "name": "Parallax Carousel",
      "slug": "parallax-carousel",
      "description": "A draggable image carousel with a smooth parallax feel",
      "group": "3D & Shaders",
      "tags": [
        "shader",
        "carousel",
        "gallery",
        "parallax",
        "drag",
        "webgl"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/parallax-carousel",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/parallax-carousel-light.webp",
        "dark": "components/parallax-carousel-dark.webp"
      }
    },
    {
      "name": "Glass Tiles",
      "slug": "glass-tiles",
      "description": "A shimmering background of colorful glass tiles",
      "group": "Backgrounds",
      "tags": [
        "shader",
        "background",
        "caustics",
        "glass",
        "color",
        "webgl"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/glass-tiles",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/glass-tiles-light.webp",
        "dark": "components/glass-tiles-dark.webp"
      }
    },
    {
      "name": "Parallax Pills",
      "slug": "parallax-pills",
      "description": "Bouncy labeled pills that drift along with your cursor",
      "group": "Cursor Effects",
      "tags": [
        "pills",
        "parallax",
        "spring",
        "bounce",
        "interactive",
        "motion",
        "cursor"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/parallax-pills",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/parallax-pills-light.webp",
        "dark": "components/parallax-pills-dark.webp"
      }
    },
    {
      "name": "Blinking Squares",
      "slug": "blinking-squares",
      "description": "A grid of little squares that quietly twinkle",
      "group": "Backgrounds",
      "tags": [
        "grid",
        "squares",
        "shader",
        "twinkle",
        "background",
        "webgl"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/blinking-squares",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/blinking-squares-light.webp",
        "dark": "components/blinking-squares-dark.webp"
      }
    },
    {
      "name": "User Cursor",
      "slug": "user-cursor",
      "description": "A custom cursor with a little name tag that follows along",
      "group": "Cursor Effects",
      "tags": [
        "cursor",
        "pointer",
        "spring",
        "interactive",
        "motion",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/user-cursor",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/user-cursor-light.webp",
        "dark": "components/user-cursor-dark.webp"
      }
    },
    {
      "name": "Magic Transform",
      "slug": "magic-transform",
      "description": "Documents fly in and come out as colorful results",
      "group": "UI & Cards",
      "tags": [
        "ai",
        "pipeline",
        "data",
        "transform",
        "marketing",
        "motion",
        "ui"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/magic-transform",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/magic-transform-light.webp",
        "dark": "components/magic-transform-dark.webp"
      }
    },
    {
      "name": "Circle Stack",
      "slug": "circle-stack",
      "description": "A tilted stack of circles that cycles through your images",
      "group": "3D & Shaders",
      "tags": [
        "carousel",
        "stack",
        "3d",
        "motion",
        "rotating",
        "showcase"
      ],
      "tier": "starter",
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/components/circle-stack",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/circle-stack-light.webp",
        "dark": "components/circle-stack-dark.webp"
      }
    },
    {
      "name": "Particle Image",
      "slug": "particle-image",
      "description": "An image dissolved into GPU particles that swirl apart and reassemble",
      "group": "3D & Shaders",
      "tags": [
        "image",
        "particles",
        "webgl",
        "gpgpu",
        "hover",
        "gallery"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/particle-image",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/particle-image-light.webp",
        "dark": "components/particle-image-dark.webp"
      }
    },
    {
      "name": "Skewed Carousel",
      "slug": "skewed-carousel",
      "description": "A skewed marquee of cards that tilts and scales as it scrolls",
      "group": "UI & Cards",
      "tags": [
        "carousel",
        "marquee",
        "skew",
        "scroll",
        "gallery",
        "showcase"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/skewed-carousel",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/skewed-carousel-light.webp",
        "dark": "components/skewed-carousel-dark.webp"
      }
    },
    {
      "name": "Tumble Carousel",
      "slug": "tumble-carousel",
      "description": "Cards that tumble end over end as the carousel advances",
      "group": "3D & Shaders",
      "tags": [
        "carousel",
        "3d",
        "rotate",
        "gallery",
        "showcase",
        "motion"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/tumble-carousel",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/tumble-carousel-light.webp",
        "dark": "components/tumble-carousel-dark.webp"
      }
    },
    {
      "name": "Tilted Tiles",
      "slug": "tilted-tiles",
      "description": "A tilted grid of image columns that drift as you scroll",
      "group": "UI & Cards",
      "tags": [
        "grid",
        "gallery",
        "tilt",
        "scroll",
        "images",
        "showcase"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/tilted-tiles",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/tilted-tiles-light.webp",
        "dark": "components/tilted-tiles-dark.webp"
      }
    },
    {
      "name": "Squares Terminal",
      "slug": "squares-terminal",
      "description": "A terminal-style grid of squares that flicker on and off",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "grid",
        "terminal",
        "retro",
        "webgl"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/squares-terminal",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/squares-terminal-light.webp",
        "dark": "components/squares-terminal-dark.webp"
      }
    },
    {
      "name": "Neural Float",
      "slug": "neural-float",
      "description": "Soft neural filaments drifting weightlessly across the canvas",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "webgl",
        "organic",
        "abstract",
        "ambient"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/neural-float",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/neural-float-light.webp",
        "dark": "components/neural-float-dark.webp"
      }
    },
    {
      "name": "Wireframe Ball",
      "slug": "wireframe-ball",
      "description": "A rotating wireframe polyhedron raymarched in a shader",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "webgl",
        "3d",
        "wireframe",
        "geometric"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/wireframe-ball",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/wireframe-ball-light.webp",
        "dark": "components/wireframe-ball-dark.webp"
      }
    },
    {
      "name": "Blinking Dots",
      "slug": "blinking-dots",
      "description": "A crisp field of dots blinking in and out on a fixed grid",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "dots",
        "grid",
        "webgl",
        "minimal"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/blinking-dots",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/blinking-dots-light.webp",
        "dark": "components/blinking-dots-dark.webp"
      }
    },
    {
      "name": "Specter Orb",
      "slug": "specter-orb",
      "description": "A ghostly raymarched orb wrapped in drifting smoke",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "webgl",
        "orb",
        "raymarching",
        "abstract"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/specter-orb",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/specter-orb-light.webp",
        "dark": "components/specter-orb-dark.webp"
      }
    },
    {
      "name": "Speeding Text",
      "slug": "speeding-text",
      "description": "Text that stretches and smears as it races past the viewport",
      "group": "Text",
      "tags": [
        "text",
        "marquee",
        "speed",
        "motion",
        "blur",
        "kinetic"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/speeding-text",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/speeding-text-light.webp",
        "dark": "components/speeding-text-dark.webp"
      }
    },
    {
      "name": "Pixel Rain",
      "slug": "pixel-rain",
      "description": "Pixelated streaks falling in a quiet digital rain",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "rain",
        "pixel",
        "webgl",
        "ambient"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/pixel-rain",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/pixel-rain-light.webp",
        "dark": "components/pixel-rain-dark.webp"
      }
    },
    {
      "name": "Mosaic Waves",
      "slug": "mosaic-waves",
      "description": "Waves rolling through a mosaic of shifting tiles",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "mosaic",
        "waves",
        "webgl",
        "tiles"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/mosaic-waves",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/mosaic-waves-light.webp",
        "dark": "components/mosaic-waves-dark.webp"
      }
    },
    {
      "name": "Pixel Magnet",
      "slug": "pixel-magnet",
      "description": "A cursor trail that magnetises the pixels it passes through",
      "group": "Cursor Effects",
      "tags": [
        "cursor",
        "pixel",
        "interactive",
        "shader",
        "webgl",
        "trail"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/pixel-magnet",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/pixel-magnet-light.webp",
        "dark": "components/pixel-magnet-dark.webp"
      }
    },
    {
      "name": "Rolling Blinds",
      "slug": "rolling-blinds",
      "description": "Bands of light that roll open and closed like window blinds",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "blinds",
        "stripes",
        "webgl",
        "motion"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/rolling-blinds",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/rolling-blinds-light.webp",
        "dark": "components/rolling-blinds-dark.webp"
      }
    },
    {
      "name": "Neural Tunnel",
      "slug": "neural-tunnel",
      "description": "An endless tunnel of pulsing neural strands",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "tunnel",
        "webgl",
        "3d",
        "abstract"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/neural-tunnel",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/neural-tunnel-light.webp",
        "dark": "components/neural-tunnel-dark.webp"
      }
    },
    {
      "name": "Glowing Wave",
      "slug": "glowing-wave",
      "description": "A single luminous wave sweeping slowly across the screen",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "glow",
        "wave",
        "webgl",
        "ambient"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/glowing-wave",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/glowing-wave-light.webp",
        "dark": "components/glowing-wave-dark.webp"
      }
    },
    {
      "name": "Minimal Ripple",
      "slug": "minimal-ripple",
      "description": "Quiet concentric ripples spreading outward from a still point",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "ripple",
        "minimal",
        "webgl",
        "ambient"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/minimal-ripple",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/minimal-ripple-light.webp",
        "dark": "components/minimal-ripple-dark.webp"
      }
    },
    {
      "name": "Glue Dots",
      "slug": "glue-dots",
      "description": "Metaball dots that stick together and stretch apart as they meet",
      "group": "Backgrounds",
      "tags": [
        "background",
        "metaball",
        "dots",
        "canvas",
        "organic",
        "interactive"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/glue-dots",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/glue-dots-light.webp",
        "dark": "components/glue-dots-dark.webp"
      }
    },
    {
      "name": "Card Spread",
      "slug": "card-spread",
      "description": "A fanned deck of cards that spreads open on hover",
      "group": "UI & Cards",
      "tags": [
        "cards",
        "hover",
        "fan",
        "stack",
        "gallery",
        "motion"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/card-spread",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/card-spread-light.webp",
        "dark": "components/card-spread-dark.webp"
      }
    },
    {
      "name": "Page Flip",
      "slug": "page-flip",
      "description": "A book-style page flip you can drag through",
      "group": "3D & Shaders",
      "tags": [
        "book",
        "flip",
        "3d",
        "drag",
        "pages",
        "interactive"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/page-flip",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/page-flip-light.webp",
        "dark": "components/page-flip-dark.webp"
      }
    },
    {
      "name": "Bending Marquee",
      "slug": "bending-marquee",
      "description": "A marquee that bends along a curve as it scrolls",
      "group": "Text",
      "tags": [
        "marquee",
        "curve",
        "scroll",
        "text",
        "motion",
        "kinetic"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/bending-marquee",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/bending-marquee-light.webp",
        "dark": "components/bending-marquee-dark.webp"
      }
    },
    {
      "name": "Aura Blob",
      "slug": "aura-blob",
      "description": "A soft glowing blob surrounded by a slowly shifting aura",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "blob",
        "glow",
        "webgl",
        "ambient"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/aura-blob",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/aura-blob-light.webp",
        "dark": "components/aura-blob-dark.webp"
      }
    },
    {
      "name": "Aurora Beam",
      "slug": "aurora-beam",
      "description": "A sweeping aurora beam built from layered sheets of light",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "aurora",
        "glow",
        "webgl",
        "ambient"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/aurora-beam",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/aurora-beam-light.webp",
        "dark": "components/aurora-beam-dark.webp"
      }
    },
    {
      "name": "Thinking Dots",
      "slug": "thinking-dots",
      "description": "A dot matrix breathing around a drifting cloud of density",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "dots",
        "grid",
        "webgl",
        "ai"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/thinking-dots",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/thinking-dots-light.webp",
        "dark": "components/thinking-dots-dark.webp"
      }
    },
    {
      "name": "Rising Particles",
      "slug": "rising-particles",
      "description": "Particles glowing softly as they rise and drift upward",
      "group": "Backgrounds",
      "tags": [
        "background",
        "particles",
        "shader",
        "webgl",
        "ambient",
        "glow"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/rising-particles",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/rising-particles-light.webp",
        "dark": "components/rising-particles-dark.webp"
      }
    },
    {
      "name": "Landscape",
      "slug": "landscape",
      "description": "A procedurally generated landscape scrolling toward the horizon",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "landscape",
        "terrain",
        "webgl",
        "3d"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/landscape",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/landscape-light.webp",
        "dark": "components/landscape-dark.webp"
      }
    },
    {
      "name": "Tech Wall",
      "slug": "tech-wall",
      "description": "A wall of technical panels lighting up in sequence",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "grid",
        "tech",
        "webgl",
        "cyber"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/tech-wall",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/tech-wall-light.webp",
        "dark": "components/tech-wall-dark.webp"
      }
    },
    {
      "name": "Spectral Clouds",
      "slug": "spectral-clouds",
      "description": "Volumetric clouds tinted with drifting spectral light",
      "group": "Backgrounds",
      "tags": [
        "background",
        "shader",
        "clouds",
        "volumetric",
        "webgl",
        "ambient"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/spectral-clouds",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/spectral-clouds-light.webp",
        "dark": "components/spectral-clouds-dark.webp"
      }
    },
    {
      "name": "Reel Gallery",
      "slug": "reel-gallery",
      "description": "Tilted reels of images that glide as you scroll",
      "group": "UI & Cards",
      "tags": [
        "gallery",
        "images",
        "scroll",
        "marquee",
        "showcase",
        "interactive"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/reel-gallery",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/reel-gallery-light.webp",
        "dark": "components/reel-gallery-dark.webp"
      }
    },
    {
      "name": "Grid Rise",
      "slug": "grid-rise",
      "description": "A raymarched tile field that lifts and ripples under the cursor",
      "group": "Cursor Effects",
      "tags": [
        "background",
        "shader",
        "grid",
        "cursor",
        "webgl",
        "interactive"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/grid-rise",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/grid-rise-light.webp",
        "dark": "components/grid-rise-dark.webp"
      }
    },
    {
      "name": "Lenticular Carousel",
      "slug": "lenticular-carousel",
      "description": "A gallery whose cards turn over like a lenticular print",
      "group": "3D & Shaders",
      "tags": [
        "carousel",
        "gallery",
        "images",
        "hover",
        "webgl",
        "interactive"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/lenticular-carousel",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/lenticular-carousel-light.webp",
        "dark": "components/lenticular-carousel-dark.webp"
      }
    },
    {
      "name": "Scroll Stack",
      "slug": "scroll-stack",
      "description": "Pinned cards that stack, turn and dissolve as the page scrolls",
      "group": "UI & Cards",
      "tags": [
        "scroll",
        "cards",
        "stack",
        "sticky",
        "storytelling",
        "interactive"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/scroll-stack",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/scroll-stack-light.webp",
        "dark": "components/scroll-stack-dark.webp"
      }
    },
    {
      "name": "Frame Scrub",
      "slug": "frame-scrub",
      "description": "Scroll drives a frame sequence through a canvas playhead",
      "group": "UI & Cards",
      "tags": [
        "scroll",
        "canvas",
        "sequence",
        "sticky",
        "cinematic",
        "interactive"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/frame-scrub",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/frame-scrub-light.webp",
        "dark": "components/frame-scrub-dark.webp"
      }
    },
    {
      "name": "Scroll Mask",
      "slug": "scroll-mask",
      "description": "Scroll opens a mask that reveals an image six ways",
      "group": "UI & Cards",
      "tags": [
        "scroll",
        "mask",
        "reveal",
        "sticky",
        "cinematic",
        "image"
      ],
      "tier": "starter",
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/components/scroll-mask",
      "variants": [
        "tw",
        "css"
      ],
      "preview": {
        "light": "components/scroll-mask-light.webp",
        "dark": "components/scroll-mask-dark.webp"
      }
    }
  ],
  "blocks": [
    {
      "name": "Hero Section",
      "slug": "hero-section",
      "description": "Hero sections with various layouts and styles",
      "category": null,
      "tags": [
        "hero",
        "landing"
      ],
      "tier": "pro",
      "count": 24,
      "newCount": 7,
      "href": "https://pro.reactbits.dev/docs/blocks/hero-section",
      "variants": [
        {
          "name": "Hero 1",
          "slug": "hero-1",
          "description": "Clean two-column hero with CTA and social proof",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-1",
          "registryName": "hero-1"
        },
        {
          "name": "Hero 2",
          "slug": "hero-2",
          "description": "Curved bento grid hero, with cursor following effect",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-2",
          "registryName": "hero-2"
        },
        {
          "name": "Hero 3",
          "slug": "hero-3",
          "description": "Rounded WebGL gradient shader with cursor interaction",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-3",
          "registryName": "hero-3"
        },
        {
          "name": "Hero 4",
          "slug": "hero-4",
          "description": "Infinite scrolling video carousel marquee",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-4",
          "registryName": "hero-4"
        },
        {
          "name": "Hero 5",
          "slug": "hero-5",
          "description": "Gradient background with floating orbs and cursor parallax",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-5",
          "registryName": "hero-5"
        },
        {
          "name": "Hero 6",
          "slug": "hero-6",
          "description": "Auto-rotating carousel with vertical progress line and slide transitions",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-6",
          "registryName": "hero-6"
        },
        {
          "name": "Hero 7",
          "slug": "hero-7",
          "description": "3D rotating image carousel with pink glow bar and particles",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-7",
          "registryName": "hero-7"
        },
        {
          "name": "Hero 8",
          "slug": "hero-8",
          "description": "Large typography with expandable media tiles between text",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-8",
          "registryName": "hero-8"
        },
        {
          "name": "Hero 9",
          "slug": "hero-9",
          "description": "Full-screen video background with blur text reveal animation",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-9",
          "registryName": "hero-9"
        },
        {
          "name": "Hero 10",
          "slug": "hero-10",
          "description": "Centered text with three stacked card elements",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-10",
          "registryName": "hero-10"
        },
        {
          "name": "Hero 11",
          "slug": "hero-11",
          "description": "Minimal design with wireframe corners",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-11",
          "registryName": "hero-11"
        },
        {
          "name": "Hero 12",
          "slug": "hero-12",
          "description": "Background image with curved shape text overlays",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-12",
          "registryName": "hero-12"
        },
        {
          "name": "Hero 13",
          "slug": "hero-13",
          "description": "Clean hero with glow separator and floating icons",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-13",
          "registryName": "hero-13"
        },
        {
          "name": "Hero 14",
          "slug": "hero-14",
          "description": "Left-aligned content with inline email capture pill and image placeholder",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-14",
          "registryName": "hero-14"
        },
        {
          "name": "Hero 15",
          "slug": "hero-15",
          "description": "Centered serif italic headline with announcement pill, uppercase CTA, and chat-style input bar",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-15",
          "registryName": "hero-15"
        },
        {
          "name": "Hero 16",
          "slug": "hero-16",
          "description": "Full-bleed background image hero with logo, large headline, subtitle, and split CTA button",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-16",
          "registryName": "hero-16"
        },
        {
          "name": "Hero 17",
          "slug": "hero-17",
          "description": "Two-column e-commerce hero with promo pill, bold headline, body copy, and stacked product image grid",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-17",
          "registryName": "hero-17"
        },
        {
          "name": "Hero 18",
          "slug": "hero-18",
          "description": "Centered command-palette hero with keyboard key chips, scoped results, and a reduced-motion-gated shimmer.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-18",
          "registryName": "hero-18"
        },
        {
          "name": "Hero 19",
          "slug": "hero-19",
          "description": "Split billing hero with serif editorial headline, staggered invoice panel, and spring-damped parallax cards.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-19",
          "registryName": "hero-19"
        },
        {
          "name": "Hero 20",
          "slug": "hero-20",
          "description": "Centered statement hero with neutral wordmark logo row and an editorial bordered metric strip.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-20",
          "registryName": "hero-20"
        },
        {
          "name": "Hero 21",
          "slug": "hero-21",
          "description": "Theme-aware GLSL aurora hero with luminous orb mark and ambient action labels in light and dark.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-21",
          "registryName": "hero-21"
        },
        {
          "name": "Hero 22",
          "slug": "hero-22",
          "description": "Centered launch hero over a theme-aware MeshGradient shader with grained color flow and a blurred headline reveal.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-22",
          "registryName": "hero-22"
        },
        {
          "name": "Hero 23",
          "slug": "hero-23",
          "description": "Centered product hero with a framed Water shader showcase panel, live-render chip, and GPU-accelerated caption.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-23",
          "registryName": "hero-23"
        },
        {
          "name": "Hero 24",
          "slug": "hero-24",
          "description": "Left-aligned inference hero over a theme-aware NeuroNoise filament field with logo row and pinging status chip.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/hero-section/hero-24",
          "registryName": "hero-24"
        }
      ]
    },
    {
      "name": "Features",
      "slug": "features",
      "description": "Feature sections with various layouts and presentations",
      "category": null,
      "tags": [
        "features",
        "landing"
      ],
      "tier": "pro",
      "count": 13,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/features",
      "variants": [
        {
          "name": "Features 1",
          "slug": "features-1",
          "description": "8-item grid with bordered icons and descriptions",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-1",
          "registryName": "features-1"
        },
        {
          "name": "Features 2",
          "slug": "features-2",
          "description": "Two-column layout with auto-cycling carousel and animated glass overlay cards",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-2",
          "registryName": "features-2"
        },
        {
          "name": "Features 3",
          "slug": "features-3",
          "description": "Grid with opposite-scrolling vertical marquees and gradient fades",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-3",
          "registryName": "features-3"
        },
        {
          "name": "Features 4",
          "slug": "features-4",
          "description": "Auto-cycling tabbed interface with smooth transitions and feature lists",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-4",
          "registryName": "features-4"
        },
        {
          "name": "Features 5",
          "slug": "features-5",
          "description": "6-card grid with icons, CTAs, and dashed fade background",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-5",
          "registryName": "features-5"
        },
        {
          "name": "Features 6",
          "slug": "features-6",
          "description": "Four feature cards with colored gradient blobs and hover arrow accents",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-6",
          "registryName": "features-6"
        },
        {
          "name": "Features 7",
          "slug": "features-7",
          "description": "Alternating feature rows with phone mockup, rewards card, and social feed",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-7",
          "registryName": "features-7"
        },
        {
          "name": "Features 8",
          "slug": "features-8",
          "description": "Three-column centered icons with serif titles and minimalist copy",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-8",
          "registryName": "features-8"
        },
        {
          "name": "Features 9",
          "slug": "features-9",
          "description": "Persona-based tabs with animated SVG illustrations and 2-column content",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-9",
          "registryName": "features-9"
        },
        {
          "name": "Features 10",
          "slug": "features-10",
          "description": "Split integration map with orbital rings, labeled floating service nodes, and a pulsing central hub.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-10",
          "registryName": "features-10"
        },
        {
          "name": "Features 11",
          "slug": "features-11",
          "description": "Editorial split headline with three indexed, anchored workflow cards.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-11",
          "registryName": "features-11"
        },
        {
          "name": "Features 12",
          "slug": "features-12",
          "description": "Tonal neutral feature trio with anchored benefit statements and an inverted focal card.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-12",
          "registryName": "features-12"
        },
        {
          "name": "Features 13",
          "slug": "features-13",
          "description": "Interactive accordion feature list with an animated abstract preview panel.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/features/features-13",
          "registryName": "features-13"
        }
      ]
    },
    {
      "name": "Social Proof",
      "slug": "social-proof",
      "description": "Social proof sections with testimonials, reviews, and trust indicators",
      "category": null,
      "tags": [
        "social-proof",
        "testimonials",
        "landing"
      ],
      "tier": "pro",
      "count": 16,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/social-proof",
      "variants": [
        {
          "name": "Social Proof 1",
          "slug": "social-proof-1",
          "description": "Simple logo grid with bordered cells and hover effects",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-1",
          "registryName": "social-proof-1"
        },
        {
          "name": "Social Proof 2",
          "slug": "social-proof-2",
          "description": "Customer showcase with dual opposite-scrolling marquees and gradient fades",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-2",
          "registryName": "social-proof-2"
        },
        {
          "name": "Social Proof 3",
          "slug": "social-proof-3",
          "description": "Bento-style testimonial grid with backdrop blur cards and gradient background",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-3",
          "registryName": "social-proof-3"
        },
        {
          "name": "Social Proof 4",
          "slug": "social-proof-4",
          "description": "Wall of love with 3-column scrolling marquee and glass-bordered testimonial cards",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-4",
          "registryName": "social-proof-4"
        },
        {
          "name": "Social Proof 5",
          "slug": "social-proof-5",
          "description": "Auto-cycling testimonials with avatar carousel and circular progress indicators",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-5",
          "registryName": "social-proof-5"
        },
        {
          "name": "Social Proof 6",
          "slug": "social-proof-6",
          "description": "Vertical logo carousel with glass overlay and gradient",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-6",
          "registryName": "social-proof-6"
        },
        {
          "name": "Social Proof 7",
          "slug": "social-proof-7",
          "description": "Full-width video player with description and logo marquee",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-7",
          "registryName": "social-proof-7"
        },
        {
          "name": "Social Proof 8",
          "slug": "social-proof-8",
          "description": "Testimonial slider with progress indicators and floating button",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-8",
          "registryName": "social-proof-8"
        },
        {
          "name": "Social Proof 9",
          "slug": "social-proof-9",
          "description": "Minimal dual opposite-scrolling marquees with gradient fades",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-9",
          "registryName": "social-proof-9"
        },
        {
          "name": "Social Proof 10",
          "slug": "social-proof-10",
          "description": "Case study grid with brand logos, category tags, and arrow CTAs",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-10",
          "registryName": "social-proof-10"
        },
        {
          "name": "Social Proof 11",
          "slug": "social-proof-11",
          "description": "Tweet-style testimonial carousel with member avatars and prev/next controls",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-11",
          "registryName": "social-proof-11"
        },
        {
          "name": "Social Proof 12",
          "slug": "social-proof-12",
          "description": "Video story cards with play button overlays and member quotes",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-12",
          "registryName": "social-proof-12"
        },
        {
          "name": "Social Proof 13",
          "slug": "social-proof-13",
          "description": "Global coverage panel with tilted flag market chips over a masked dot field",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-13",
          "registryName": "social-proof-13"
        },
        {
          "name": "Social Proof 14",
          "slug": "social-proof-14",
          "description": "Editorial wall of love with sticky intro rail and balanced masonry columns",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-14",
          "registryName": "social-proof-14"
        },
        {
          "name": "Social Proof 15",
          "slug": "social-proof-15",
          "description": "Spotlight customer story with author rail, timed progress, and crossfade rotation",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-15",
          "registryName": "social-proof-15"
        },
        {
          "name": "Social Proof 16",
          "slug": "social-proof-16",
          "description": "Dark featured pull-quote panel beside a verified social post grid",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/social-proof/social-proof-16",
          "registryName": "social-proof-16"
        }
      ]
    },
    {
      "name": "Contact",
      "slug": "contact",
      "description": "Contact sections with forms and various layouts",
      "category": null,
      "tags": [
        "contact",
        "form"
      ],
      "tier": "pro",
      "count": 12,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/contact",
      "variants": [
        {
          "name": "Contact 1",
          "slug": "contact-1",
          "description": "Three-card grid layout with pill badges and call-to-action links",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-1",
          "registryName": "contact-1"
        },
        {
          "name": "Contact 2",
          "slug": "contact-2",
          "description": "Two-column layout with company info and full contact form with input fields",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-2",
          "registryName": "contact-2"
        },
        {
          "name": "Contact 3",
          "slug": "contact-3",
          "description": "Simple centered layout with three square icon cards for contact methods",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-3",
          "registryName": "contact-3"
        },
        {
          "name": "Contact 4",
          "slug": "contact-4",
          "description": "Large image with glass card overlay and structured contact information",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-4",
          "registryName": "contact-4"
        },
        {
          "name": "Contact 5",
          "slug": "contact-5",
          "description": "Two-column layout with detailed contact info and auto-playing image carousel",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-5",
          "registryName": "contact-5"
        },
        {
          "name": "Contact 6",
          "slug": "contact-6",
          "description": "Centered contact card with circular logo badge, heading, and dark CTA",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-6",
          "registryName": "contact-6"
        },
        {
          "name": "Contact 7",
          "slug": "contact-7",
          "description": "Narrow centered contact form with serif italic headline and stacked inputs",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-7",
          "registryName": "contact-7"
        },
        {
          "name": "Contact 8",
          "slug": "contact-8",
          "description": "Split layout with serif headline, checklist, reviewer avatars, and dark pill-input form",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-8",
          "registryName": "contact-8"
        },
        {
          "name": "Contact 9",
          "slug": "contact-9",
          "description": "Location-first contact section with studio details and a photo carousel panel.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-9",
          "registryName": "contact-9"
        },
        {
          "name": "Contact 10",
          "slug": "contact-10",
          "description": "Dark enterprise sales form with consultation benefits and dense fields.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-10",
          "registryName": "contact-10"
        },
        {
          "name": "Contact 11",
          "slug": "contact-11",
          "description": "Team-routing contact layout with personal desks and an enquiry form.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-11",
          "registryName": "contact-11"
        },
        {
          "name": "Contact 12",
          "slug": "contact-12",
          "description": "Support pathway hub with six animated contact option cards.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/contact/contact-12",
          "registryName": "contact-12"
        }
      ]
    },
    {
      "name": "Footer",
      "slug": "footer",
      "description": "Footer sections with links, branding, and information",
      "category": null,
      "tags": [
        "footer",
        "navigation"
      ],
      "tier": "pro",
      "count": 12,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/footer",
      "variants": [
        {
          "name": "Footer 1",
          "slug": "footer-1",
          "description": "Four-column layout with branding, outlined link cards, and large background text",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-1",
          "registryName": "footer-1"
        },
        {
          "name": "Footer 2",
          "slug": "footer-2",
          "description": "Centered footer with curved SVG overlays, social icons, and image background",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-2",
          "registryName": "footer-2"
        },
        {
          "name": "Footer 3",
          "slug": "footer-3",
          "description": "Full-width CTA button with yellow hover, description, two-column links, and copyright",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-3",
          "registryName": "footer-3"
        },
        {
          "name": "Footer 4",
          "slug": "footer-4",
          "description": "Bold headline, newsletter signup with email input, four-column links, and large logo",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-4",
          "registryName": "footer-4"
        },
        {
          "name": "Footer 5",
          "slug": "footer-5",
          "description": "Card footer with staggered fade background",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-5",
          "registryName": "footer-5"
        },
        {
          "name": "Footer 6",
          "slug": "footer-6",
          "description": "Two row footer with categories and large links",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-6",
          "registryName": "footer-6"
        },
        {
          "name": "Footer 7",
          "slug": "footer-7",
          "description": "Minimal footer with circular logo badge, link columns, and pill newsletter form",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-7",
          "registryName": "footer-7"
        },
        {
          "name": "Footer 8",
          "slug": "footer-8",
          "description": "Minimal centered footer with social icon row and link columns",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-8",
          "registryName": "footer-8"
        },
        {
          "name": "Footer 9",
          "slug": "footer-9",
          "description": "Maximal sitemap footer with capsule column labels, newsletter card, dark social strip, and an edge-to-edge brand wordmark.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-9",
          "registryName": "footer-9"
        },
        {
          "name": "Footer 10",
          "slug": "footer-10",
          "description": "Editorial statement footer with faint grid texture, lifecycle nav row, compliance line, and a glass-panel promo card.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-10",
          "registryName": "footer-10"
        },
        {
          "name": "Footer 11",
          "slug": "footer-11",
          "description": "Airy five-column sitemap footer with product icon links, brand bar, social row, and fine-print disclaimer.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-11",
          "registryName": "footer-11"
        },
        {
          "name": "Footer 12",
          "slug": "footer-12",
          "description": "Newsletter console footer with a dark dispatch panel, live status vitals, nav columns, and a slim legal bar.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/footer/footer-12",
          "registryName": "footer-12"
        }
      ]
    },
    {
      "name": "Comparison",
      "slug": "comparison",
      "description": "Comparison sections showcasing features, pricing, or alternatives",
      "category": null,
      "tags": [
        "comparison",
        "features",
        "pricing"
      ],
      "tier": "pro",
      "count": 8,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/comparison",
      "variants": [
        {
          "name": "Comparison 1",
          "slug": "comparison-1",
          "description": "Two-column layout with brand logos, checkmark feature comparison, and CTA button",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/comparison/comparison-1",
          "registryName": "comparison-1"
        },
        {
          "name": "Comparison 2",
          "slug": "comparison-2",
          "description": "Pricing comparison table with plan toggle, colored border highlight, and feature rows",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/comparison/comparison-2",
          "registryName": "comparison-2"
        },
        {
          "name": "Comparison 3",
          "slug": "comparison-3",
          "description": "Visual bar chart comparison with animated rising bars, logo circles, and G2 scores",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/comparison/comparison-3",
          "registryName": "comparison-3"
        },
        {
          "name": "Comparison 4",
          "slug": "comparison-4",
          "description": "Two-column us-vs-them comparison with bold feature rows and check/X indicators",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/comparison/comparison-4",
          "registryName": "comparison-4"
        },
        {
          "name": "Comparison 5",
          "slug": "comparison-5",
          "description": "A cost-at-scale comparison table where savings deepen through an emerald heat ramp at each growth stage, with stacked cards on mobile.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/comparison/comparison-5",
          "registryName": "comparison-5"
        },
        {
          "name": "Comparison 6",
          "slug": "comparison-6",
          "description": "An editorial two-column panel trading the usual stack for the product line by line, with ban/check chips and a footer link.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/comparison/comparison-6",
          "registryName": "comparison-6"
        },
        {
          "name": "Comparison 7",
          "slug": "comparison-7",
          "description": "A genuinely draggable before-and-after wipe with keyboard slider support that swaps a scattered launch flow for one command surface.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/comparison/comparison-7",
          "registryName": "comparison-7"
        },
        {
          "name": "Comparison 8",
          "slug": "comparison-8",
          "description": "A grouped capability matrix with tri-state status chips, a tinted featured column, and a sticky label rail on horizontal scroll.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/comparison/comparison-8",
          "registryName": "comparison-8"
        }
      ]
    },
    {
      "name": "Navigation",
      "slug": "navigation",
      "description": "Navigation components with various styles and layouts",
      "category": null,
      "tags": [
        "navigation",
        "menu",
        "header"
      ],
      "tier": "pro",
      "count": 15,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/navigation",
      "variants": [
        {
          "name": "Navigation 1",
          "slug": "navigation-1",
          "description": "Classic top nav with dropdown menus and mobile overlay",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-1",
          "registryName": "navigation-1"
        },
        {
          "name": "Navigation 2",
          "slug": "navigation-2",
          "description": "Centered rounded nav with glass effect and expanding card dropdowns",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-2",
          "registryName": "navigation-2"
        },
        {
          "name": "Navigation 3",
          "slug": "navigation-3",
          "description": "Logo left, grouped center links, auth buttons right with mobile menu",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-3",
          "registryName": "navigation-3"
        },
        {
          "name": "Navigation 4",
          "slug": "navigation-4",
          "description": "Vertical side nav with dock-style hover scaling and tooltips",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-4",
          "registryName": "navigation-4"
        },
        {
          "name": "Navigation 5",
          "slug": "navigation-5",
          "description": "Fixed bottom nav that expands upward with full menu and social links",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-5",
          "registryName": "navigation-5"
        },
        {
          "name": "Navigation 6",
          "slug": "navigation-6",
          "description": "Responsive top nav with full screen menu and image preview",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-6",
          "registryName": "navigation-6"
        },
        {
          "name": "Navigation 7",
          "slug": "navigation-7",
          "description": "Top nav with rounded items and dropdown menus",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-7",
          "registryName": "navigation-7"
        },
        {
          "name": "Navigation 8",
          "slug": "navigation-8",
          "description": "Bottom nav with blurred background and image previews",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-8",
          "registryName": "navigation-8"
        },
        {
          "name": "Navigation 9",
          "slug": "navigation-9",
          "description": "Dark pill nav with announcement tab peeking above",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-9",
          "registryName": "navigation-9"
        },
        {
          "name": "Navigation 10",
          "slug": "navigation-10",
          "description": "Light nav with status pill and slide-in dark mobile menu panel",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-10",
          "registryName": "navigation-10"
        },
        {
          "name": "Navigation 11",
          "slug": "navigation-11",
          "description": "Dark top nav with expanded white mega-menu grid below",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-11",
          "registryName": "navigation-11"
        },
        {
          "name": "Navigation 12",
          "slug": "navigation-12",
          "description": "Floating glass pill navbar with a layout-animated active indicator and an expanding mobile menu.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-12",
          "registryName": "navigation-12"
        },
        {
          "name": "Navigation 13",
          "slug": "navigation-13",
          "description": "Editorial split navbar with a centered wordmark, text roll-up link hovers, and a full-screen curtain menu.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-13",
          "registryName": "navigation-13"
        },
        {
          "name": "Navigation 14",
          "slug": "navigation-14",
          "description": "Full-width mega panel navbar with crossfading sections, a featured spotlight card, and an accordion mobile menu.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-14",
          "registryName": "navigation-14"
        },
        {
          "name": "Navigation 15",
          "slug": "navigation-15",
          "description": "Quiet hairline navbar with a traveling underline indicator and a slide-in mobile drawer.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/navigation/navigation-15",
          "registryName": "navigation-15"
        }
      ]
    },
    {
      "name": "Auth",
      "slug": "auth",
      "description": "Authentication and sign-in components",
      "category": null,
      "tags": [
        "auth",
        "login",
        "signup",
        "authentication"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 3,
      "href": "https://pro.reactbits.dev/docs/blocks/auth",
      "variants": [
        {
          "name": "Auth 1",
          "slug": "auth-1",
          "description": "Split layout with sign-in form and animated testimonial marquee",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/auth/auth-1",
          "registryName": "auth-1"
        },
        {
          "name": "Auth 2",
          "slug": "auth-2",
          "description": "Split layout with gradient background, OAuth buttons, and sign-in form",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/auth/auth-2",
          "registryName": "auth-2"
        },
        {
          "name": "Auth 3",
          "slug": "auth-3",
          "description": "Centered card with OAuth options and floating brand section over background image",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/auth/auth-3",
          "registryName": "auth-3"
        },
        {
          "name": "Auth 4",
          "slug": "auth-4",
          "description": "Framed split-panel sign-in with OAuth, password toggle, and an orbital trust-ring showcase with customer quote.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/auth/auth-4",
          "registryName": "auth-4"
        },
        {
          "name": "Auth 5",
          "slug": "auth-5",
          "description": "Centered magic-link card that swaps to a check-your-inbox state with resend cooldown and OAuth fallback.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/auth/auth-5",
          "registryName": "auth-5"
        },
        {
          "name": "Auth 6",
          "slug": "auth-6",
          "description": "Minimal six-digit verification screen with grouped auto-advancing OTP inputs and resend countdown.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/auth/auth-6",
          "registryName": "auth-6"
        }
      ]
    },
    {
      "name": "Call To Action",
      "slug": "cta",
      "description": "Call to action sections to drive user engagement",
      "category": null,
      "tags": [
        "cta",
        "conversion",
        "action",
        "button"
      ],
      "tier": "pro",
      "count": 14,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/cta",
      "variants": [
        {
          "name": "CTA 1",
          "slug": "cta-1",
          "description": "Centered sign-up form with cursor-parallax floating background cards",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-1",
          "registryName": "cta-1"
        },
        {
          "name": "CTA 2",
          "slug": "cta-2",
          "description": "Full-screen centered CTA with GSAP-powered cursor trail image effect",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-2",
          "registryName": "cta-2"
        },
        {
          "name": "CTA 3",
          "slug": "cta-3",
          "description": "DevOps deployment CTA with animated rotating SVG circles and 3D card layout",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-3",
          "registryName": "cta-3"
        },
        {
          "name": "CTA 4",
          "slug": "cta-4",
          "description": "Centered CTA with infinitely scrolling cards",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-4",
          "registryName": "cta-4"
        },
        {
          "name": "CTA 5",
          "slug": "cta-5",
          "description": "Rounded video mask with CTA content below",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-5",
          "registryName": "cta-5"
        },
        {
          "name": "CTA 6",
          "slug": "cta-6",
          "description": "Integrations headline inside a mosaic grid of logo tiles with a monochrome CTA",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-6",
          "registryName": "cta-6"
        },
        {
          "name": "CTA 7",
          "slug": "cta-7",
          "description": "Centered download CTA with serif headline, press awards row, and phone mockup",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-7",
          "registryName": "cta-7"
        },
        {
          "name": "CTA 8",
          "slug": "cta-8",
          "description": "Cursor-reveal outlined wordmark with start CTA pill and corner tick marks",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-8",
          "registryName": "cta-8"
        },
        {
          "name": "CTA 9",
          "slug": "cta-9",
          "description": "Centered migration CTA with tilted video and document accents on either side",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-9",
          "registryName": "cta-9"
        },
        {
          "name": "CTA 10",
          "slug": "cta-10",
          "description": "Floating join-the-movement card with side image, email input, and close button",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-10",
          "registryName": "cta-10"
        },
        {
          "name": "CTA 11",
          "slug": "cta-11",
          "description": "Oversized neutral product-preview banner with layered reveal motion",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-11",
          "registryName": "cta-11"
        },
        {
          "name": "CTA 12",
          "slug": "cta-12",
          "description": "Centered launch CTA with blueprint grid, corner marks, and terminal glyph fields",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-12",
          "registryName": "cta-12"
        },
        {
          "name": "CTA 13",
          "slug": "cta-13",
          "description": "Editorial serif CTA panel with halftone print texture and a single decisive action",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-13",
          "registryName": "cta-13"
        },
        {
          "name": "CTA 14",
          "slug": "cta-14",
          "description": "Dark split CTA with animated marquee tags and stacked preview card",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/cta/cta-14",
          "registryName": "cta-14"
        }
      ]
    },
    {
      "name": "FAQ",
      "slug": "faq",
      "description": "Frequently asked questions sections with accordion layouts",
      "category": null,
      "tags": [
        "faq",
        "questions",
        "accordion",
        "help"
      ],
      "tier": "pro",
      "count": 9,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/faq",
      "variants": [
        {
          "name": "FAQ 1",
          "slug": "faq-1",
          "description": "Classic two-column FAQ with sticky title and animated accordion",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/faq/faq-1",
          "registryName": "faq-1"
        },
        {
          "name": "FAQ 2",
          "slug": "faq-2",
          "description": "Message-style FAQ with chat bubbles",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/faq/faq-2",
          "registryName": "faq-2"
        },
        {
          "name": "FAQ 3",
          "slug": "faq-3",
          "description": "Multi-category tabbed FAQ with animated accordions",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/faq/faq-3",
          "registryName": "faq-3"
        },
        {
          "name": "FAQ 4",
          "slug": "faq-4",
          "description": "Centered stacked FAQ list with plus/minus toggles and minimalist styling",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/faq/faq-4",
          "registryName": "faq-4"
        },
        {
          "name": "FAQ 5",
          "slug": "faq-5",
          "description": "Two-column FAQ with inline CTA links and bordered accordions",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/faq/faq-5",
          "registryName": "faq-5"
        },
        {
          "name": "FAQ 6",
          "slug": "faq-6",
          "description": "Two-column FAQ with sticky intro, numbered accordion, and contact channels.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/faq/faq-6",
          "registryName": "faq-6"
        },
        {
          "name": "FAQ 7",
          "slug": "faq-7",
          "description": "Help-center FAQ with vertical category rail and animated tab indicator.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/faq/faq-7",
          "registryName": "faq-7"
        },
        {
          "name": "FAQ 8",
          "slug": "faq-8",
          "description": "Searchable FAQ with topic filters, instant results, and empty state.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/faq/faq-8",
          "registryName": "faq-8"
        },
        {
          "name": "FAQ 9",
          "slug": "faq-9",
          "description": "FAQ grid with a dark sticky contact panel and response stats.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/faq/faq-9",
          "registryName": "faq-9"
        }
      ]
    },
    {
      "name": "Pricing",
      "slug": "pricing",
      "description": "Pricing tables and plans with various layouts and styles",
      "category": null,
      "tags": [
        "pricing",
        "plans",
        "subscription",
        "payment"
      ],
      "tier": "pro",
      "count": 15,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/pricing",
      "variants": [
        {
          "name": "Pricing 1",
          "slug": "pricing-1",
          "description": "Three-tier pricing with yearly/monthly toggle, free trial card, and feature highlights",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-1",
          "registryName": "pricing-1"
        },
        {
          "name": "Pricing 2",
          "slug": "pricing-2",
          "description": "Bento-style layout with Free card, dual-plan toggle, and animated price transitions",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-2",
          "registryName": "pricing-2"
        },
        {
          "name": "Pricing 3",
          "slug": "pricing-3",
          "description": "Minimal three-card layout with bold typography and simple feature lists",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-3",
          "registryName": "pricing-3"
        },
        {
          "name": "Pricing 4",
          "slug": "pricing-4",
          "description": "Two-section hero with large headline and detailed feature comparison cards",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-4",
          "registryName": "pricing-4"
        },
        {
          "name": "Pricing 5",
          "slug": "pricing-5",
          "description": "United cards with glowing button",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-5",
          "registryName": "pricing-5"
        },
        {
          "name": "Pricing 6",
          "slug": "pricing-6",
          "description": "Three card layout with highlighted middle card",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-6",
          "registryName": "pricing-6"
        },
        {
          "name": "Pricing 7",
          "slug": "pricing-7",
          "description": "Comparison table with Annually/Monthly toggle, popular plan badge, and expandable feature rows",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-7",
          "registryName": "pricing-7"
        },
        {
          "name": "Pricing 8",
          "slug": "pricing-8",
          "description": "Four-column compare-plans table with expandable section rows and tier CTAs",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-8",
          "registryName": "pricing-8"
        },
        {
          "name": "Pricing 9",
          "slug": "pricing-9",
          "description": "Centered single-plan pricing with annual/monthly cards and free trial CTA",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-9",
          "registryName": "pricing-9"
        },
        {
          "name": "Pricing 10",
          "slug": "pricing-10",
          "description": "Two-card pricing with usage slider, billing toggles, and tier comparison",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-10",
          "registryName": "pricing-10"
        },
        {
          "name": "Pricing 11",
          "slug": "pricing-11",
          "description": "Two-card split layout with centered phone mockup bridging light and dark panels",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-11",
          "registryName": "pricing-11"
        },
        {
          "name": "Pricing 12",
          "slug": "pricing-12",
          "description": "Single-plan membership spotlight with an animated billing toggle and a dark inset panel.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-12",
          "registryName": "pricing-12"
        },
        {
          "name": "Pricing 13",
          "slug": "pricing-13",
          "description": "Interactive plan picker with an animated selection highlight and live detail panel.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-13",
          "registryName": "pricing-13"
        },
        {
          "name": "Pricing 14",
          "slug": "pricing-14",
          "description": "Modular plan builder with add-on toggles and an animated itemized monthly summary.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-14",
          "registryName": "pricing-14"
        },
        {
          "name": "Pricing 15",
          "slug": "pricing-15",
          "description": "Quiet comparison table with a featured tier, billing switch, and mobile plan tabs.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/pricing/pricing-15",
          "registryName": "pricing-15"
        }
      ]
    },
    {
      "name": "Stats",
      "slug": "stats",
      "description": "Statistics and metrics sections with various layouts and styles",
      "category": null,
      "tags": [
        "stats",
        "metrics",
        "numbers",
        "data",
        "analytics"
      ],
      "tier": "pro",
      "count": 15,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/stats",
      "variants": [
        {
          "name": "Stats 1",
          "slug": "stats-1",
          "description": "Two-column layout with stacked bar chart",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-1",
          "registryName": "stats-1"
        },
        {
          "name": "Stats 2",
          "slug": "stats-2",
          "description": "Full-width stats card with circular comparison charts",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-2",
          "registryName": "stats-2"
        },
        {
          "name": "Stats 3",
          "slug": "stats-3",
          "description": "Stats section with animated marquee mask effect",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-3",
          "registryName": "stats-3"
        },
        {
          "name": "Stats 4",
          "slug": "stats-4",
          "description": "Two-column layout with 2x2 grid of stat cards",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-4",
          "registryName": "stats-4"
        },
        {
          "name": "Stats 5",
          "slug": "stats-5",
          "description": "Full-width colored card with world map background, stats grid, and CTA",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-5",
          "registryName": "stats-5"
        },
        {
          "name": "Stats 6",
          "slug": "stats-6",
          "description": "Asymmetrical layout with mobile device mockups and parallax stat circles",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-6",
          "registryName": "stats-6"
        },
        {
          "name": "Stats 7",
          "slug": "stats-7",
          "description": "Two-column layout with animated bar charts",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-7",
          "registryName": "stats-7"
        },
        {
          "name": "Stats 8",
          "slug": "stats-8",
          "description": "Two-column large stats display with chart visualization",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-8",
          "registryName": "stats-8"
        },
        {
          "name": "Stats 9",
          "slug": "stats-9",
          "description": "Revenue calculator with user slider and animated projected earnings readout",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-9",
          "registryName": "stats-9"
        },
        {
          "name": "Stats 10",
          "slug": "stats-10",
          "description": "Color-blocked stat cards with count-up numbers and supporting labels",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-10",
          "registryName": "stats-10"
        },
        {
          "name": "Stats 11",
          "slug": "stats-11",
          "description": "Pastel stat cards with large metrics, source labels, and timeframe badges",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-11",
          "registryName": "stats-11"
        },
        {
          "name": "Stats 12",
          "slug": "stats-12",
          "description": "Quadrant yield story pairing animated rate bars with a coverage comparison.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-12",
          "registryName": "stats-12"
        },
        {
          "name": "Stats 13",
          "slug": "stats-13",
          "description": "Annual-report ledger of oversized count-up figures with delta annotations.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-13",
          "registryName": "stats-13"
        },
        {
          "name": "Stats 14",
          "slug": "stats-14",
          "description": "Telemetry stat cards with data-drawn sparklines and delta chips.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-14",
          "registryName": "stats-14"
        },
        {
          "name": "Stats 15",
          "slug": "stats-15",
          "description": "Dual-ring coverage dial with a per-workflow automation ledger.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/stats/stats-15",
          "registryName": "stats-15"
        }
      ]
    },
    {
      "name": "404",
      "slug": "404",
      "description": "404 error pages with creative designs and helpful navigation",
      "category": null,
      "tags": [
        "404",
        "error",
        "page"
      ],
      "tier": "pro",
      "count": 8,
      "newCount": 3,
      "href": "https://pro.reactbits.dev/docs/blocks/404",
      "variants": [
        {
          "name": "404 - 1",
          "slug": "404-1",
          "description": "Minimalist 404 page with title and card grid",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/404/404-1",
          "registryName": "404-1"
        },
        {
          "name": "404 - 2",
          "slug": "404-2",
          "description": "Full screen 404 text with centered layout and navigation button",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/404/404-2",
          "registryName": "404-2"
        },
        {
          "name": "404 3",
          "slug": "404-3",
          "description": "Centered 404 page with blurred large numerals and a compact CTA",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/404/404-3",
          "registryName": "404-3"
        },
        {
          "name": "404 4",
          "slug": "404-4",
          "description": "Editorial top-aligned 404 with large headline and a three-column card grid",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/404/404-4",
          "registryName": "404-4"
        },
        {
          "name": "404 5",
          "slug": "404-5",
          "description": "Bold 404 heading with scattered colorful illustrated cards below",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/404/404-5",
          "registryName": "404-5"
        },
        {
          "name": "404 6",
          "slug": "404-6",
          "description": "Theme-aware GLSL static-field 404 with a synchronized chromatic-glitch numeral and centered composition",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/404/404-6",
          "registryName": "404-6"
        },
        {
          "name": "404 7",
          "slug": "404-7",
          "description": "Radar-sweep 404 with sweep-synced contact pings, outline-mix numeral, and inline search",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/404/404-7",
          "registryName": "404-7"
        },
        {
          "name": "404 8",
          "slug": "404-8",
          "description": "Terminal 404 that prints an ASCII numeral diagnosis with live recovery routes and a blinking caret",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/404/404-8",
          "registryName": "404-8"
        }
      ]
    },
    {
      "name": "Profile",
      "slug": "profile",
      "description": "User profile sections with various layouts and information displays",
      "category": null,
      "tags": [
        "profile",
        "user",
        "account"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 3,
      "href": "https://pro.reactbits.dev/docs/blocks/profile",
      "variants": [
        {
          "name": "Profile 1",
          "slug": "profile-1",
          "description": "Simple profile card with avatar, bio, and action buttons",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/profile/profile-1",
          "registryName": "profile-1"
        },
        {
          "name": "Profile 2",
          "slug": "profile-2",
          "description": "Tabbed user profile card",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/profile/profile-2",
          "registryName": "profile-2"
        },
        {
          "name": "Profile 3",
          "slug": "profile-3",
          "description": "Minimal profile card with smooth fade effect",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/profile/profile-3",
          "registryName": "profile-3"
        },
        {
          "name": "Profile 4",
          "slug": "profile-4",
          "description": "Editorial split resume profile with framed portrait, experience timeline, selected work, and capability tags.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/profile/profile-4",
          "registryName": "profile-4"
        },
        {
          "name": "Profile 5",
          "slug": "profile-5",
          "description": "Spotlight creator card on an atmospheric dark panel with stats, tabbed link rows, and social actions.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/profile/profile-5",
          "registryName": "profile-5"
        },
        {
          "name": "Profile 6",
          "slug": "profile-6",
          "description": "Compact team grid with portrait cards, availability status, focus tags, and social links.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/profile/profile-6",
          "registryName": "profile-6"
        }
      ]
    },
    {
      "name": "About",
      "slug": "about",
      "description": "About sections showcasing company story, mission, and team information",
      "category": null,
      "tags": [
        "about",
        "company",
        "team",
        "mission"
      ],
      "tier": "pro",
      "count": 12,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/about",
      "variants": [
        {
          "name": "About 1",
          "slug": "about-1",
          "description": "Two-column carousel with auto-cycling images and text",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-1",
          "registryName": "about-1"
        },
        {
          "name": "About 2",
          "slug": "about-2",
          "description": "Timeline with horizontal progress bar",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-2",
          "registryName": "about-2"
        },
        {
          "name": "About 3",
          "slug": "about-3",
          "description": "Glass cards with metrics overlay",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-3",
          "registryName": "about-3"
        },
        {
          "name": "About 4",
          "slug": "about-4",
          "description": "Three-column layout with cycling progress circle",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-4",
          "registryName": "about-4"
        },
        {
          "name": "About 5",
          "slug": "about-5",
          "description": "Infinite horizontal scroll with bento cards",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-5",
          "registryName": "about-5"
        },
        {
          "name": "About 6",
          "slug": "about-6",
          "description": "Meet the Team section with large wordmark headline and founder profile cards",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-6",
          "registryName": "about-6"
        },
        {
          "name": "About 7",
          "slug": "about-7",
          "description": "Medical advisors section with institution logos and five-column doctor grid",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-7",
          "registryName": "about-7"
        },
        {
          "name": "About 8",
          "slug": "about-8",
          "description": "Team section with horizontal motion carousel and arrow navigation controls",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-8",
          "registryName": "about-8"
        },
        {
          "name": "About 9",
          "slug": "about-9",
          "description": "Centered mission statement with serif emphasis, cinematic film card, and an editorial stat rail.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-9",
          "registryName": "about-9"
        },
        {
          "name": "About 10",
          "slug": "about-10",
          "description": "People-first portrait collage around a faded brand statement with play CTA and trust strip.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-10",
          "registryName": "about-10"
        },
        {
          "name": "About 11",
          "slug": "about-11",
          "description": "Sticky company narrative beside a drawn timeline rail with varied milestone chapters.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-11",
          "registryName": "about-11"
        },
        {
          "name": "About 12",
          "slug": "about-12",
          "description": "Inverted founder pull-quote panel paired with a numbered operating-values ledger.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/about/about-12",
          "registryName": "about-12"
        }
      ]
    },
    {
      "name": "Waitlist",
      "slug": "waitlist",
      "description": "Waitlist sections for collecting early sign-ups and pre-launch interest",
      "category": null,
      "tags": [
        "waitlist",
        "signup",
        "email",
        "form",
        "pre-launch"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 3,
      "href": "https://pro.reactbits.dev/docs/blocks/waitlist",
      "variants": [
        {
          "name": "Waitlist 1",
          "slug": "waitlist-1",
          "description": "Waitlist signup with animated vertical marquees",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/waitlist/waitlist-1",
          "registryName": "waitlist-1"
        },
        {
          "name": "Waitlist 2",
          "slug": "waitlist-2",
          "description": "Centered waitlist signup with large title and fading card",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/waitlist/waitlist-2",
          "registryName": "waitlist-2"
        },
        {
          "name": "Waitlist 3",
          "slug": "waitlist-3",
          "description": "Rounded waitlist card with top SVG insert and image",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/waitlist/waitlist-3",
          "registryName": "waitlist-3"
        },
        {
          "name": "Waitlist 4",
          "slug": "waitlist-4",
          "description": "Monochrome fintech waitlist hero on a dotted grid with a nested pill capture, live queue counter, and cropped product panel.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/waitlist/waitlist-4",
          "registryName": "waitlist-4"
        },
        {
          "name": "Waitlist 5",
          "slug": "waitlist-5",
          "description": "Editorial two-column creator waitlist with serif-accent headline, avatar social proof, and a cycling testimonial card over photography.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/waitlist/waitlist-5",
          "registryName": "waitlist-5"
        },
        {
          "name": "Waitlist 6",
          "slug": "waitlist-6",
          "description": "Centered atmospheric waitlist over a theme-aware GLSL ripple field with a glass pill capture and queue social proof.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/waitlist/waitlist-6",
          "registryName": "waitlist-6"
        }
      ]
    },
    {
      "name": "Showcase",
      "slug": "showcase",
      "description": "Showcase sections to highlight products, features, or portfolios",
      "category": null,
      "tags": [
        "showcase",
        "portfolio",
        "gallery",
        "display"
      ],
      "tier": "pro",
      "count": 8,
      "newCount": 3,
      "href": "https://pro.reactbits.dev/docs/blocks/showcase",
      "variants": [
        {
          "name": "Showcase 1",
          "slug": "showcase-1",
          "description": "Animated background showcase with four items",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/showcase/showcase-1",
          "registryName": "showcase-1"
        },
        {
          "name": "Showcase 2",
          "slug": "showcase-2",
          "description": "Draggable infinite horizontal carousel with 3D hover effect",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/showcase/showcase-2",
          "registryName": "showcase-2"
        },
        {
          "name": "Showcase 3",
          "slug": "showcase-3",
          "description": "3D triangular carousel with drag and snap",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/showcase/showcase-3",
          "registryName": "showcase-3"
        },
        {
          "name": "Showcase 4",
          "slug": "showcase-4",
          "description": "Filterable project grid with category pills and animated layout transitions",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/showcase/showcase-4",
          "registryName": "showcase-4"
        },
        {
          "name": "Showcase 5",
          "slug": "showcase-5",
          "description": "Tabbed creator showcase with slide carousel for studios, creators, and teams",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/showcase/showcase-5",
          "registryName": "showcase-5"
        },
        {
          "name": "Showcase 6",
          "slug": "showcase-6",
          "description": "Scrapbook studio gallery with tilted, overlapping polaroid cards and mono captions.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/showcase/showcase-6",
          "registryName": "showcase-6"
        },
        {
          "name": "Showcase 7",
          "slug": "showcase-7",
          "description": "Editorial case-study index with sticky crossfading preview panel.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/showcase/showcase-7",
          "registryName": "showcase-7"
        },
        {
          "name": "Showcase 8",
          "slug": "showcase-8",
          "description": "Scroll-snap project carousel with editorial cards, progress rail, and counter.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/showcase/showcase-8",
          "registryName": "showcase-8"
        }
      ]
    },
    {
      "name": "How It Works",
      "slug": "how-it-works",
      "description": "Step-by-step process sections explaining how things work",
      "category": null,
      "tags": [
        "how-it-works",
        "process",
        "steps",
        "workflow"
      ],
      "tier": "pro",
      "count": 9,
      "newCount": 3,
      "href": "https://pro.reactbits.dev/docs/blocks/how-it-works",
      "variants": [
        {
          "name": "How It Works 1",
          "slug": "how-it-works-1",
          "description": "Step-by-step carousel with images and navigation",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/how-it-works/how-it-works-1",
          "registryName": "how-it-works-1"
        },
        {
          "name": "How It Works 2",
          "slug": "how-it-works-2",
          "description": "Step cards with dimmed image background hover effect",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/how-it-works/how-it-works-2",
          "registryName": "how-it-works-2"
        },
        {
          "name": "How It Works 3",
          "slug": "how-it-works-3",
          "description": "Animated stepper with 3D perspective shifting images",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/how-it-works/how-it-works-3",
          "registryName": "how-it-works-3"
        },
        {
          "name": "How It Works 4",
          "slug": "how-it-works-4",
          "description": "Today/Day 5/Day 30 timeline pills with dotted connector and bordered checklist cards",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/how-it-works/how-it-works-4",
          "registryName": "how-it-works-4"
        },
        {
          "name": "How It Works 5",
          "slug": "how-it-works-5",
          "description": "Split layout with lowercase heading, green CTA pill, and numbered green-circle steps",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/how-it-works/how-it-works-5",
          "registryName": "how-it-works-5"
        },
        {
          "name": "How It Works 6",
          "slug": "how-it-works-6",
          "description": "Scroll-progress timeline with animated nodes and image cards that pulse when reached",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/how-it-works/how-it-works-6",
          "registryName": "how-it-works-6"
        },
        {
          "name": "How It Works 7",
          "slug": "how-it-works-7",
          "description": "Sculptural four-step grid with oversized serif numerals orbiting a central arched image",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/how-it-works/how-it-works-7",
          "registryName": "how-it-works-7"
        },
        {
          "name": "How It Works 8",
          "slug": "how-it-works-8",
          "description": "Horizontal three-step flow with a drawing connector line and UI-primitive vignettes",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/how-it-works/how-it-works-8",
          "registryName": "how-it-works-8"
        },
        {
          "name": "How It Works 9",
          "slug": "how-it-works-9",
          "description": "Interactive release-step switcher with sliding indicator and animated detail panels",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/how-it-works/how-it-works-9",
          "registryName": "how-it-works-9"
        }
      ]
    },
    {
      "name": "Download",
      "slug": "download",
      "description": "Download sections for apps, files, and resources",
      "category": null,
      "tags": [
        "download",
        "app",
        "cta",
        "mobile"
      ],
      "tier": "pro",
      "count": 8,
      "newCount": 3,
      "href": "https://pro.reactbits.dev/docs/blocks/download",
      "variants": [
        {
          "name": "Download 1",
          "slug": "download-1",
          "description": "Versioned download section with OS options",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/download/download-1",
          "registryName": "download-1"
        },
        {
          "name": "Download 2",
          "slug": "download-2",
          "description": "Download CTA with rating cards and app store options",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/download/download-2",
          "registryName": "download-2"
        },
        {
          "name": "Download 3",
          "slug": "download-3",
          "description": "Download CTA with description and animated shader logo",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/download/download-3",
          "registryName": "download-3"
        },
        {
          "name": "Download 4",
          "slug": "download-4",
          "description": "Editorial sample-pack download with serif headline, overlay image, and pink CTA",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/download/download-4",
          "registryName": "download-4"
        },
        {
          "name": "Download 5",
          "slug": "download-5",
          "description": "Centered desktop-app download hero with dual CTAs and iOS/Android footer",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/download/download-5",
          "registryName": "download-5"
        },
        {
          "name": "Download 6",
          "slug": "download-6",
          "description": "Desktop release manifest with signed platform builds, checksums, and changelog highlights.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/download/download-6",
          "registryName": "download-6"
        },
        {
          "name": "Download 7",
          "slug": "download-7",
          "description": "Centered mobile app hero with store badges, a scan-to-install chip, and layered phone silhouettes.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/download/download-7",
          "registryName": "download-7"
        },
        {
          "name": "Download 8",
          "slug": "download-8",
          "description": "Terminal installer with platform tabs, a copyable one-line command, and verified install output.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/download/download-8",
          "registryName": "download-8"
        }
      ]
    },
    {
      "name": "Blog",
      "slug": "blog",
      "description": "Blog sections and article layouts for content display",
      "category": null,
      "tags": [
        "blog",
        "articles",
        "posts",
        "content"
      ],
      "tier": "pro",
      "count": 11,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/blog",
      "variants": [
        {
          "name": "Blog 1",
          "slug": "blog-1",
          "description": "Responsive blog page with article card grid",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/blog/blog-1",
          "registryName": "blog-1"
        },
        {
          "name": "Blog 2",
          "slug": "blog-2",
          "description": "Recently published section with animated pagination",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/blog/blog-2",
          "registryName": "blog-2"
        },
        {
          "name": "Blog 3",
          "slug": "blog-3",
          "description": "Blog section with sidebar filtering and next/prev buttons",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/blog/blog-3",
          "registryName": "blog-3"
        },
        {
          "name": "Blog 4",
          "slug": "blog-4",
          "description": "Article page with stats and user details",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/blog/blog-4",
          "registryName": "blog-4"
        },
        {
          "name": "Blog 5",
          "slug": "blog-5",
          "description": "Detailed article page with scroll progress and AI input",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/blog/blog-5",
          "registryName": "blog-5"
        },
        {
          "name": "Blog 6",
          "slug": "blog-6",
          "description": "Filterable newsroom grid with section tabs, image tiles, and hover reveal arrow",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/blog/blog-6",
          "registryName": "blog-6"
        },
        {
          "name": "Blog 7",
          "slug": "blog-7",
          "description": "Blog grid with sidebar tag filter and color-coded category pills",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/blog/blog-7",
          "registryName": "blog-7"
        },
        {
          "name": "Blog 8",
          "slug": "blog-8",
          "description": "Filterable changelog grid with a sliding category pill, live search, and floating image chips.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/blog/blog-8",
          "registryName": "blog-8"
        },
        {
          "name": "Blog 9",
          "slug": "blog-9",
          "description": "Poster-style journal teaser with floating label cards and circular arrow actions.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/blog/blog-9",
          "registryName": "blog-9"
        },
        {
          "name": "Blog 10",
          "slug": "blog-10",
          "description": "Editorial archive with a sticky radio topic rail and full-width article rows.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/blog/blog-10",
          "registryName": "blog-10"
        },
        {
          "name": "Blog 11",
          "slug": "blog-11",
          "description": "Framed featured essay beside a hairline-divided list of compact secondary reads.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/blog/blog-11",
          "registryName": "blog-11"
        }
      ]
    },
    {
      "name": "Ecommerce",
      "slug": "ecommerce",
      "description": "Ecommerce sections for product pages, catalogs, and storefronts",
      "category": null,
      "tags": [
        "ecommerce",
        "shop",
        "product",
        "store"
      ],
      "tier": "pro",
      "count": 11,
      "newCount": 4,
      "href": "https://pro.reactbits.dev/docs/blocks/ecommerce",
      "variants": [
        {
          "name": "Ecommerce 1",
          "slug": "ecommerce-1",
          "description": "Sneaker product page with thumbnail rail, fit toggle, and accordion details",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/ecommerce/ecommerce-1",
          "registryName": "ecommerce-1"
        },
        {
          "name": "Ecommerce 2",
          "slug": "ecommerce-2",
          "description": "Product catalog with sidebar brand filter, color swatches, and feature chips",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/ecommerce/ecommerce-2",
          "registryName": "ecommerce-2"
        },
        {
          "name": "Ecommerce 3",
          "slug": "ecommerce-3",
          "description": "Split-image bag product page with color swatches driving images and tabbed details",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/ecommerce/ecommerce-3",
          "registryName": "ecommerce-3"
        },
        {
          "name": "Ecommerce 4",
          "slug": "ecommerce-4",
          "description": "Out-of-stock apparel page with size picker, highlight pills, and notify-me CTA",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/ecommerce/ecommerce-4",
          "registryName": "ecommerce-4"
        },
        {
          "name": "Ecommerce 5",
          "slug": "ecommerce-5",
          "description": "Four-up product comparison with feature lists and buy buttons",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/ecommerce/ecommerce-5",
          "registryName": "ecommerce-5"
        },
        {
          "name": "Ecommerce 6",
          "slug": "ecommerce-6",
          "description": "Shop-all product grid with animated category pill tabs and sold-out overlay",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/ecommerce/ecommerce-6",
          "registryName": "ecommerce-6"
        },
        {
          "name": "Ecommerce 7",
          "slug": "ecommerce-7",
          "description": "Category tile grid with animated underline tabs switching between print collections",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/blocks/ecommerce/ecommerce-7",
          "registryName": "ecommerce-7"
        },
        {
          "name": "Ecommerce 8",
          "slug": "ecommerce-8",
          "description": "Object product page with crossfading gallery, layout-animated finish swatches, tabular spec sheet, and quantity-aware add to bag.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/ecommerce/ecommerce-8",
          "registryName": "ecommerce-8"
        },
        {
          "name": "Ecommerce 9",
          "slug": "ecommerce-9",
          "description": "Filterable collection grid with animated filter pill, quiet status chips, and motion-driven quick-add size overlay.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/ecommerce/ecommerce-9",
          "registryName": "ecommerce-9"
        },
        {
          "name": "Ecommerce 10",
          "slug": "ecommerce-10",
          "description": "Editorial lookbook with indexed look switcher, staggered shoppable piece rows, and complete-the-look totals.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/ecommerce/ecommerce-10",
          "registryName": "ecommerce-10"
        },
        {
          "name": "Ecommerce 11",
          "slug": "ecommerce-11",
          "description": "Cart review with animated line items, free-shipping progress, gift-note expander, and sticky order summary.",
          "isNew": true,
          "href": "https://pro.reactbits.dev/docs/blocks/ecommerce/ecommerce-11",
          "registryName": "ecommerce-11"
        }
      ]
    }
  ],
  "appUi": [
    {
      "name": "AI Chat",
      "slug": "ai-chat",
      "description": "Conversational agent interfaces with streaming, tool calls, sources, and artifacts",
      "category": "AI & Agents",
      "tags": [
        "ai",
        "agent",
        "chat",
        "assistant",
        "streaming"
      ],
      "tier": "pro",
      "count": 9,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/ai-chat",
      "variants": [
        {
          "name": "AI Chat 1",
          "slug": "ai-chat-1",
          "description": "Full assistant thread with reasoning disclosure, live tool call, streaming answer, sources, and an attachment composer.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-chat/ai-chat-1",
          "registryName": "ai-chat-1"
        },
        {
          "name": "AI Chat 2",
          "slug": "ai-chat-2",
          "description": "Chat with a generated-artifact side panel showing code and document previews with version tabs.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-chat/ai-chat-2",
          "registryName": "ai-chat-2"
        },
        {
          "name": "AI Chat 3",
          "slug": "ai-chat-3",
          "description": "Compact embedded assistant panel with empty state, suggested prompts, and a docked composer.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-chat/ai-chat-3",
          "registryName": "ai-chat-3"
        },
        {
          "name": "AI Chat 4",
          "slug": "ai-chat-4",
          "description": "Chat with model picker, live context and token meter, and a conversation settings popover.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-chat/ai-chat-4",
          "registryName": "ai-chat-4"
        },
        {
          "name": "AI Chat 5",
          "slug": "ai-chat-5",
          "description": "Chat with inline approval requests that gate destructive agent actions before they run.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-chat/ai-chat-5",
          "registryName": "ai-chat-5"
        },
        {
          "name": "AI Chat 6",
          "slug": "ai-chat-6",
          "description": "Multi-agent conversation with per-agent identity, handoffs, and a live activity rail.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-chat/ai-chat-6",
          "registryName": "ai-chat-6"
        },
        {
          "name": "AI Chat 7",
          "slug": "ai-chat-7",
          "description": "Chat with pinned context sources and per-message citations that map answers to evidence.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-chat/ai-chat-7",
          "registryName": "ai-chat-7"
        },
        {
          "name": "AI Chat 8",
          "slug": "ai-chat-8",
          "description": "Voice and multimodal composer with waveform capture, live transcript, and attachment previews.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-chat/ai-chat-8",
          "registryName": "ai-chat-8"
        },
        {
          "name": "AI Chat 9",
          "slug": "ai-chat-9",
          "description": "Composer model picker with a provider list and a detail card carrying context, cost, and a reasoning effort control.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-chat/ai-chat-9",
          "registryName": "ai-chat-9"
        }
      ]
    },
    {
      "name": "Prompt Input",
      "slug": "prompt-input",
      "description": "Composers and prompt bars with commands, attachments, context, and model controls",
      "category": "AI & Agents",
      "tags": [
        "ai",
        "prompt",
        "composer",
        "input",
        "textarea"
      ],
      "tier": "pro",
      "count": 7,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/prompt-input",
      "variants": [
        {
          "name": "Prompt Input 1",
          "slug": "prompt-input-1",
          "description": "Autosizing composer with slash-command menu, attachment tray, and send or stop control.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/prompt-input/prompt-input-1",
          "registryName": "prompt-input-1"
        },
        {
          "name": "Prompt Input 2",
          "slug": "prompt-input-2",
          "description": "Prompt box with model selector, tool toggles, and a live token counter.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/prompt-input/prompt-input-2",
          "registryName": "prompt-input-2"
        },
        {
          "name": "Prompt Input 3",
          "slug": "prompt-input-3",
          "description": "Hero prompt launcher with suggestion chips and recent prompt history.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/prompt-input/prompt-input-3",
          "registryName": "prompt-input-3"
        },
        {
          "name": "Prompt Input 4",
          "slug": "prompt-input-4",
          "description": "Prompt template editor with variable placeholders and inline validation.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/prompt-input/prompt-input-4",
          "registryName": "prompt-input-4"
        },
        {
          "name": "Prompt Input 5",
          "slug": "prompt-input-5",
          "description": "Prompt input with drag-and-drop file zone and per-attachment upload progress.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/prompt-input/prompt-input-5",
          "registryName": "prompt-input-5"
        },
        {
          "name": "Prompt Input 6",
          "slug": "prompt-input-6",
          "description": "Prompt bar with @-mention context picker and scoped source pills.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/prompt-input/prompt-input-6",
          "registryName": "prompt-input-6"
        },
        {
          "name": "Prompt Input 7",
          "slug": "prompt-input-7",
          "description": "Prompt input with ask, agent, and edit mode switcher plus keyboard hints.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/prompt-input/prompt-input-7",
          "registryName": "prompt-input-7"
        }
      ]
    },
    {
      "name": "Agent Activity",
      "slug": "agent-activity",
      "description": "Live run streams, timelines, logs, and history for autonomous agent work",
      "category": "AI & Agents",
      "tags": [
        "ai",
        "agent",
        "activity",
        "timeline",
        "logs"
      ],
      "tier": "pro",
      "count": 7,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/agent-activity",
      "variants": [
        {
          "name": "Agent Activity 1",
          "slug": "agent-activity-1",
          "description": "Live activity stream with per-step status dots, elapsed timers, and a cancel control.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-activity/agent-activity-1",
          "registryName": "agent-activity-1"
        },
        {
          "name": "Agent Activity 2",
          "slug": "agent-activity-2",
          "description": "Collapsible run timeline with nested sub-steps and duration bars.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-activity/agent-activity-2",
          "registryName": "agent-activity-2"
        },
        {
          "name": "Agent Activity 3",
          "slug": "agent-activity-3",
          "description": "Compact agent status rail showing the current action, progress, and stop control.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-activity/agent-activity-3",
          "registryName": "agent-activity-3"
        },
        {
          "name": "Agent Activity 4",
          "slug": "agent-activity-4",
          "description": "Agent run history table with status, duration, cost, and re-run actions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-activity/agent-activity-4",
          "registryName": "agent-activity-4"
        },
        {
          "name": "Agent Activity 5",
          "slug": "agent-activity-5",
          "description": "Terminal-style log stream with severity filters and an autoscroll pin.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-activity/agent-activity-5",
          "registryName": "agent-activity-5"
        },
        {
          "name": "Agent Activity 6",
          "slug": "agent-activity-6",
          "description": "Parallel agent lanes showing concurrent workers, queue depth, and throughput.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-activity/agent-activity-6",
          "registryName": "agent-activity-6"
        },
        {
          "name": "Agent Activity 7",
          "slug": "agent-activity-7",
          "description": "Run detail panel with inputs, outputs, retry attempts, and an error surface.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-activity/agent-activity-7",
          "registryName": "agent-activity-7"
        }
      ]
    },
    {
      "name": "Tool Calls",
      "slug": "tool-calls",
      "description": "Tool invocation cards, results, diffs, and permission surfaces",
      "category": "AI & Agents",
      "tags": [
        "ai",
        "agent",
        "tools",
        "function-calling",
        "results"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/tool-calls",
      "variants": [
        {
          "name": "Tool Calls 1",
          "slug": "tool-calls-1",
          "description": "Tool call card with collapsible arguments, formatted result, and timing metadata.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/tool-calls/tool-calls-1",
          "registryName": "tool-calls-1"
        },
        {
          "name": "Tool Calls 2",
          "slug": "tool-calls-2",
          "description": "Tool call list with pending, success, and failure states plus retry affordances.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/tool-calls/tool-calls-2",
          "registryName": "tool-calls-2"
        },
        {
          "name": "Tool Calls 3",
          "slug": "tool-calls-3",
          "description": "File edit tool result rendered as a diff with add and remove line counts.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/tool-calls/tool-calls-3",
          "registryName": "tool-calls-3"
        },
        {
          "name": "Tool Calls 4",
          "slug": "tool-calls-4",
          "description": "Web search tool result with ranked source cards and relevance metadata.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/tool-calls/tool-calls-4",
          "registryName": "tool-calls-4"
        },
        {
          "name": "Tool Calls 5",
          "slug": "tool-calls-5",
          "description": "Code execution tool card with stdout and stderr tabs and an exit code badge.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/tool-calls/tool-calls-5",
          "registryName": "tool-calls-5"
        },
        {
          "name": "Tool Calls 6",
          "slug": "tool-calls-6",
          "description": "Tool permission row with per-tool enable, disable, and scope disclosure.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/tool-calls/tool-calls-6",
          "registryName": "tool-calls-6"
        }
      ]
    },
    {
      "name": "Agent Approval",
      "slug": "agent-approval",
      "description": "Human-in-the-loop confirmation, permission, and audit surfaces",
      "category": "AI & Agents",
      "tags": [
        "ai",
        "agent",
        "approval",
        "permissions",
        "confirmation"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/agent-approval",
      "variants": [
        {
          "name": "Agent Approval 1",
          "slug": "agent-approval-1",
          "description": "Inline approval prompt for a destructive action with a plain-language impact summary.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-approval/agent-approval-1",
          "registryName": "agent-approval-1"
        },
        {
          "name": "Agent Approval 2",
          "slug": "agent-approval-2",
          "description": "Approval dialog with diff preview and allow once, always allow, or deny.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-approval/agent-approval-2",
          "registryName": "agent-approval-2"
        },
        {
          "name": "Agent Approval 3",
          "slug": "agent-approval-3",
          "description": "Batch approval queue with select-all, per-item risk badges, and bulk decisions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-approval/agent-approval-3",
          "registryName": "agent-approval-3"
        },
        {
          "name": "Agent Approval 4",
          "slug": "agent-approval-4",
          "description": "Permission request card for external tool and API access with itemised scopes.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-approval/agent-approval-4",
          "registryName": "agent-approval-4"
        },
        {
          "name": "Agent Approval 5",
          "slug": "agent-approval-5",
          "description": "Approval banner for long-running or high-cost operations with an estimate breakdown.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-approval/agent-approval-5",
          "registryName": "agent-approval-5"
        },
        {
          "name": "Agent Approval 6",
          "slug": "agent-approval-6",
          "description": "Audit list of previously approved and denied agent actions with filters.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-approval/agent-approval-6",
          "registryName": "agent-approval-6"
        }
      ]
    },
    {
      "name": "Agent Plan",
      "slug": "agent-plan",
      "description": "Task plans, checklists, and execution trees for multi-step agent work",
      "category": "AI & Agents",
      "tags": [
        "ai",
        "agent",
        "plan",
        "tasks",
        "checklist"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/agent-plan",
      "variants": [
        {
          "name": "Agent Plan 1",
          "slug": "agent-plan-1",
          "description": "Task plan checklist with live step status and a vertical progress rail.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-plan/agent-plan-1",
          "registryName": "agent-plan-1"
        },
        {
          "name": "Agent Plan 2",
          "slug": "agent-plan-2",
          "description": "Editable plan with reorder, add, and skip controls before execution starts.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-plan/agent-plan-2",
          "registryName": "agent-plan-2"
        },
        {
          "name": "Agent Plan 3",
          "slug": "agent-plan-3",
          "description": "Plan tree with nested subtasks, dependency links, and blocked states.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-plan/agent-plan-3",
          "registryName": "agent-plan-3"
        },
        {
          "name": "Agent Plan 4",
          "slug": "agent-plan-4",
          "description": "Plan versus actual comparison with drift indicators and step-level deltas.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-plan/agent-plan-4",
          "registryName": "agent-plan-4"
        },
        {
          "name": "Agent Plan 5",
          "slug": "agent-plan-5",
          "description": "Todo board for agent work items grouped by queued, running, and done.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-plan/agent-plan-5",
          "registryName": "agent-plan-5"
        },
        {
          "name": "Agent Plan 6",
          "slug": "agent-plan-6",
          "description": "Plan summary card with estimated steps, required tools, and projected cost.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/agent-plan/agent-plan-6",
          "registryName": "agent-plan-6"
        }
      ]
    },
    {
      "name": "AI Usage",
      "slug": "ai-usage",
      "description": "Token spend, quotas, rate limits, and per-model cost attribution surfaces",
      "category": "AI & Agents",
      "tags": [
        "ai",
        "usage",
        "tokens",
        "billing",
        "quota",
        "cost"
      ],
      "tier": "pro",
      "count": 8,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/ai-usage",
      "variants": [
        {
          "name": "AI Usage 1",
          "slug": "ai-usage-1",
          "description": "Token usage overview with stacked input and output bars and a range switcher.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-usage/ai-usage-1",
          "registryName": "ai-usage-1"
        },
        {
          "name": "AI Usage 2",
          "slug": "ai-usage-2",
          "description": "Spend by model table with inline share bars, period deltas, and sortable columns.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-usage/ai-usage-2",
          "registryName": "ai-usage-2"
        },
        {
          "name": "AI Usage 3",
          "slug": "ai-usage-3",
          "description": "Rate limit panel with utilisation meters per window and a tier switcher.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-usage/ai-usage-3",
          "registryName": "ai-usage-3"
        },
        {
          "name": "AI Usage 4",
          "slug": "ai-usage-4",
          "description": "Per-seat usage list with team filters, search, and individual spend caps.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-usage/ai-usage-4",
          "registryName": "ai-usage-4"
        },
        {
          "name": "AI Usage 5",
          "slug": "ai-usage-5",
          "description": "Budget settings with a monthly cap slider, alert thresholds, and hard-stop toggles.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-usage/ai-usage-5",
          "registryName": "ai-usage-5"
        },
        {
          "name": "AI Usage 6",
          "slug": "ai-usage-6",
          "description": "Overage notice with included-versus-billed split and an inline plan upgrade picker.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-usage/ai-usage-6",
          "registryName": "ai-usage-6"
        },
        {
          "name": "AI Usage 7",
          "slug": "ai-usage-7",
          "description": "Request log with per-call tokens, latency, cost, and an expandable detail row.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-usage/ai-usage-7",
          "registryName": "ai-usage-7"
        },
        {
          "name": "AI Usage 8",
          "slug": "ai-usage-8",
          "description": "Compact plan usage widget with a sparkline, secondary meters, and an upgrade prompt.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/ai-usage/ai-usage-8",
          "registryName": "ai-usage-8"
        }
      ]
    },
    {
      "name": "App Shell",
      "slug": "app-shell",
      "description": "Complete application frames pairing navigation and headers with a real content region",
      "category": "Navigation",
      "tags": [
        "shell",
        "layout",
        "navigation",
        "sidebar",
        "header"
      ],
      "tier": "pro",
      "count": 9,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/app-shell",
      "variants": [
        {
          "name": "App Shell 1",
          "slug": "app-shell-1",
          "description": "Sidebar with collapsible nav groups, a breadcrumb header, and an overview screen of metrics and records.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-shell/app-shell-1",
          "registryName": "app-shell-1"
        },
        {
          "name": "App Shell 2",
          "slug": "app-shell-2",
          "description": "Icon rail paired with a nav pane whose contents swap as you move between product areas.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-shell/app-shell-2",
          "registryName": "app-shell-2"
        },
        {
          "name": "App Shell 3",
          "slug": "app-shell-3",
          "description": "Global top bar with search and account, above a sidebar that collapses to an icon rail.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-shell/app-shell-3",
          "registryName": "app-shell-3"
        },
        {
          "name": "App Shell 4",
          "slug": "app-shell-4",
          "description": "Three-column frame with a toggleable context panel that runs alongside the main content.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-shell/app-shell-4",
          "registryName": "app-shell-4"
        },
        {
          "name": "App Shell 5",
          "slug": "app-shell-5",
          "description": "Master-detail triage frame with an icon rail, a filterable list pane, and a reading pane.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-shell/app-shell-5",
          "registryName": "app-shell-5"
        },
        {
          "name": "App Shell 6",
          "slug": "app-shell-6",
          "description": "Document workspace with a keyboard-navigable file tree, formatting toolbar, and centered editor.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-shell/app-shell-6",
          "registryName": "app-shell-6"
        },
        {
          "name": "App Shell 7",
          "slug": "app-shell-7",
          "description": "Scope switcher frame where organization, project, and environment menus drive the whole screen.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-shell/app-shell-7",
          "registryName": "app-shell-7"
        },
        {
          "name": "App Shell 8",
          "slug": "app-shell-8",
          "description": "Adaptive frame that moves from a mobile tab bar to an icon rail to a full sidebar.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-shell/app-shell-8",
          "registryName": "app-shell-8"
        },
        {
          "name": "App Shell 9",
          "slug": "app-shell-9",
          "description": "AI chat frame with a model picker, pinned and recent threads, and a full-width composer.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-shell/app-shell-9",
          "registryName": "app-shell-9"
        }
      ]
    },
    {
      "name": "Cards",
      "slug": "card",
      "description": "Card galleries and standalone cards for people, plans, activity, and files",
      "category": "Data",
      "tags": [
        "card",
        "grid",
        "gallery",
        "profile",
        "metric"
      ],
      "tier": "pro",
      "count": 11,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/card",
      "variants": [
        {
          "name": "Card 1",
          "slug": "card-1",
          "description": "Centred member cards with a presence dot, a framed three-up stat strip, and a connect toggle.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/card/card-1",
          "registryName": "card-1"
        },
        {
          "name": "Card 2",
          "slug": "card-2",
          "description": "Full-width integration rows: an icon, a description, and a switch that connects the service.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/card/card-2",
          "registryName": "card-2"
        },
        {
          "name": "Card 3",
          "slug": "card-3",
          "description": "Tall numbered onboarding columns you tick off, with a live completion count and a reset.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/card/card-3",
          "registryName": "card-3"
        },
        {
          "name": "Card 4",
          "slug": "card-4",
          "description": "Agenda cards led by a square date panel, with attendees and an inline RSVP row.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/card/card-4",
          "registryName": "card-4"
        },
        {
          "name": "Card 5",
          "slug": "card-5",
          "description": "Plan cards pairing a price header with a specification list and an includes checklist.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/card/card-5",
          "registryName": "card-5"
        },
        {
          "name": "Card 6",
          "slug": "card-6",
          "description": "Account metrics in one framed row, driven by a segmented date-range control.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/card/card-6",
          "registryName": "card-6"
        },
        {
          "name": "Card 7",
          "slug": "card-7",
          "description": "Changelog cards with a version overline, a two-line excerpt, an author, and a bookmark.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/card/card-7",
          "registryName": "card-7"
        },
        {
          "name": "Card 8",
          "slug": "card-8",
          "description": "Selectable file tiles with a preview panel and a toolbar that acts on the selection.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/card/card-8",
          "registryName": "card-8"
        },
        {
          "name": "Card 9",
          "slug": "card-9",
          "description": "A standalone profile card: identity, tags, a framed stat strip, and follow or message.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/card/card-9",
          "registryName": "card-9"
        },
        {
          "name": "Card 10",
          "slug": "card-10",
          "description": "A standalone balance card with a headline figure, a split, recent activity, and money actions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/card/card-10",
          "registryName": "card-10"
        },
        {
          "name": "Card 11",
          "slug": "card-11",
          "description": "A standalone invoice card with line items, totals, a paid status, and a PDF download.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/card/card-11",
          "registryName": "card-11"
        }
      ]
    },
    {
      "name": "Onboarding",
      "slug": "onboarding",
      "description": "First-run flows: profile setup, steppers, checklists, invites, and activation",
      "category": "Auth & Onboarding",
      "tags": [
        "onboarding",
        "setup",
        "stepper",
        "checklist",
        "invite"
      ],
      "tier": "pro",
      "count": 7,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/onboarding",
      "variants": [
        {
          "name": "Onboarding 1",
          "slug": "onboarding-1",
          "description": "Split-screen profile setup with a live directory preview of what teammates will see.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/onboarding/onboarding-1",
          "registryName": "onboarding-1"
        },
        {
          "name": "Onboarding 2",
          "slug": "onboarding-2",
          "description": "Six-step vertical stepper with a labelled rail and a real form body on every step.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/onboarding/onboarding-2",
          "registryName": "onboarding-2"
        },
        {
          "name": "Onboarding 3",
          "slug": "onboarding-3",
          "description": "Getting-started checklist with a live progress bar and a per-task action.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/onboarding/onboarding-3",
          "registryName": "onboarding-3"
        },
        {
          "name": "Onboarding 4",
          "slug": "onboarding-4",
          "description": "Use-case picker with selectable option tiles and a segmented team-size control.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/onboarding/onboarding-4",
          "registryName": "onboarding-4"
        },
        {
          "name": "Onboarding 5",
          "slug": "onboarding-5",
          "description": "Invite-teammates rows with per-person role selects, a shareable link, and a copy action.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/onboarding/onboarding-5",
          "registryName": "onboarding-5"
        },
        {
          "name": "Onboarding 6",
          "slug": "onboarding-6",
          "description": "Setup-complete summary listing what was configured, with the two obvious next actions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/onboarding/onboarding-6",
          "registryName": "onboarding-6"
        },
        {
          "name": "Onboarding 7",
          "slug": "onboarding-7",
          "description": "Horizontal top stepper over a workspace form with a live URL slug preview.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/onboarding/onboarding-7",
          "registryName": "onboarding-7"
        }
      ]
    },
    {
      "name": "Kanban",
      "slug": "kanban",
      "description": "Drag-and-drop boards: status columns, swimlanes, grouping, sprint capacity, and board detail panels",
      "category": "Workflows",
      "tags": [
        "kanban",
        "board",
        "drag and drop",
        "sortable",
        "columns",
        "swimlane",
        "backlog",
        "sprint",
        "task",
        "project"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/kanban",
      "variants": [
        {
          "name": "Kanban 1",
          "slug": "kanban-1",
          "description": "Status board with pointer drag-and-drop, keyboard card moves, WIP limits, and an inline composer.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/kanban/kanban-1",
          "registryName": "kanban-1"
        },
        {
          "name": "Kanban 2",
          "slug": "kanban-2",
          "description": "Swimlane board with collapsible workstreams, a sticky stage header, and drag between any lane and column.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/kanban/kanban-2",
          "registryName": "kanban-2"
        },
        {
          "name": "Kanban 3",
          "slug": "kanban-3",
          "description": "Regroupable board where dropping a card into a column sets its status, assignee, or priority.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/kanban/kanban-3",
          "registryName": "kanban-3"
        },
        {
          "name": "Kanban 4",
          "slug": "kanban-4",
          "description": "Board with a master-detail side panel holding properties, stage controls, and an activity thread.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/kanban/kanban-4",
          "registryName": "kanban-4"
        },
        {
          "name": "Kanban 5",
          "slug": "kanban-5",
          "description": "Sprint board with point totals, per-column capacity meters, blocked flags, and a burn-down stat strip.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/kanban/kanban-5",
          "registryName": "kanban-5"
        },
        {
          "name": "Kanban 6",
          "slug": "kanban-6",
          "description": "Compact task board with per-card step controls and a segmented column pager on small screens.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/kanban/kanban-6",
          "registryName": "kanban-6"
        }
      ]
    },
    {
      "name": "Wizard",
      "slug": "wizard",
      "description": "Multi-step flows: steppers, review screens, progress runs, and modal wizards",
      "category": "Workflows",
      "tags": [
        "wizard",
        "stepper",
        "multi-step",
        "flow",
        "progress"
      ],
      "tier": "pro",
      "count": 7,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/wizard",
      "variants": [
        {
          "name": "Wizard 1",
          "slug": "wizard-1",
          "description": "Card wizard with an inline step header and a two-column details form in a tinted footer frame.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/wizard/wizard-1",
          "registryName": "wizard-1"
        },
        {
          "name": "Wizard 2",
          "slug": "wizard-2",
          "description": "Full-screen task wizard with a centred progress bar, a step counter, and grouped form sections.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/wizard/wizard-2",
          "registryName": "wizard-2"
        },
        {
          "name": "Wizard 3",
          "slug": "wizard-3",
          "description": "Plan-selection step with radio rows beside a framed invoice preview and a draft status badge.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/wizard/wizard-3",
          "registryName": "wizard-3"
        },
        {
          "name": "Wizard 4",
          "slug": "wizard-4",
          "description": "Service-selection step: a two-band header, a checkable tile grid, and a live summary footer.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/wizard/wizard-4",
          "registryName": "wizard-4"
        },
        {
          "name": "Wizard 5",
          "slug": "wizard-5",
          "description": "Review-and-confirm step with per-section edit actions and a confirmation checkbox before submit.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/wizard/wizard-5",
          "registryName": "wizard-5"
        },
        {
          "name": "Wizard 6",
          "slug": "wizard-6",
          "description": "Running step showing overall progress with per-task done, active, pending, and warning states.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/wizard/wizard-6",
          "registryName": "wizard-6"
        },
        {
          "name": "Wizard 7",
          "slug": "wizard-7",
          "description": "Compact modal wizard: one question per step, dot pagination, and an inline back and continue pair.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/wizard/wizard-7",
          "registryName": "wizard-7"
        }
      ]
    },
    {
      "name": "Comments",
      "slug": "comments",
      "description": "Threads, annotations, review notes, mention composers, and resolve workflows",
      "category": "Workflows",
      "tags": [
        "comments",
        "collaboration",
        "threads",
        "review",
        "annotations"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/comments",
      "variants": [
        {
          "name": "Comments 1",
          "slug": "comments-1",
          "description": "Threaded discussion with nested replies, reactions, sort control, and a composer.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/comments/comments-1",
          "registryName": "comments-1"
        },
        {
          "name": "Comments 2",
          "slug": "comments-2",
          "description": "Inline document annotation with clickable highlighted ranges and a comments rail.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/comments/comments-2",
          "registryName": "comments-2"
        },
        {
          "name": "Comments 3",
          "slug": "comments-3",
          "description": "Code review thread pairing a diff panel with review notes and a suggested change.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/comments/comments-3",
          "registryName": "comments-3"
        },
        {
          "name": "Comments 4",
          "slug": "comments-4",
          "description": "Comment composer with mention autocomplete, attachment chips, and a formatting bar.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/comments/comments-4",
          "registryName": "comments-4"
        },
        {
          "name": "Comments 5",
          "slug": "comments-5",
          "description": "Comment inbox with All, Unresolved, and Mentions tabs plus per-row resolve actions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/comments/comments-5",
          "registryName": "comments-5"
        },
        {
          "name": "Comments 6",
          "slug": "comments-6",
          "description": "Canvas comment panel with numbered pin markers and a linked side rail of notes.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/comments/comments-6",
          "registryName": "comments-6"
        }
      ]
    },
    {
      "name": "Scheduling",
      "slug": "scheduling",
      "description": "Calendars, agendas, availability editors, time pickers, and booking surfaces",
      "category": "Workflows",
      "tags": [
        "scheduling",
        "calendar",
        "availability",
        "booking",
        "time"
      ],
      "tier": "pro",
      "count": 7,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/scheduling",
      "variants": [
        {
          "name": "Scheduling 1",
          "slug": "scheduling-1",
          "description": "Month calendar beside a scrollable day agenda, with event dots and a filterable list.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/scheduling/scheduling-1",
          "registryName": "scheduling-1"
        },
        {
          "name": "Scheduling 2",
          "slug": "scheduling-2",
          "description": "Compact time-range card with start and end selects and a wrap-around duration chip set.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/scheduling/scheduling-2",
          "registryName": "scheduling-2"
        },
        {
          "name": "Scheduling 3",
          "slug": "scheduling-3",
          "description": "New-schedule form in a framed card: attendee chips, date, times, attachments, and notes.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/scheduling/scheduling-3",
          "registryName": "scheduling-3"
        },
        {
          "name": "Scheduling 4",
          "slug": "scheduling-4",
          "description": "Deadline picker with quick presets above a calendar and a scrollable time-slot column.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/scheduling/scheduling-4",
          "registryName": "scheduling-4"
        },
        {
          "name": "Scheduling 5",
          "slug": "scheduling-5",
          "description": "Weekly availability editor with per-day switches and multiple bookable intervals.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/scheduling/scheduling-5",
          "registryName": "scheduling-5"
        },
        {
          "name": "Scheduling 6",
          "slug": "scheduling-6",
          "description": "Week timeline grid with an hour rail, positioned events, and a view segmented control.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/scheduling/scheduling-6",
          "registryName": "scheduling-6"
        },
        {
          "name": "Scheduling 7",
          "slug": "scheduling-7",
          "description": "Booking page with a meeting summary, a horizontal day strip, and a time-slot grid.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/scheduling/scheduling-7",
          "registryName": "scheduling-7"
        }
      ]
    },
    {
      "name": "App Sidebar",
      "slug": "app-sidebar",
      "description": "Application shells, sidebars, rails, and mobile navigation",
      "category": "Navigation",
      "tags": [
        "navigation",
        "sidebar",
        "shell",
        "layout",
        "app"
      ],
      "tier": "pro",
      "count": 7,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/app-sidebar",
      "variants": [
        {
          "name": "App Sidebar 1",
          "slug": "app-sidebar-1",
          "description": "Collapsible primary sidebar with grouped sections, badges, and a user menu.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-sidebar/app-sidebar-1",
          "registryName": "app-sidebar-1"
        },
        {
          "name": "App Sidebar 2",
          "slug": "app-sidebar-2",
          "description": "Icon rail sidebar with hover flyout submenus and tooltips.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-sidebar/app-sidebar-2",
          "registryName": "app-sidebar-2"
        },
        {
          "name": "App Sidebar 3",
          "slug": "app-sidebar-3",
          "description": "Sidebar with workspace switcher, scoped search, and pinned items.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-sidebar/app-sidebar-3",
          "registryName": "app-sidebar-3"
        },
        {
          "name": "App Sidebar 4",
          "slug": "app-sidebar-4",
          "description": "Dual sidebar pairing a compact icon rail with a contextual secondary panel.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-sidebar/app-sidebar-4",
          "registryName": "app-sidebar-4"
        },
        {
          "name": "App Sidebar 5",
          "slug": "app-sidebar-5",
          "description": "Sidebar with nested tree navigation and inline row actions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-sidebar/app-sidebar-5",
          "registryName": "app-sidebar-5"
        },
        {
          "name": "App Sidebar 6",
          "slug": "app-sidebar-6",
          "description": "Mobile drawer navigation with sheet, scrim, and collapsed app header.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-sidebar/app-sidebar-6",
          "registryName": "app-sidebar-6"
        },
        {
          "name": "App Sidebar 7",
          "slug": "app-sidebar-7",
          "description": "Full app shell composing sidebar, app header, breadcrumbs, and content region.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-sidebar/app-sidebar-7",
          "registryName": "app-sidebar-7"
        }
      ]
    },
    {
      "name": "Command Menu",
      "slug": "command-menu",
      "description": "Command palettes, quick search, and action menus",
      "category": "Navigation",
      "tags": [
        "navigation",
        "command",
        "palette",
        "search",
        "shortcuts"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/command-menu",
      "variants": [
        {
          "name": "Command Menu 1",
          "slug": "command-menu-1",
          "description": "Command palette with grouped results, keyboard hints, and recent commands.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/command-menu/command-menu-1",
          "registryName": "command-menu-1"
        },
        {
          "name": "Command Menu 2",
          "slug": "command-menu-2",
          "description": "Command menu with nested pages and back navigation between levels.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/command-menu/command-menu-2",
          "registryName": "command-menu-2"
        },
        {
          "name": "Command Menu 3",
          "slug": "command-menu-3",
          "description": "Search-first palette with typed filters and inline result previews.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/command-menu/command-menu-3",
          "registryName": "command-menu-3"
        },
        {
          "name": "Command Menu 4",
          "slug": "command-menu-4",
          "description": "Action menu that collects inline arguments and confirms before running.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/command-menu/command-menu-4",
          "registryName": "command-menu-4"
        },
        {
          "name": "Command Menu 5",
          "slug": "command-menu-5",
          "description": "Command palette that falls back to an AI ask mode when nothing matches.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/command-menu/command-menu-5",
          "registryName": "command-menu-5"
        },
        {
          "name": "Command Menu 6",
          "slug": "command-menu-6",
          "description": "Compact inline command popover anchored to a toolbar trigger.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/command-menu/command-menu-6",
          "registryName": "command-menu-6"
        }
      ]
    },
    {
      "name": "Data Table",
      "slug": "data-table",
      "description": "Tables with toolbars, filters, selection, inline editing, and detail panels",
      "category": "Data",
      "tags": [
        "data",
        "table",
        "grid",
        "filters",
        "pagination"
      ],
      "tier": "pro",
      "count": 8,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/data-table",
      "variants": [
        {
          "name": "Data Table 1",
          "slug": "data-table-1",
          "description": "Table with toolbar, faceted filters, and a column visibility menu.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/data-table/data-table-1",
          "registryName": "data-table-1"
        },
        {
          "name": "Data Table 2",
          "slug": "data-table-2",
          "description": "Table with row selection, a bulk action bar, and pagination.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/data-table/data-table-2",
          "registryName": "data-table-2"
        },
        {
          "name": "Data Table 3",
          "slug": "data-table-3",
          "description": "Table with inline cell editing and optimistic save states.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/data-table/data-table-3",
          "registryName": "data-table-3"
        },
        {
          "name": "Data Table 4",
          "slug": "data-table-4",
          "description": "Table with expandable row detail panels revealed in place.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/data-table/data-table-4",
          "registryName": "data-table-4"
        },
        {
          "name": "Data Table 5",
          "slug": "data-table-5",
          "description": "Table with sticky header, grouped rows, and a density toggle.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/data-table/data-table-5",
          "registryName": "data-table-5"
        },
        {
          "name": "Data Table 6",
          "slug": "data-table-6",
          "description": "Master-detail table with a synchronized side detail panel.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/data-table/data-table-6",
          "registryName": "data-table-6"
        },
        {
          "name": "Data Table 7",
          "slug": "data-table-7",
          "description": "Table demonstrating empty, loading skeleton, and error states.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/data-table/data-table-7",
          "registryName": "data-table-7"
        },
        {
          "name": "Data Table 8",
          "slug": "data-table-8",
          "description": "Wide table with a sticky first column and horizontal scroll affordances.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/data-table/data-table-8",
          "registryName": "data-table-8"
        }
      ]
    },
    {
      "name": "Dashboard",
      "slug": "dashboard",
      "description": "Metric grids, chart panels, status boards, and usage overviews",
      "category": "Data",
      "tags": [
        "data",
        "dashboard",
        "metrics",
        "charts",
        "analytics"
      ],
      "tier": "pro",
      "count": 14,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/dashboard",
      "variants": [
        {
          "name": "Dashboard 1",
          "slug": "dashboard-1",
          "description": "Metric card grid with sparklines and period-over-period delta indicators.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-1",
          "registryName": "dashboard-1"
        },
        {
          "name": "Dashboard 2",
          "slug": "dashboard-2",
          "description": "Dashboard with a primary chart panel, breakdown table, and date range control.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-2",
          "registryName": "dashboard-2"
        },
        {
          "name": "Dashboard 3",
          "slug": "dashboard-3",
          "description": "Widget grid with per-card overflow menus and mixed card spans.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-3",
          "registryName": "dashboard-3"
        },
        {
          "name": "Dashboard 4",
          "slug": "dashboard-4",
          "description": "Operations dashboard with a service status board and incident list.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-4",
          "registryName": "dashboard-4"
        },
        {
          "name": "Dashboard 5",
          "slug": "dashboard-5",
          "description": "Usage dashboard with quota meters, burn-down, and an upgrade call to action.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-5",
          "registryName": "dashboard-5"
        },
        {
          "name": "Dashboard 6",
          "slug": "dashboard-6",
          "description": "Analytics overview with a segmented control and comparison mode.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-6",
          "registryName": "dashboard-6"
        },
        {
          "name": "Dashboard 7",
          "slug": "dashboard-7",
          "description": "Dashboard showing loading skeletons and a first-run empty project state.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-7",
          "registryName": "dashboard-7"
        },
        {
          "name": "Dashboard 8",
          "slug": "dashboard-8",
          "description": "Module board with sparkline metrics and a sortable delivery table with progress rings.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-8",
          "registryName": "dashboard-8"
        },
        {
          "name": "Dashboard 9",
          "slug": "dashboard-9",
          "description": "Weekly worklog grid with a sticky people column, day allocations, and week navigation.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-9",
          "registryName": "dashboard-9"
        },
        {
          "name": "Dashboard 10",
          "slug": "dashboard-10",
          "description": "Metric explorer where a tab strip of six measures drives one large area chart.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-10",
          "registryName": "dashboard-10"
        },
        {
          "name": "Dashboard 11",
          "slug": "dashboard-11",
          "description": "Workforce coverage board with staffing bars, a demand chart, and a clearable action queue.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-11",
          "registryName": "dashboard-11"
        },
        {
          "name": "Dashboard 12",
          "slug": "dashboard-12",
          "description": "Payout desk with a headline balance, dual-series pace chart, and sweep lanes.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-12",
          "registryName": "dashboard-12"
        },
        {
          "name": "Dashboard 13",
          "slug": "dashboard-13",
          "description": "Quarterly scorecard pairing objectives with key results and a burn-up against plan.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-13",
          "registryName": "dashboard-13"
        },
        {
          "name": "Dashboard 14",
          "slug": "dashboard-14",
          "description": "Master-detail service board where selecting a service swaps the metrics, chart, and activity.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/dashboard/dashboard-14",
          "registryName": "dashboard-14"
        }
      ]
    },
    {
      "name": "App Dialog",
      "slug": "app-dialog",
      "description": "Dialogs, drawers, sheets, popovers, and menu overlays",
      "category": "Overlays",
      "tags": [
        "overlay",
        "dialog",
        "modal",
        "drawer",
        "popover"
      ],
      "tier": "pro",
      "count": 7,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/app-dialog",
      "variants": [
        {
          "name": "App Dialog 1",
          "slug": "app-dialog-1",
          "description": "Standard dialog with header, scrollable body, and a footer action pair.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-dialog/app-dialog-1",
          "registryName": "app-dialog-1"
        },
        {
          "name": "App Dialog 2",
          "slug": "app-dialog-2",
          "description": "Destructive confirmation dialog requiring the resource name to be typed.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-dialog/app-dialog-2",
          "registryName": "app-dialog-2"
        },
        {
          "name": "App Dialog 3",
          "slug": "app-dialog-3",
          "description": "Form dialog with field validation and a sticky footer.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-dialog/app-dialog-3",
          "registryName": "app-dialog-3"
        },
        {
          "name": "App Dialog 4",
          "slug": "app-dialog-4",
          "description": "Multi-step dialog with a progress indicator and back and next navigation.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-dialog/app-dialog-4",
          "registryName": "app-dialog-4"
        },
        {
          "name": "App Dialog 5",
          "slug": "app-dialog-5",
          "description": "Side drawer containing a form with an unsaved-changes guard.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-dialog/app-dialog-5",
          "registryName": "app-dialog-5"
        },
        {
          "name": "App Dialog 6",
          "slug": "app-dialog-6",
          "description": "Detail sheet with summary content, metadata, and secondary actions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-dialog/app-dialog-6",
          "registryName": "app-dialog-6"
        },
        {
          "name": "App Dialog 7",
          "slug": "app-dialog-7",
          "description": "Popover and dropdown set with menus, submenus, separators, and shortcuts.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/app-dialog/app-dialog-7",
          "registryName": "app-dialog-7"
        }
      ]
    },
    {
      "name": "Notifications",
      "slug": "notifications",
      "description": "Notification centers, toast stacks, activity inboxes, banners, and delivery preferences",
      "category": "Overlays",
      "tags": [
        "notifications",
        "alerts",
        "toast",
        "inbox",
        "activity"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/notifications",
      "variants": [
        {
          "name": "Notifications 1",
          "slug": "notifications-1",
          "description": "Notification center grouped by day with unread filters, per-row read toggles, and dismissal.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/notifications/notifications-1",
          "registryName": "notifications-1"
        },
        {
          "name": "Notifications 2",
          "slug": "notifications-2",
          "description": "Toast stack that collapses when idle, expands on hover, and pauses its auto-dismiss timers.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/notifications/notifications-2",
          "registryName": "notifications-2"
        },
        {
          "name": "Notifications 3",
          "slug": "notifications-3",
          "description": "Delivery preferences matrix across in-app, email, and push with quiet hours and a save bar.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/notifications/notifications-3",
          "registryName": "notifications-3"
        },
        {
          "name": "Notifications 4",
          "slug": "notifications-4",
          "description": "Activity inbox pairing a filterable list with a detail pane holding context and snooze actions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/notifications/notifications-4",
          "registryName": "notifications-4"
        },
        {
          "name": "Notifications 5",
          "slug": "notifications-5",
          "description": "Inline banner set covering info, warning, error with details, success, and usage limits.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/notifications/notifications-5",
          "registryName": "notifications-5"
        },
        {
          "name": "Notifications 6",
          "slug": "notifications-6",
          "description": "App bar bell with an unread badge and an anchored popover panel that closes on Escape.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/notifications/notifications-6",
          "registryName": "notifications-6"
        }
      ]
    },
    {
      "name": "Integrations",
      "slug": "integrations",
      "description": "Integration marketplaces, connection detail, API keys, webhooks, OAuth consent, and sync status",
      "category": "Workflows",
      "tags": [
        "integrations",
        "api keys",
        "webhooks",
        "oauth",
        "connections"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/integrations",
      "variants": [
        {
          "name": "Integrations 1",
          "slug": "integrations-1",
          "description": "Integration marketplace grid with category tabs, search, connect toggles, and an empty state.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/integrations/integrations-1",
          "registryName": "integrations-1"
        },
        {
          "name": "Integrations 2",
          "slug": "integrations-2",
          "description": "Connection detail pairing scope switches with an activity feed and a disconnect confirmation.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/integrations/integrations-2",
          "registryName": "integrations-2"
        },
        {
          "name": "Integrations 3",
          "slug": "integrations-3",
          "description": "API key table with masked secrets, reveal, copy, rotate, and revoke row actions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/integrations/integrations-3",
          "registryName": "integrations-3"
        },
        {
          "name": "Integrations 4",
          "slug": "integrations-4",
          "description": "Webhook endpoints beside an expandable delivery log with payloads and replay controls.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/integrations/integrations-4",
          "registryName": "integrations-4"
        },
        {
          "name": "Integrations 5",
          "slug": "integrations-5",
          "description": "OAuth consent screen with a workspace picker, scope list, and an authorized success state.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/integrations/integrations-5",
          "registryName": "integrations-5"
        },
        {
          "name": "Integrations 6",
          "slug": "integrations-6",
          "description": "Sync status dashboard with per-source progress meters, failure detail, and pause controls.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/integrations/integrations-6",
          "registryName": "integrations-6"
        }
      ]
    },
    {
      "name": "Editor",
      "slug": "editor",
      "description": "Rich text chrome, markdown split views, code editors, review modes, and document outlines",
      "category": "Workflows",
      "tags": [
        "editor",
        "writing",
        "markdown",
        "code",
        "document"
      ],
      "tier": "pro",
      "count": 5,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/editor",
      "variants": [
        {
          "name": "Editor 1",
          "slug": "editor-1",
          "description": "Rich text editor with a block type menu, mark toolbar, autosave state, and a word count bar.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/editor/editor-1",
          "registryName": "editor-1"
        },
        {
          "name": "Editor 2",
          "slug": "editor-2",
          "description": "Markdown workspace switching between write, split, and preview with live rendered output.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/editor/editor-2",
          "registryName": "editor-2"
        },
        {
          "name": "Editor 3",
          "slug": "editor-3",
          "description": "Code editor with closable file tabs, a line gutter, a minimap rail, and a status bar.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/editor/editor-3",
          "registryName": "editor-3"
        },
        {
          "name": "Editor 4",
          "slug": "editor-4",
          "description": "Suggestion review mode pairing inline highlights with an accept and dismiss side panel.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/editor/editor-4",
          "registryName": "editor-4"
        },
        {
          "name": "Editor 5",
          "slug": "editor-5",
          "description": "Long document reader with a collapsible outline rail and a focus mode that dims other sections.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/editor/editor-5",
          "registryName": "editor-5"
        }
      ]
    },
    {
      "name": "Settings Form",
      "slug": "settings-form",
      "description": "Settings pages, profile forms, member management, and API key surfaces",
      "category": "Forms",
      "tags": [
        "forms",
        "settings",
        "preferences",
        "profile",
        "account"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/settings-form",
      "variants": [
        {
          "name": "Settings Form 1",
          "slug": "settings-form-1",
          "description": "Settings page with section navigation and a sticky unsaved-changes save bar.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/settings-form/settings-form-1",
          "registryName": "settings-form-1"
        },
        {
          "name": "Settings Form 2",
          "slug": "settings-form-2",
          "description": "Profile form with avatar upload, field validation, and inline help text.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/settings-form/settings-form-2",
          "registryName": "settings-form-2"
        },
        {
          "name": "Settings Form 3",
          "slug": "settings-form-3",
          "description": "Preferences form with switches, radio cards, and segmented controls.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/settings-form/settings-form-3",
          "registryName": "settings-form-3"
        },
        {
          "name": "Settings Form 4",
          "slug": "settings-form-4",
          "description": "Team members management with role selects, invite row, and pending states.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/settings-form/settings-form-4",
          "registryName": "settings-form-4"
        },
        {
          "name": "Settings Form 5",
          "slug": "settings-form-5",
          "description": "API keys and integrations with reveal, copy, rotate, and revoke actions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/settings-form/settings-form-5",
          "registryName": "settings-form-5"
        },
        {
          "name": "Settings Form 6",
          "slug": "settings-form-6",
          "description": "Danger zone with staged destructive confirmations and consequence summaries.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/settings-form/settings-form-6",
          "registryName": "settings-form-6"
        }
      ]
    },
    {
      "name": "Analytics",
      "slug": "analytics",
      "description": "Charts, metric strips, funnels, cohort matrices, and reporting surfaces",
      "category": "Data",
      "tags": [
        "analytics",
        "charts",
        "metrics",
        "reporting",
        "dashboard"
      ],
      "tier": "pro",
      "count": 16,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/analytics",
      "variants": [
        {
          "name": "Analytics 1",
          "slug": "analytics-1",
          "description": "Metric strip with hover-scrubbable sparklines and a range segmented control.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-1",
          "registryName": "analytics-1"
        },
        {
          "name": "Analytics 2",
          "slug": "analytics-2",
          "description": "Area chart with crosshair, keyboard cursor, and period summary stats.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-2",
          "registryName": "analytics-2"
        },
        {
          "name": "Analytics 3",
          "slug": "analytics-3",
          "description": "Grouped bar chart with series toggles and a value-following tooltip.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-3",
          "registryName": "analytics-3"
        },
        {
          "name": "Analytics 4",
          "slug": "analytics-4",
          "description": "Stacked area chart with cumulative totals and a share-of-total mode.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-4",
          "registryName": "analytics-4"
        },
        {
          "name": "Analytics 5",
          "slug": "analytics-5",
          "description": "Donut chart with a bound legend and a hover-following centre total.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-5",
          "registryName": "analytics-5"
        },
        {
          "name": "Analytics 6",
          "slug": "analytics-6",
          "description": "Ranked source list with a segmented composition bar and row sparklines.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-6",
          "registryName": "analytics-6"
        },
        {
          "name": "Analytics 7",
          "slug": "analytics-7",
          "description": "Sparkline card grid with direction-aware deltas and a promoted detail panel.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-7",
          "registryName": "analytics-7"
        },
        {
          "name": "Analytics 8",
          "slug": "analytics-8",
          "description": "Conversion funnel with per-stage drop-off and worst-step highlighting.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-8",
          "registryName": "analytics-8"
        },
        {
          "name": "Analytics 9",
          "slug": "analytics-9",
          "description": "Activity heatmap with intensity legend, keyboard cursor, and day tooltips.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-9",
          "registryName": "analytics-9"
        },
        {
          "name": "Analytics 10",
          "slug": "analytics-10",
          "description": "Radial goal gauges with target ticks and animated attainment sweeps.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-10",
          "registryName": "analytics-10"
        },
        {
          "name": "Analytics 11",
          "slug": "analytics-11",
          "description": "Cohort retention matrix with pinned labels and value-driven shading.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-11",
          "registryName": "analytics-11"
        },
        {
          "name": "Analytics 12",
          "slug": "analytics-12",
          "description": "Horizontal bar ranking with sortable measures and inline value labels.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-12",
          "registryName": "analytics-12"
        },
        {
          "name": "Analytics 13",
          "slug": "analytics-13",
          "description": "Candlestick chart with a volume histogram and an OHLC tooltip.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-13",
          "registryName": "analytics-13"
        },
        {
          "name": "Analytics 14",
          "slug": "analytics-14",
          "description": "Scatter plot with quadrant guides, bubble sizing, and nearest-point hit testing.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-14",
          "registryName": "analytics-14"
        },
        {
          "name": "Analytics 15",
          "slug": "analytics-15",
          "description": "Bullet chart list with target markers, deltas, and sortable rows.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-15",
          "registryName": "analytics-15"
        },
        {
          "name": "Analytics 16",
          "slug": "analytics-16",
          "description": "Combo chart pairing bars with a trend line on a dual axis.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/analytics/analytics-16",
          "registryName": "analytics-16"
        }
      ]
    },
    {
      "name": "List",
      "slug": "list",
      "description": "Row lists, feeds, queues, leaderboards, trees, and selectable collections",
      "category": "Data",
      "tags": [
        "list",
        "rows",
        "feed",
        "queue",
        "leaderboard",
        "tree"
      ],
      "tier": "pro",
      "count": 12,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/list",
      "variants": [
        {
          "name": "List 1",
          "slug": "list-1",
          "description": "Metric rows that expand in place to reveal how each figure is defined.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-1",
          "registryName": "list-1"
        },
        {
          "name": "List 2",
          "slug": "list-2",
          "description": "Ranked spend list with a period switch, selection, and a footer action.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-2",
          "registryName": "list-2"
        },
        {
          "name": "List 3",
          "slug": "list-3",
          "description": "Security event feed with facet filtering and scroll-faded overflow.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-3",
          "registryName": "list-3"
        },
        {
          "name": "List 4",
          "slug": "list-4",
          "description": "Publishing queue reorderable by pointer drag or keyboard, with live status messages.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-4",
          "registryName": "list-4"
        },
        {
          "name": "List 5",
          "slug": "list-5",
          "description": "Selectable asset library with a bulk action bar and filter-driven empty state.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-5",
          "registryName": "list-5"
        },
        {
          "name": "List 6",
          "slug": "list-6",
          "description": "Webhook delivery log with composed outcome and endpoint filters and expandable payloads.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-6",
          "registryName": "list-6"
        },
        {
          "name": "List 7",
          "slug": "list-7",
          "description": "Supplier directory with live search, category filtering, and column labels.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-7",
          "registryName": "list-7"
        },
        {
          "name": "List 8",
          "slug": "list-8",
          "description": "Inbox with archive, snooze, and a collapsing row that offers undo.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-8",
          "registryName": "list-8"
        },
        {
          "name": "List 9",
          "slug": "list-9",
          "description": "Contact list with an alphabet jump rail and relationship filtering.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-9",
          "registryName": "list-9"
        },
        {
          "name": "List 10",
          "slug": "list-10",
          "description": "Incident runbook checklist with live progress and scroll-faded steps.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-10",
          "registryName": "list-10"
        },
        {
          "name": "List 11",
          "slug": "list-11",
          "description": "Support leaderboard with switchable measures, periods, and rank movement.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-11",
          "registryName": "list-11"
        },
        {
          "name": "List 12",
          "slug": "list-12",
          "description": "Recursive file tree with indent guides and full keyboard traversal.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/list/list-12",
          "registryName": "list-12"
        }
      ]
    },
    {
      "name": "Forms",
      "slug": "forms",
      "description": "Record creation and editing forms with validation, sections, and review states",
      "category": "Forms",
      "tags": [
        "form",
        "input",
        "validation",
        "fields",
        "submit",
        "record"
      ],
      "tier": "pro",
      "count": 12,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/forms",
      "variants": [
        {
          "name": "Forms 1",
          "slug": "forms-1",
          "description": "Label-left record form with a token field, live completion meter, and revert.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-1",
          "registryName": "forms-1"
        },
        {
          "name": "Forms 2",
          "slug": "forms-2",
          "description": "Two-column submission form with radio cards, validation, and a derived checklist.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-2",
          "registryName": "forms-2"
        },
        {
          "name": "Forms 3",
          "slug": "forms-3",
          "description": "Sectioned booking form with an editable line-items table and live totals.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-3",
          "registryName": "forms-3"
        },
        {
          "name": "Forms 4",
          "slug": "forms-4",
          "description": "Inline-edit property panel where one record row opens for editing at a time.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-4",
          "registryName": "forms-4"
        },
        {
          "name": "Forms 5",
          "slug": "forms-5",
          "description": "Provisioning form with subdomain availability, password strength, and a success state.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-5",
          "registryName": "forms-5"
        },
        {
          "name": "Forms 6",
          "slug": "forms-6",
          "description": "Checkout with country-driven regions, card formatting, and a live order summary.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-6",
          "registryName": "forms-6"
        },
        {
          "name": "Forms 7",
          "slug": "forms-7",
          "description": "Application form with a dropzone, radio cards, token input, and a completion meter.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-7",
          "registryName": "forms-7"
        },
        {
          "name": "Forms 8",
          "slug": "forms-8",
          "description": "Rule builder whose operators follow the selected field type, with a live test run.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-8",
          "registryName": "forms-8"
        },
        {
          "name": "Forms 9",
          "slug": "forms-9",
          "description": "Weekly opening hours with per-day intervals, overlap validation, and a live total.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-9",
          "registryName": "forms-9"
        },
        {
          "name": "Forms 10",
          "slug": "forms-10",
          "description": "Guest survey with a 0-10 scale, a rating matrix, and conditional follow-up questions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-10",
          "registryName": "forms-10"
        },
        {
          "name": "Forms 11",
          "slug": "forms-11",
          "description": "Create-environment dialog with a segmented kind picker and live slug availability.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-11",
          "registryName": "forms-11"
        },
        {
          "name": "Forms 12",
          "slug": "forms-12",
          "description": "Multi-step quote review with expand-to-edit sections and a running premium summary.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/forms/forms-12",
          "registryName": "forms-12"
        }
      ]
    },
    {
      "name": "Filtering",
      "slug": "filtering",
      "description": "Faceted filtering, query builders, and refinement controls over result sets",
      "category": "Data",
      "tags": [
        "filter",
        "facet",
        "refine",
        "search",
        "query",
        "sort"
      ],
      "tier": "pro",
      "count": 9,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/filtering",
      "variants": [
        {
          "name": "Filtering 1",
          "slug": "filtering-1",
          "description": "Faceted product rail with derived counts, a price range, and glaze swatches.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/filtering/filtering-1",
          "registryName": "filtering-1"
        },
        {
          "name": "Filtering 2",
          "slug": "filtering-2",
          "description": "Filter drawer with a scrolling body and a sticky live result count.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/filtering/filtering-2",
          "registryName": "filtering-2"
        },
        {
          "name": "Filtering 3",
          "slug": "filtering-3",
          "description": "Query builder whose editable chips drive a live table of records.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/filtering/filtering-3",
          "registryName": "filtering-3"
        },
        {
          "name": "Filtering 4",
          "slug": "filtering-4",
          "description": "Log explorer with severity toggles, a service picker, and a volume histogram.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/filtering/filtering-4",
          "registryName": "filtering-4"
        },
        {
          "name": "Filtering 5",
          "slug": "filtering-5",
          "description": "Property search with bed and bath steppers, a price range, and amenities.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/filtering/filtering-5",
          "registryName": "filtering-5"
        },
        {
          "name": "Filtering 6",
          "slug": "filtering-6",
          "description": "Candidate search driven by a skill token input, pay range, and seniority.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/filtering/filtering-6",
          "registryName": "filtering-6"
        },
        {
          "name": "Filtering 7",
          "slug": "filtering-7",
          "description": "Horizontal facet bar with dropdown pickers over a mixed-orientation asset grid.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/filtering/filtering-7",
          "registryName": "filtering-7"
        },
        {
          "name": "Filtering 8",
          "slug": "filtering-8",
          "description": "Flight filters with time-of-day and duration ranges plus per-airline fares.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/filtering/filtering-8",
          "registryName": "filtering-8"
        },
        {
          "name": "Filtering 9",
          "slug": "filtering-9",
          "description": "Scrollable cuisine pills above rating, price level, and dietary filters.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/filtering/filtering-9",
          "registryName": "filtering-9"
        }
      ]
    },
    {
      "name": "Feedback",
      "slug": "feedback",
      "description": "In-app feedback widgets, surveys, ratings, request boards, and triage inboxes",
      "category": "Workflows",
      "tags": [
        "feedback",
        "survey",
        "nps",
        "rating",
        "requests",
        "voting"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/feedback",
      "variants": [
        {
          "name": "Feedback 1",
          "slug": "feedback-1",
          "description": "In-app feedback widget with a type switch, screenshot attachment, and a sent state.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/feedback/feedback-1",
          "registryName": "feedback-1"
        },
        {
          "name": "Feedback 2",
          "slug": "feedback-2",
          "description": "Recommendation survey with an eleven-point scale and score-aware follow-up.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/feedback/feedback-2",
          "registryName": "feedback-2"
        },
        {
          "name": "Feedback 3",
          "slug": "feedback-3",
          "description": "Post-resolution rating with hover stars and reason chips that follow the score.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/feedback/feedback-3",
          "registryName": "feedback-3"
        },
        {
          "name": "Feedback 4",
          "slug": "feedback-4",
          "description": "Feature request board with vote toggles, status pills, and sort tabs.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/feedback/feedback-4",
          "registryName": "feedback-4"
        },
        {
          "name": "Feedback 5",
          "slug": "feedback-5",
          "description": "Feedback triage inbox pairing a source list with a taggable detail pane.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/feedback/feedback-5",
          "registryName": "feedback-5"
        },
        {
          "name": "Feedback 6",
          "slug": "feedback-6",
          "description": "Insights view with sentiment split, top themes, and daily response volume.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/feedback/feedback-6",
          "registryName": "feedback-6"
        }
      ]
    },
    {
      "name": "Support",
      "slug": "support",
      "description": "Help centers, ticket forms, conversation threads, chat widgets, and request lists",
      "category": "Workflows",
      "tags": [
        "support",
        "help",
        "tickets",
        "help center",
        "chat",
        "service desk"
      ],
      "tier": "pro",
      "count": 5,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/support",
      "variants": [
        {
          "name": "Support 1",
          "slug": "support-1",
          "description": "Help center home with search, topic cards, popular articles, and a contact row.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/support/support-1",
          "registryName": "support-1"
        },
        {
          "name": "Support 2",
          "slug": "support-2",
          "description": "Ticket form with inline article suggestions, priority-driven response time, and attachments.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/support/support-2",
          "registryName": "support-2"
        },
        {
          "name": "Support 3",
          "slug": "support-3",
          "description": "Ticket conversation thread with a reply composer and a timeline sidebar.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/support/support-3",
          "registryName": "support-3"
        },
        {
          "name": "Support 4",
          "slug": "support-4",
          "description": "Support chat widget answering from workspace data, with a handoff to a person.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/support/support-4",
          "registryName": "support-4"
        },
        {
          "name": "Support 5",
          "slug": "support-5",
          "description": "Request list with status pills, filter tabs, and per-ticket reply counts.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/support/support-5",
          "registryName": "support-5"
        }
      ]
    },
    {
      "name": "Billing",
      "slug": "billing",
      "description": "Invoice ledgers, plan managers, invoice builders, dunning queues, and usage meters",
      "category": "Workflows",
      "tags": [
        "billing",
        "invoices",
        "subscriptions",
        "plans",
        "payments",
        "usage"
      ],
      "tier": "pro",
      "count": 8,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/billing",
      "variants": [
        {
          "name": "Billing 1",
          "slug": "billing-1",
          "description": "Billing overview with a statement summary, past due recovery, and an invoice ledger.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/billing/billing-1",
          "registryName": "billing-1"
        },
        {
          "name": "Billing 2",
          "slug": "billing-2",
          "description": "Plan manager with entitlement cards, unsaved-change bar, and per-plan toggles.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/billing/billing-2",
          "registryName": "billing-2"
        },
        {
          "name": "Billing 3",
          "slug": "billing-3",
          "description": "New invoice wizard with a step indicator, customer details, and payment terms.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/billing/billing-3",
          "registryName": "billing-3"
        },
        {
          "name": "Billing 4",
          "slug": "billing-4",
          "description": "Recovery queue with retry metrics and an expandable failed-charge attempt log.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/billing/billing-4",
          "registryName": "billing-4"
        },
        {
          "name": "Billing 5",
          "slug": "billing-5",
          "description": "Change plan flow pairing tier selection with a live proration preview.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/billing/billing-5",
          "registryName": "billing-5"
        },
        {
          "name": "Billing 6",
          "slug": "billing-6",
          "description": "Payment methods with primary card selection, billing contacts, and tax details.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/billing/billing-6",
          "registryName": "billing-6"
        },
        {
          "name": "Billing 7",
          "slug": "billing-7",
          "description": "Usage and overage view with metered allowances, limits, and an estimated total.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/billing/billing-7",
          "registryName": "billing-7"
        },
        {
          "name": "Billing 8",
          "slug": "billing-8",
          "description": "Invoice detail with line items, totals, an activity timeline, and collection info.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/billing/billing-8",
          "registryName": "billing-8"
        }
      ]
    },
    {
      "name": "Chat",
      "slug": "chat",
      "description": "Team channels, direct messages, social threads, support widgets, group chats, and live streams",
      "category": "Workflows",
      "tags": [
        "chat",
        "messaging",
        "conversation",
        "inbox",
        "social",
        "support"
      ],
      "tier": "pro",
      "count": 6,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/chat",
      "variants": [
        {
          "name": "Chat 1",
          "slug": "chat-1",
          "description": "Team channel workspace with a channel sidebar, threaded messages, and a composer.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/chat/chat-1",
          "registryName": "chat-1"
        },
        {
          "name": "Chat 2",
          "slug": "chat-2",
          "description": "Direct message inbox with a conversation list, chat bubbles, and read receipts.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/chat/chat-2",
          "registryName": "chat-2"
        },
        {
          "name": "Chat 3",
          "slug": "chat-3",
          "description": "Social thread with a lead post, nested replies, reactions, and a reply composer.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/chat/chat-3",
          "registryName": "chat-3"
        },
        {
          "name": "Chat 4",
          "slug": "chat-4",
          "description": "Support chat widget with a transcript, quick replies, attachments, and a rating.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/chat/chat-4",
          "registryName": "chat-4"
        },
        {
          "name": "Chat 5",
          "slug": "chat-5",
          "description": "Group chat with image and file attachments, emoji reactions, and thread counts.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/chat/chat-5",
          "registryName": "chat-5"
        },
        {
          "name": "Chat 6",
          "slug": "chat-6",
          "description": "Live stream chat with a pinned notice, host and moderator badges, and a viewer list.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/chat/chat-6",
          "registryName": "chat-6"
        }
      ]
    },
    {
      "name": "File Manager",
      "slug": "file-manager",
      "description": "Drive explorers, asset grids, file detail panels, and upload queues",
      "category": "Data",
      "tags": [
        "files",
        "drive",
        "folders",
        "storage",
        "upload",
        "assets"
      ],
      "tier": "pro",
      "count": 4,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/file-manager",
      "variants": [
        {
          "name": "File Manager 1",
          "slug": "file-manager-1",
          "description": "Drive explorer with a folder tree, suggested folders, file table, and storage meter.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/file-manager/file-manager-1",
          "registryName": "file-manager-1"
        },
        {
          "name": "File Manager 2",
          "slug": "file-manager-2",
          "description": "Asset grid with breadcrumbs, type filters, folder cards, and a selection bar.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/file-manager/file-manager-2",
          "registryName": "file-manager-2"
        },
        {
          "name": "File Manager 3",
          "slug": "file-manager-3",
          "description": "File browser with a detail panel showing preview, metadata, sharing, and activity.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/file-manager/file-manager-3",
          "registryName": "file-manager-3"
        },
        {
          "name": "File Manager 4",
          "slug": "file-manager-4",
          "description": "Upload manager with a dropzone, per-file progress, retries, and a transfer summary.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/file-manager/file-manager-4",
          "registryName": "file-manager-4"
        }
      ]
    },
    {
      "name": "Monitoring",
      "slug": "monitoring",
      "description": "Live metric streams, service health overviews, alerts, incidents, uptime, and error budgets",
      "category": "Data",
      "tags": [
        "monitoring",
        "observability",
        "metrics",
        "charts",
        "alerts",
        "incidents",
        "uptime",
        "logs",
        "slo"
      ],
      "tier": "pro",
      "count": 10,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/monitoring",
      "variants": [
        {
          "name": "Monitoring 1",
          "slug": "monitoring-1",
          "description": "Platform health overview with KPI deltas, an interactive throughput chart, and an incident feed.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/monitoring/monitoring-1",
          "registryName": "monitoring-1"
        },
        {
          "name": "Monitoring 2",
          "slug": "monitoring-2",
          "description": "Live metric stream with a rolling window, pause control, threshold line, and peak stats.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/monitoring/monitoring-2",
          "registryName": "monitoring-2"
        },
        {
          "name": "Monitoring 3",
          "slug": "monitoring-3",
          "description": "Incident detail with a status selector, response timeline, update composer, and responders.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/monitoring/monitoring-3",
          "registryName": "monitoring-3"
        },
        {
          "name": "Monitoring 4",
          "slug": "monitoring-4",
          "description": "Alert inbox with firing, pending, and resolved tabs, sparklines, runbooks, and silencing.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/monitoring/monitoring-4",
          "registryName": "monitoring-4"
        },
        {
          "name": "Monitoring 5",
          "slug": "monitoring-5",
          "description": "Live log tail with level filters, follow mode, pause control, and expandable JSON context.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/monitoring/monitoring-5",
          "registryName": "monitoring-5"
        },
        {
          "name": "Monitoring 6",
          "slug": "monitoring-6",
          "description": "Uptime grid with per-day status bars, selectable windows, and per-service incident history.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/monitoring/monitoring-6",
          "registryName": "monitoring-6"
        },
        {
          "name": "Monitoring 7",
          "slug": "monitoring-7",
          "description": "Fleet table with region filters, sortable resource columns, and per-node utilisation meters.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/monitoring/monitoring-7",
          "registryName": "monitoring-7"
        },
        {
          "name": "Monitoring 8",
          "slug": "monitoring-8",
          "description": "Response time panel with percentile cards, a latency histogram, and a sortable endpoint table.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/monitoring/monitoring-8",
          "registryName": "monitoring-8"
        },
        {
          "name": "Monitoring 9",
          "slug": "monitoring-9",
          "description": "Live run queue grouped by state with progress rings, environments, and attention filtering.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/monitoring/monitoring-9",
          "registryName": "monitoring-9"
        },
        {
          "name": "Monitoring 10",
          "slug": "monitoring-10",
          "description": "Service level objectives with an error budget burn-down chart and per-objective budget bars.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/monitoring/monitoring-10",
          "registryName": "monitoring-10"
        }
      ]
    },
    {
      "name": "Navbar",
      "slug": "navbar",
      "description": "Application top bars, marketing headers, mega menus, breadcrumb toolbars, and mobile navigation",
      "category": "Navigation",
      "tags": [
        "navbar",
        "navigation",
        "header",
        "menu",
        "dropdown",
        "mega menu",
        "breadcrumb",
        "tabs",
        "mobile"
      ],
      "tier": "pro",
      "count": 14,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/navbar",
      "variants": [
        {
          "name": "Navbar 1",
          "slug": "navbar-1",
          "description": "Project header with a breadcrumb, tab row with a sliding underline, and an avatar stack.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-1",
          "registryName": "navbar-1"
        },
        {
          "name": "Navbar 2",
          "slug": "navbar-2",
          "description": "Compact breadcrumb toolbar with an invite popover, filter chips, sorting, and an overflow menu.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-2",
          "registryName": "navbar-2"
        },
        {
          "name": "Navbar 3",
          "slug": "navbar-3",
          "description": "Workspace switcher bar with organisation, searchable project, and environment selectors.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-3",
          "registryName": "navbar-3"
        },
        {
          "name": "Navbar 4",
          "slug": "navbar-4",
          "description": "Marketing header with animated dropdown panels and an accordion mobile sheet.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-4",
          "registryName": "navbar-4"
        },
        {
          "name": "Navbar 5",
          "slug": "navbar-5",
          "description": "Full-width mega menu header with grouped link columns and a footer call to action.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-5",
          "registryName": "navbar-5"
        },
        {
          "name": "Navbar 6",
          "slug": "navbar-6",
          "description": "App top bar with an expanding search, a notifications popover, and an account menu.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-6",
          "registryName": "navbar-6"
        },
        {
          "name": "Navbar 7",
          "slug": "navbar-7",
          "description": "Two-tier dashboard header with a primary row, tab row, and a contextual sub-navigation strip.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-7",
          "registryName": "navbar-7"
        },
        {
          "name": "Navbar 8",
          "slug": "navbar-8",
          "description": "Segmented tab bar with an animated pill indicator, an overflow view menu, and toolbar actions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-8",
          "registryName": "navbar-8"
        },
        {
          "name": "Navbar 9",
          "slug": "navbar-9",
          "description": "Commerce navbar with a category mega panel, a mini-cart popover, and a mobile drawer.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-9",
          "registryName": "navbar-9"
        },
        {
          "name": "Navbar 10",
          "slug": "navbar-10",
          "description": "Docs header with a version selector, command search, theme toggle, and collapsible mobile nav.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-10",
          "registryName": "navbar-10"
        },
        {
          "name": "Navbar 11",
          "slug": "navbar-11",
          "description": "Editor toolbar with an inline-editable title, save state, presence avatars, and a share popover.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-11",
          "registryName": "navbar-11"
        },
        {
          "name": "Navbar 12",
          "slug": "navbar-12",
          "description": "Floating translucent navbar that gains elevation on scroll, with a drop-down mobile menu.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-12",
          "registryName": "navbar-12"
        },
        {
          "name": "Navbar 13",
          "slug": "navbar-13",
          "description": "Centred-logo navbar with split links and a staggered full-screen overlay menu.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-13",
          "registryName": "navbar-13"
        },
        {
          "name": "Navbar 14",
          "slug": "navbar-14",
          "description": "Article header with a reading progress bar, table-of-contents menu, bookmark, and copy link.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/navbar/navbar-14",
          "registryName": "navbar-14"
        }
      ]
    },
    {
      "name": "Mobile",
      "slug": "mobile",
      "description": "Bottom tab bars, floating docks, expanding action buttons, bottom sheets, and full-screen mobile menus",
      "category": "Navigation",
      "tags": [
        "mobile",
        "navigation",
        "tab bar",
        "bottom bar",
        "bottom sheet",
        "floating action button",
        "dock",
        "drawer",
        "touch"
      ],
      "tier": "pro",
      "count": 5,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/mobile",
      "variants": [
        {
          "name": "Mobile 1",
          "slug": "mobile-1",
          "description": "Five-tab bottom bar with a spring indicator, unread badge, and a crossfading panel per tab.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/mobile/mobile-1",
          "registryName": "mobile-1"
        },
        {
          "name": "Mobile 2",
          "slug": "mobile-2",
          "description": "Expanding action button that fans out labelled quick actions over a blurred scrim.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/mobile/mobile-2",
          "registryName": "mobile-2"
        },
        {
          "name": "Mobile 3",
          "slug": "mobile-3",
          "description": "Floating dock that morphs into a full-width search field with a results panel above it.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/mobile/mobile-3",
          "registryName": "mobile-3"
        },
        {
          "name": "Mobile 4",
          "slug": "mobile-4",
          "description": "Bottom bar with a two-snap navigation sheet holding shortcut tiles and secondary destinations.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/mobile/mobile-4",
          "registryName": "mobile-4"
        },
        {
          "name": "Mobile 5",
          "slug": "mobile-5",
          "description": "Top app bar with a segmented control and a full-screen menu with staggered, collapsible sections.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/mobile/mobile-5",
          "registryName": "mobile-5"
        }
      ]
    },
    {
      "name": "Empty State",
      "slug": "empty-state",
      "description": "First-run screens, no-result states, all-caught-up views, load failures, and dropzones",
      "category": "Data",
      "tags": [
        "empty",
        "zero state",
        "onboarding",
        "no results",
        "error",
        "upload"
      ],
      "tier": "pro",
      "count": 5,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/empty-state",
      "variants": [
        {
          "name": "Empty State 1",
          "slug": "empty-state-1",
          "description": "First-run workspace with a ghosted preview of the future table and three starting paths.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/empty-state/empty-state-1",
          "registryName": "empty-state-1"
        },
        {
          "name": "Empty State 2",
          "slug": "empty-state-2",
          "description": "No search results with the query echoed, removable filter chips, and suggested searches.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/empty-state/empty-state-2",
          "registryName": "empty-state-2"
        },
        {
          "name": "Empty State 3",
          "slug": "empty-state-3",
          "description": "All caught up view summarising the day's work and offering optional next actions.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/empty-state/empty-state-3",
          "registryName": "empty-state-3"
        },
        {
          "name": "Empty State 4",
          "slug": "empty-state-4",
          "description": "Failed to load state with request details, a trace ID, and a retry affordance.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/empty-state/empty-state-4",
          "registryName": "empty-state-4"
        },
        {
          "name": "Empty State 5",
          "slug": "empty-state-5",
          "description": "Empty folder dropzone with drag feedback, supported formats, and a storage footnote.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/empty-state/empty-state-5",
          "registryName": "empty-state-5"
        }
      ]
    },
    {
      "name": "Paywall",
      "slug": "paywall",
      "description": "Content locks, feature gates, plan pickers, usage caps, and upgrade prompts",
      "category": "Auth & Onboarding",
      "tags": [
        "paywall",
        "upgrade",
        "billing",
        "gate",
        "pricing",
        "trial"
      ],
      "tier": "pro",
      "count": 7,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/paywall",
      "variants": [
        {
          "name": "Paywall 1",
          "slug": "paywall-1",
          "description": "Article content lock with a fade-out preview and an inline membership card.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/paywall/paywall-1",
          "registryName": "paywall-1"
        },
        {
          "name": "Paywall 2",
          "slug": "paywall-2",
          "description": "Feature-gate dialog listing what the upgrade unlocks, with a dismiss action.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/paywall/paywall-2",
          "registryName": "paywall-2"
        },
        {
          "name": "Paywall 3",
          "slug": "paywall-3",
          "description": "Three-plan comparison with a monthly and yearly switch and a marked current plan.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/paywall/paywall-3",
          "registryName": "paywall-3"
        },
        {
          "name": "Paywall 4",
          "slug": "paywall-4",
          "description": "Usage-cap notice with per-quota meters and a top-up or upgrade choice.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/paywall/paywall-4",
          "registryName": "paywall-4"
        },
        {
          "name": "Paywall 5",
          "slug": "paywall-5",
          "description": "Trial-expired card showing retained data and one-click reactivation on file.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/paywall/paywall-5",
          "registryName": "paywall-5"
        },
        {
          "name": "Paywall 6",
          "slug": "paywall-6",
          "description": "Metered reads counter with an email capture and a sign-in alternative.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/paywall/paywall-6",
          "registryName": "paywall-6"
        },
        {
          "name": "Paywall 7",
          "slug": "paywall-7",
          "description": "Seat-level gate that routes an upgrade request to the workspace admins.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/paywall/paywall-7",
          "registryName": "paywall-7"
        }
      ]
    },
    {
      "name": "Authentication",
      "slug": "authentication",
      "description": "Sign-in, sign-up, and account recovery screens for web applications",
      "category": "Auth & Onboarding",
      "tags": [
        "auth",
        "login",
        "signup",
        "sso",
        "passkey",
        "onboarding"
      ],
      "tier": "pro",
      "count": 14,
      "newCount": 0,
      "href": "https://pro.reactbits.dev/docs/app-ui/authentication",
      "variants": [
        {
          "name": "Authentication 1",
          "slug": "authentication-1",
          "description": "Centered sign-in card with a password reveal, keep-me-signed-in, and a three-up provider row.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-1",
          "registryName": "authentication-1"
        },
        {
          "name": "Authentication 2",
          "slug": "authentication-2",
          "description": "Provider-first sign-in column that swaps the email field for a company domain when SSO is chosen.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-2",
          "registryName": "authentication-2"
        },
        {
          "name": "Authentication 3",
          "slug": "authentication-3",
          "description": "Split sign-in with a rotating customer quote, author avatar, and a framed stat strip.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-3",
          "registryName": "authentication-3"
        },
        {
          "name": "Authentication 4",
          "slug": "authentication-4",
          "description": "Two-step email then password flow that recalls the matched account before asking for a secret.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-4",
          "registryName": "authentication-4"
        },
        {
          "name": "Authentication 5",
          "slug": "authentication-5",
          "description": "Magic-link confirmation with a delivery summary, resend countdown, and a way back to the form.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-5",
          "registryName": "authentication-5"
        },
        {
          "name": "Authentication 6",
          "slug": "authentication-6",
          "description": "Six-digit code entry with paste support, auto-verify, resend timer, and a recovery-code mode.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-6",
          "registryName": "authentication-6"
        },
        {
          "name": "Authentication 7",
          "slug": "authentication-7",
          "description": "Sign-up card with a segmented strength meter and a live two-column password requirement list.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-7",
          "registryName": "authentication-7"
        },
        {
          "name": "Authentication 8",
          "slug": "authentication-8",
          "description": "Enterprise SSO screen that detects the identity provider from the email domain as you type.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-8",
          "registryName": "authentication-8"
        },
        {
          "name": "Authentication 9",
          "slug": "authentication-9",
          "description": "Passkey sign-in with a device picker, a waiting state, and fallbacks to password or email link.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-9",
          "registryName": "authentication-9"
        },
        {
          "name": "Authentication 10",
          "slug": "authentication-10",
          "description": "Account chooser listing remembered profiles with session status and an add-account row.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-10",
          "registryName": "authentication-10"
        },
        {
          "name": "Authentication 11",
          "slug": "authentication-11",
          "description": "Workspace picker with search, invitations, an empty state, and scroll fades over the list.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-11",
          "registryName": "authentication-11"
        },
        {
          "name": "Authentication 12",
          "slug": "authentication-12",
          "description": "Invitation acceptance split with the inviting teammate, shared projects, and a member stack.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-12",
          "registryName": "authentication-12"
        },
        {
          "name": "Authentication 13",
          "slug": "authentication-13",
          "description": "Password reset with match validation and the device sessions the change will end.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-13",
          "registryName": "authentication-13"
        },
        {
          "name": "Authentication 14",
          "slug": "authentication-14",
          "description": "Sign-in approval challenge showing request details, approve or block, and recent activity.",
          "isNew": false,
          "href": "https://pro.reactbits.dev/docs/app-ui/authentication/authentication-14",
          "registryName": "authentication-14"
        }
      ]
    }
  ],
  "templates": [
    {
      "name": "SaaS",
      "slug": "saas-landing",
      "description": "Vibrant landing page for SaaS products with rounded frame and modern animations",
      "tags": [
        "landing",
        "saas",
        "dark-mode",
        "accessible",
        "nextjs"
      ],
      "tier": "ultimate",
      "isFree": false,
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/templates/saas-landing",
      "videoUrl": "https://cdn.reactbits.dev/saas-preview.mp4",
      "livePreviewUrl": "https://rbp-saas-template.vercel.app/",
      "buyUrl": "https://buy.polar.sh/polar_cl_9XcGLwoYEwKaCxaf911yg2vbB9aoOR29xmniS3q7dxa"
    },
    {
      "name": "Minimal",
      "slug": "minimal-landing",
      "description": "Clean minimal landing page with WebGL shader cursor and smooth animations",
      "tags": [
        "landing",
        "minimal",
        "webgl",
        "dark-mode",
        "accessible"
      ],
      "tier": "ultimate",
      "isFree": false,
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/templates/minimal-landing",
      "videoUrl": "https://cdn.reactbits.dev/minimal-preview.mp4",
      "livePreviewUrl": "https://rbp-minimal-template.vercel.app/",
      "buyUrl": "https://buy.polar.sh/polar_cl_DksecCqHdHdxhnU5Dfolm7l0Imiab8Fd18Nbo1jptCo"
    },
    {
      "name": "Agency",
      "slug": "agency-site",
      "description": "Creative agency landing with WebGL effects, GSAP animations, and smooth scrolling",
      "tags": [
        "agency",
        "portfolio",
        "webgl",
        "gsap",
        "dark-mode"
      ],
      "tier": "ultimate",
      "isFree": false,
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/templates/agency-site",
      "videoUrl": "https://cdn.reactbits.dev/agency-preview.mp4",
      "livePreviewUrl": "https://rbp-agency-template.vercel.app/",
      "buyUrl": "https://buy.polar.sh/polar_cl_hlW2Mfy5yIO5Yjf6GsaGysQgEiBsPqSVsplDk2A6je2"
    },
    {
      "name": "Finance",
      "slug": "finance-landing",
      "description": "Professional fintech landing with 3D backgrounds, animated stats, and trust signals",
      "tags": [
        "landing",
        "finance",
        "fintech",
        "dark-mode",
        "accessible"
      ],
      "tier": "ultimate",
      "isFree": false,
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/templates/finance-landing",
      "videoUrl": "https://cdn.reactbits.dev/finance-preview.mp4",
      "livePreviewUrl": "https://rbp-finance-template.vercel.app/",
      "buyUrl": "https://buy.polar.sh/polar_cl_t6ldlyhQLRvp1WUEAuQdQfbHF5NvcGv9UhuXZ0yXw5M"
    },
    {
      "name": "AI SaaS",
      "slug": "ai-saas-landing",
      "description": "AI product landing with WebGL fluid cursor, GSAP animations, and image bulge effects",
      "tags": [
        "landing",
        "ai",
        "saas",
        "webgl",
        "gsap",
        "dark-mode"
      ],
      "tier": "ultimate",
      "isFree": false,
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/templates/ai-saas-landing",
      "videoUrl": "https://cdn.reactbits.dev/ai-saas-preview.mp4",
      "livePreviewUrl": "https://rbp-ai-saas-template.vercel.app/",
      "buyUrl": "https://buy.polar.sh/polar_cl_7GHi3zQ6TRNfpKbVCYs827HCfPStEhO5ygCrQ03QuoP"
    },
    {
      "name": "Shader",
      "slug": "shader-template",
      "description": "Bold landing page with full-screen WebGL shaders, fluid color gradients, and immersive scroll-driven scenes",
      "tags": [
        "landing",
        "webgl",
        "shader",
        "dark-mode",
        "accessible"
      ],
      "tier": "ultimate",
      "isFree": false,
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/templates/shader-template",
      "videoUrl": "https://cdn.reactbits.dev/shader-preview.mp4",
      "livePreviewUrl": "https://rbp-shader-template.vercel.app/",
      "buyUrl": "https://buy.polar.sh/polar_cl_WATG08yk3EKiQppGKOMhKmDWSYN1zYTtMX0UN1RgYIA"
    },
    {
      "name": "Wireframe",
      "slug": "wireframe-template",
      "description": "Architectural landing page with wireframe 3D models, technical typography, and blueprint-inspired layouts",
      "tags": [
        "landing",
        "3d",
        "webgl",
        "minimal",
        "dark-mode"
      ],
      "tier": "ultimate",
      "isFree": false,
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/templates/wireframe-template",
      "videoUrl": "https://cdn.reactbits.dev/wireframe-preview.mp4",
      "livePreviewUrl": "https://rbp-wireframe-template.vercel.app/",
      "buyUrl": "https://buy.polar.sh/polar_cl_riNb8tpVFoV7XHNSjCiIoB6RfK8yZvfvEBDED3tVv32"
    },
    {
      "name": "Portfolio",
      "slug": "portfolio-template",
      "description": "Free personal portfolio template with smooth animations, project case studies, and a minimal aesthetic",
      "tags": [
        "portfolio",
        "personal",
        "minimal",
        "free",
        "dark-mode"
      ],
      "tier": "starter",
      "isFree": true,
      "isNew": false,
      "href": "https://pro.reactbits.dev/docs/templates/portfolio-template",
      "videoUrl": "https://cdn.reactbits.dev/portfolio-preview.mp4",
      "livePreviewUrl": "https://rbp-portfolio.vercel.app/",
      "buyUrl": null
    },
    {
      "name": "8 Bit",
      "slug": "8-bit-template",
      "description": "Retro pixel-art landing page with pixel effects, a WebGL globe, and an 8-bit flame shader",
      "tags": [
        "landing",
        "retro",
        "pixel-art",
        "dark-mode",
        "accessible"
      ],
      "tier": "ultimate",
      "isFree": false,
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/templates/8-bit-template",
      "videoUrl": "https://cdn.reactbits.dev/8-bit-preview.mp4",
      "livePreviewUrl": "https://rbp-8-bit-template.vercel.app/",
      "buyUrl": "https://buy.polar.sh/polar_cl_YvbM5I7lVJyqYuE3b4BQo4W1p5BEkO9R0GHPJ2d5pne"
    },
    {
      "name": "AI App",
      "slug": "ai-app-template",
      "description": "Minimal landing page with scroll-driven set pieces, a WebGL hero, and a pinned phone walkthrough",
      "tags": [
        "landing",
        "ai",
        "app",
        "dark-mode",
        "accessible"
      ],
      "tier": "ultimate",
      "isFree": false,
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/templates/ai-app-template",
      "videoUrl": "https://cdn.reactbits.dev/ai-app-preview.mp4",
      "livePreviewUrl": "https://rbp-ai-app-template.vercel.app/",
      "buyUrl": "https://buy.polar.sh/polar_cl_qL7edVhssVnUW3gw0TmesSLWx2Tjvhi4wqbR11GvAnn"
    },
    {
      "name": "Security",
      "slug": "security-template",
      "description": "Dark-first editorial landing page with a WebGL curtain reveal, ASCII art, and chamfered UI",
      "tags": [
        "landing",
        "security",
        "saas",
        "dark-mode",
        "accessible"
      ],
      "tier": "ultimate",
      "isFree": false,
      "isNew": true,
      "href": "https://pro.reactbits.dev/docs/templates/security-template",
      "videoUrl": "https://cdn.reactbits.dev/security-preview.mp4",
      "livePreviewUrl": "https://rbp-security-template.vercel.app/",
      "buyUrl": "https://buy.polar.sh/polar_cl_InEx9Ps0QmnMvfKWbiNu59VxEevRw4Gt0QpG51BOeQl"
    }
  ],
  "agentKit": [
    {
      "name": "Apple Minimal",
      "slug": "apple-minimal",
      "kind": "skill",
      "category": "Product",
      "tags": [
        "apple",
        "minimal",
        "product",
        "typography",
        "hardware",
        "restraint"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build product landing pages with Apple's restraint: one idea per viewport, a giant type scale, generous negative space, and the product as the only hero.",
      "whenToUse": "Use when the user asks for an Apple-like, minimal, premium or product-first landing page, names Apple, Linear, Vercel or Stripe as a reference, wants a very large hero type scale with generous whitespace, or asks to make a page feel expensive and uncluttered.",
      "preview": "The Apple look is not \"clean and minimal\". It is a set of hard rules that most\nagents break instantly: exactly one idea per full-viewport section, a type scale\nthat jumps 3–4 steps between headline and body with no timid mid-sizes, an\n8-point spacing grid where vertical rhythm is measured in hundreds of pixels,\nand a colour palette of two neutrals plus the product's own colours.\n\nThis skill encodes the composition, type, spacing, motion, and most importantly,\nthe 38 anti-patterns that make an \"Apple-inspired\" page read as a cheap\nimitation: gradient headline text, glassmorphism everywhere, three-up feature\ncard grids, emoji icons, rounded-full pill badges above every heading, and\nsection padding that never exceeds `py-24`.",
      "outline": [
        "1. The core idea",
        "2. Page architecture",
        "3. Type scale",
        "4. Spacing system",
        "5. Colour",
        "6. Grid and containers",
        "7. Navigation",
        "8. Hero",
        "9. Feature screens",
        "10. Motion",
        "11. Imagery and media",
        "12. Buttons and links",
        "13. Anti-patterns: what makes a page fail this style",
        "14. Responsive behaviour",
        "15. Accessibility",
        "16. Performance",
        "17. Implementation notes",
        "18. Pairs well with React Bits Pro (optional)",
        "19. Self-verification loop"
      ],
      "wordCount": 3692,
      "updated": "2026-02-04",
      "pairsWith": [
        "prompt-saas",
        "prompt-consumer-hardware",
        "recipe-product-launch"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/skills/apple-minimal",
      "showcase": [
        {
          "title": "Hero",
          "image": "library-showcase/apple-minimal-hero.webp"
        },
        {
          "title": "Feature screen",
          "image": "library-showcase/apple-minimal-feature.webp"
        },
        {
          "title": "Tech specs",
          "image": "library-showcase/apple-minimal-specs.webp"
        }
      ]
    },
    {
      "name": "Corporate Trust",
      "slug": "corporate-trust",
      "kind": "skill",
      "category": "Enterprise",
      "tags": [
        "enterprise",
        "b2b",
        "fintech",
        "trust",
        "credibility",
        "conversion"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build enterprise, finance and healthcare pages where credibility is the entire design objective: a conservative palette, a ranked trust ladder, dense organised proof and a demo-request form that a procurement committee finds legible.",
      "whenToUse": "Use when the user is building an enterprise, B2B, finance, insurance, healthcare or government page, mentions compliance, SOC 2, HIPAA, procurement, security or trust signals, wants a demo-request or contact-sales flow, or asks for a conservative and credible design a committee will approve.",
      "preview": "Enterprise trust is not \"a blue gradient and three glass cards\". It is a design\nlanguage justified by buyer psychology: long sales cycles, multiple stakeholders,\nand risk aversion. Credibility comes from real proof placed high, certifications\ntreated as design elements, dense but organised information, and motion so minimal\nit never looks like a consumer app trying too hard.\n\nThis skill encodes a conservative type scale, the exact blue-family palette and how\nto use it without looking generic, a ranked trust ladder, data and metrics\ntypography, density rules, mega-menu justification criteria, a demo-form spec, 34\nnumbered anti-patterns, an accessibility standard tied to procurement requirements,\nand a self-verification loop.",
      "outline": [
        "1. The core idea",
        "2. Page architecture for the enterprise buyer journey",
        "3. Type scale",
        "4. Colour system",
        "5. The trust ladder",
        "6. Data and metrics presentation",
        "7. Density rules",
        "8. Navigation and mega-menus",
        "9. Hero and proof sections",
        "10. Pricing, forms and motion",
        "11. Anti-patterns: what makes a page fail this style",
        "12. Responsive behaviour",
        "13. Accessibility: procurement-grade",
        "14. Performance",
        "15. Implementation notes",
        "16. Pairs well with React Bits Pro (optional)",
        "17. Self-verification loop"
      ],
      "wordCount": 4021,
      "updated": "2026-02-04",
      "pairsWith": [
        "prompt-fintech",
        "prompt-saas",
        "recipe-saas-homepage"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/skills/corporate-trust",
      "showcase": [
        {
          "title": "Hero and logo wall",
          "image": "library-showcase/corporate-trust-hero.webp"
        },
        {
          "title": "Case study with evidence",
          "image": "library-showcase/corporate-trust-proof.webp"
        },
        {
          "title": "Security and compliance",
          "image": "library-showcase/corporate-trust-security.webp"
        }
      ]
    },
    {
      "name": "Editorial",
      "slug": "editorial",
      "kind": "skill",
      "category": "Editorial",
      "tags": [
        "editorial",
        "magazine",
        "typography",
        "serif",
        "print",
        "grid"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build magazine-grade editorial landing pages with a real serif display face, an asymmetric 12-column grid, controlled measure in ch, correct drop caps and pull quotes, hairline rules, and images that bleed and break the grid.",
      "whenToUse": "Use when the user wants a magazine, publication, blog, essay or editorial layout, mentions serif display type, drop caps, pull quotes, hairline rules or asymmetric grids, or asks for a page that reads like print.",
      "preview": "Editorial is not \"a centred blog post in a serif font\". It is a print-derived\ntypographic system - a serif display face paired with a text face at an exact\nmeasure, an asymmetric 12-column grid with real gutters, a baseline rhythm, and\npaper-and-ink colour that is never pure white on pure black. Drop caps and pull\nquotes are placed by rule, not decoration, and images bleed past the text column.\n\nThis skill encodes the column grid with exact spans and gutters, a type scale\nwith optical sizing and a measure in ch for every role, the correct way to build\na drop cap and a pull quote, a webfont loading strategy that avoids layout shift,\na 32-item numbered anti-patterns list, and a self-verification loop you run\nagainst your own render.",
      "outline": [
        "1. The core idea",
        "2. Page architecture",
        "3. The column grid",
        "4. Type scale",
        "5. Vertical rhythm and baseline grid",
        "6. Colour",
        "7. Rules, hairlines and dividers",
        "8. Drop caps and pull quotes",
        "9. Image treatment and captions",
        "10. Navigation",
        "11. Masthead and hero",
        "12. Article-style body sections",
        "13. Anti-patterns - what makes a page fail this style",
        "14. Responsive behaviour",
        "15. Accessibility",
        "16. Performance",
        "17. Implementation notes",
        "18. Pairs well with React Bits Pro (optional)",
        "19. Self-verification loop"
      ],
      "wordCount": 4495,
      "updated": "2026-02-04",
      "pairsWith": [
        "prompt-agency",
        "prompt-real-estate",
        "recipe-agency-homepage"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/skills/editorial",
      "showcase": [
        {
          "title": "Opening spread",
          "image": "library-showcase/editorial-spread.webp"
        },
        {
          "title": "Feature and pull quote",
          "image": "library-showcase/editorial-feature.webp"
        },
        {
          "title": "Issue index",
          "image": "library-showcase/editorial-index.webp"
        }
      ]
    },
    {
      "name": "Luxury Serif",
      "slug": "luxury-serif",
      "kind": "skill",
      "category": "Premium",
      "tags": [
        "luxury",
        "serif",
        "editorial",
        "fashion",
        "hospitality",
        "typography"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build high-end fashion, hospitality and jewellery pages where restraint reads as expensive: a high-contrast display serif, wide small-caps tracking, hairline rules and slow, deliberate motion.",
      "whenToUse": "Use when the user is building a fashion, jewellery, hospitality, beauty, watch or luxury brand page, asks for an elegant, high-end, refined or understated aesthetic, or wants high-contrast serif type, wide small-caps tracking and slow deliberate motion.",
      "preview": "The luxury look is not \"a serif font and a gold button\". It is a discipline of\nsubtraction: an enormous Didone display serif, almost no colour, positive tracking\nin exactly two places, full-bleed art-directed photography, and motion that barely\nmoves. Miss any piece and the page collapses into a SaaS template wearing Playfair\nDisplay.\n\nThis skill gives copy-pasteable Tailwind values for type scale, stroke contrast,\noptical-size guardrails, warm and cool neutral palettes, photography art direction,\n34 anti-patterns, AA-safe contrast rules that preserve hairlines, and a\nself-verification loop.",
      "outline": [
        "1. The core idea",
        "2. Page architecture",
        "3. Typography: the display serif",
        "4. Letter-spacing: the small-caps rule",
        "5. Colour: warm and cool neutral palettes",
        "6. Photography and art direction",
        "7. Full-bleed and edge-to-edge treatment",
        "8. Navigation",
        "9. Hero",
        "10. Product and property presentation",
        "11. Motion",
        "12. Buttons and links",
        "13. Anti-patterns: what makes a page fail this style",
        "14. Responsive behaviour",
        "15. Accessibility: keeping the style AA-safe",
        "16. Performance",
        "17. Implementation notes",
        "18. Pairs well with React Bits Pro (optional)",
        "19. Self-verification loop"
      ],
      "wordCount": 4348,
      "updated": "2026-02-04",
      "pairsWith": [
        "prompt-real-estate",
        "prompt-ecommerce-brand",
        "recipe-agency-homepage"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/skills/luxury-serif",
      "showcase": [
        {
          "title": "Full-bleed hero",
          "image": "library-showcase/luxury-serif-hero.webp"
        },
        {
          "title": "Material study",
          "image": "library-showcase/luxury-serif-craft.webp"
        },
        {
          "title": "Residence and price",
          "image": "library-showcase/luxury-serif-residence.webp"
        }
      ]
    },
    {
      "name": "Neobrutalism",
      "slug": "neobrutalism",
      "kind": "skill",
      "category": "Expressive",
      "tags": [
        "neobrutalism",
        "brutalist",
        "expressive",
        "borders",
        "shadows",
        "bold"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build loud neobrutalist landing pages with 3px black borders, hard offset shadows with zero blur, saturated flat colour blocks, and chunky type that physically moves when you press it.",
      "whenToUse": "Use when the user asks for a brutalist, neobrutalist, bold, loud, playful or retro-web look, mentions thick black borders, hard offset shadows with no blur, or saturated flat colour blocks, or wants a page with strong personality rather than restraint.",
      "preview": "Neobrutalism is not \"a normal SaaS page with border-2 bolted on\". It is a\nstrict physical system - hard offset shadows measured in exact pixels, an\nultra-heavy type scale that starts at 800 weight, four saturated colours\nallocated by role, and interactive states that translate the element into its\nown shadow on press. Get one value wrong and it collapses into a generic card\ngrid with black outlines.\n\nThis skill encodes the border and shadow mechanic in exact px and Tailwind\nclasses, a type scale table with weights most agents never reach, a 34-item\nnumbered anti-patterns list, the snappy stepped motion timings that separate\nreal neobrutalism from eased corporate animation, and a self-verification loop\nyou run against your own render.",
      "outline": [
        "1. The core idea",
        "2. Page architecture",
        "3. Type scale",
        "4. The border and shadow system",
        "5. Colour system",
        "6. Grid and containers",
        "7. Navigation",
        "8. Hero",
        "9. Feature sections",
        "10. Buttons and interactive states",
        "11. Motion",
        "12. Imagery treatment",
        "13. Anti-patterns - what makes a page fail this style",
        "14. Responsive behaviour",
        "15. Accessibility",
        "16. Performance",
        "17. Implementation notes",
        "18. Pairs well with React Bits Pro (optional)",
        "19. Self-verification loop"
      ],
      "wordCount": 4495,
      "updated": "2026-02-04",
      "pairsWith": [
        "prompt-developer-tool",
        "prompt-agency",
        "recipe-saas-homepage"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/skills/neobrutalism",
      "showcase": [
        {
          "title": "Hero and hard shadows",
          "image": "library-showcase/neobrutalism-hero.webp"
        },
        {
          "title": "Bento and data illustration",
          "image": "library-showcase/neobrutalism-graph.webp"
        },
        {
          "title": "Hand-placed quote cards",
          "image": "library-showcase/neobrutalism-testimonials.webp"
        }
      ]
    },
    {
      "name": "Playful Motion",
      "slug": "playful-motion",
      "kind": "skill",
      "category": "Expressive",
      "tags": [
        "motion",
        "spring",
        "playful",
        "animation",
        "consumer",
        "interaction"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build energetic consumer product pages driven by real spring physics: staggered reveals, scroll-linked transforms, oversized rounded geometry and micro-interactions that stay purposeful and never fight the reader.",
      "whenToUse": "Use when the user wants an animated, energetic, bouncy or lively page, mentions spring physics, scroll-linked animation, staggered reveals or micro-interactions, or is building a consumer app, game, or creative product page.",
      "preview": "Playful is not \"add a bouncing arrow and animate everything\". It is a motion\nsystem: spring configurations with exact stiffness, damping and mass per\ninteraction class, stagger timings measured in tens of milliseconds, scroll-linked\ntransform ranges, and a hard list of things that must never move. Miss the physics\nand you get the same `transition-all duration-300` on every element, which reads as\na template, not a personality.\n\nThis skill encodes the type and colour systems, a shape-language spec, the full\nmotion system with copy-pasteable `motion/react` spring configs, `prefers-reduced-motion`\nas a first-class design state, 34 numbered anti-patterns, a mobile motion budget, a\nvestibular-safety accessibility path, and a self-verification loop.",
      "outline": [
        "1. The core idea",
        "2. Page architecture",
        "3. Type scale",
        "4. Colour system",
        "5. Shape language",
        "6. The motion system",
        "7. prefers-reduced-motion as a design state",
        "8. Navigation",
        "9. Hero",
        "10. Feature sections and imagery",
        "11. Anti-patterns: what makes a page fail this style",
        "12. Responsive behaviour and mobile motion budget",
        "13. Accessibility: vestibular safety and focus",
        "14. Performance",
        "15. Implementation notes",
        "16. Pairs well with React Bits Pro (optional)",
        "17. Self-verification loop"
      ],
      "wordCount": 3891,
      "updated": "2026-02-04",
      "pairsWith": [
        "prompt-fitness",
        "prompt-ecommerce-brand",
        "recipe-product-launch"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/skills/playful-motion",
      "showcase": [
        {
          "title": "Product hero and spring entrance",
          "image": "library-showcase/playful-motion-hero.webp"
        },
        {
          "title": "The one interactive section",
          "image": "library-showcase/playful-motion-demo.webp"
        },
        {
          "title": "Playful break and brand surface",
          "image": "library-showcase/playful-motion-break.webp"
        }
      ]
    },
    {
      "name": "Swiss Grid",
      "slug": "swiss-grid",
      "kind": "skill",
      "category": "Systematic",
      "tags": [
        "swiss",
        "grid",
        "typographic",
        "modular",
        "grotesque",
        "systematic"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build landing pages in the International Typographic Style: a visible 12-column modular grid, flush-left grotesque type at three sizes, and one accent used as data.",
      "whenToUse": "Use when the user asks for a Swiss, International Typographic, modernist, systematic or grid-based design, names Helvetica, modular grids, baseline alignment or Muller-Brockmann, or wants a rigorous flush-left layout with mathematical spacing and a visible column structure.",
      "preview": "Swiss design is not \"Helvetica plus whitespace\". It is a mathematical system\nagents rarely fake: a modular grid for every element, three type sizes from one\n8px unit, flush-left ragged-right setting with centred text banned, and one accent\ncolour used as information, not decoration. Break one rule and the page collapses\ninto a generic centred brochure.\n\nThis skill encodes grid mathematics (columns, gutters, margins and baseline at\nevery breakpoint), spacing as multiples of a base unit, 33 numbered anti-patterns,\nand copy-pasteable Tailwind for a reusable grid container that makes the structure\nvisible. It teaches the system, not the surface.",
      "outline": [
        "1. The core idea",
        "2. The modular grid",
        "3. Making the grid visible",
        "4. Type scale",
        "5. Flush-left, ragged-right, and why centred text is banned",
        "6. Spacing system",
        "7. Colour",
        "8. Navigation",
        "9. Hero",
        "10. Content sections and grid fields",
        "11. Imagery",
        "12. Motion",
        "13. Anti-patterns: what makes a page fail this style",
        "14. Responsive behaviour",
        "15. Accessibility",
        "16. Performance",
        "17. Implementation notes",
        "18. Pairs well with React Bits Pro (optional)",
        "19. Self-verification loop"
      ],
      "wordCount": 4330,
      "updated": "2026-02-04",
      "pairsWith": [
        "prompt-saas",
        "prompt-fintech",
        "recipe-saas-homepage"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/skills/swiss-grid",
      "showcase": [
        {
          "title": "A flush-left hero on a twelve-column grid",
          "image": "library-showcase/swiss-hero.webp"
        },
        {
          "title": "The programme as real tabular data",
          "image": "library-showcase/swiss-programme.webp"
        },
        {
          "title": "A poster series where the accent is always a fact",
          "image": "library-showcase/swiss-posters.webp"
        }
      ]
    },
    {
      "name": "Terminal Dark",
      "slug": "terminal-dark",
      "kind": "skill",
      "category": "Technical",
      "tags": [
        "terminal",
        "dark",
        "developer",
        "monospace",
        "code",
        "syntax"
      ],
      "tier": "free",
      "version": "1.1.0",
      "summary": "Build developer-tool landing pages that read as software: dark-first surfaces, real compiling code as the hero, terminal motifs, hairline borders, and syntax as palette.",
      "whenToUse": "Use when the user is building a developer tool, CLI, API, infrastructure, database or open-source landing page, mentions dark-first design, terminals, real code in the hero or syntax highlighting, or wants a page that reads as software rather than marketing.",
      "preview": "The developer aesthetic is not \"a SaaS page with dark mode\". It is a specific\ndiscipline: designed dark-first with exact layered hex, monospace used only where it\nmeans something, real code that compiles as the hero visual, hairline borders instead\nof shadows that fail on dark, and a palette that is literally a syntax theme. Bolt\ndark: variants onto a light template and it reads as a costume.\n\nThis skill encodes the full dark colour system (background layers, surfaces, borders,\nfour text tiers, and a coherent syntax palette in exact hex), a code-block-as-hero\nspec, the install-command pattern, 34 numbered anti-patterns, the hard problem of code\non mobile solved explicitly, and copy-pasteable Tailwind.",
      "outline": [
        "1. The core idea",
        "2. Page architecture",
        "3. Colour system",
        "4. Monospace: when it is right and when it is a mistake",
        "5. Type scale",
        "6. Code blocks as the hero",
        "7. Terminal and command-line motifs",
        "8. The install-command block",
        "9. Feature sections: dense, not airy",
        "10. Borders and elevation in a dark UI",
        "11. Motion",
        "12. Imagery and media",
        "13. Anti-patterns: what makes a page fail this style",
        "14. Responsive behaviour: code on mobile is the hard problem",
        "15. Accessibility",
        "16. Performance",
        "17. Implementation notes",
        "18. Pairs well with React Bits Pro (optional)",
        "19. Self-verification loop"
      ],
      "wordCount": 5701,
      "updated": "2026-02-18",
      "pairsWith": [
        "prompt-developer-tool",
        "prompt-saas",
        "recipe-saas-homepage"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/skills/terminal-dark",
      "showcase": [
        {
          "title": "A real product surface as the hero rather than a picture of one",
          "image": "library-showcase/td-hero.webp"
        },
        {
          "title": "The migration shown as one function against two systems",
          "image": "library-showcase/td-diff.webp"
        },
        {
          "title": "Figures drawn in the character cell they describe",
          "image": "library-showcase/td-figures.webp"
        }
      ]
    },
    {
      "name": "Agency",
      "slug": "agency",
      "kind": "prompt",
      "category": "Services",
      "tags": [
        "agency",
        "studio",
        "services",
        "portfolio",
        "case-studies",
        "enquiry"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build a studio site where the work is the pitch: selected projects, a real process, named people, and an enquiry form that filters for the clients you want.",
      "whenToUse": "Use when the user is building a site for a design studio, creative agency, consultancy, freelance practice or production company, and needs selected client work, case studies, a process section, named people, or an enquiry form that qualifies leads.",
      "preview": "Agency sites fail predictably: the agent writes a SaaS page, swaps\n\"Start free\" for \"Get in touch\", and calls it done. A services business converts\ndifferently. There is no signup or price. The buyer chooses people, the work\ncarries the argument, and the enquiry form is the funnel. Its fields decide whether\nyou get qualified briefs or spam.\n\nThis prompt covers positioning and specialism; selected-work presentation (grid\nversus list, project count, and what each case-study card must carry); a\nnon-generic process; team and credibility; logos and attributed testimonials;\nenquiry form fields and why each exists; budget qualification; and how to solve the\n\"no published pricing\" problem without looking evasive.",
      "outline": [
        "1. Before you write anything",
        "2. Primary objective",
        "3. User journey",
        "4. Required page structure",
        "5. Positioning and specialism",
        "6. Selected work",
        "7. The process section",
        "8. Services presentation",
        "9. Team and credibility",
        "10. The enquiry form (the whole funnel)",
        "11. The \"no pricing\" problem",
        "12. Responsive priorities",
        "13. Accessibility",
        "14. Common mistakes to avoid",
        "15. Completion checklist"
      ],
      "wordCount": 3024,
      "updated": "2026-02-04",
      "pairsWith": [
        "skill-editorial",
        "skill-luxury-serif",
        "recipe-agency-homepage"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/prompts/agency",
      "showcase": [
        {
          "title": "Rendered through skill-editorial",
          "image": "library-showcase/agency-editorial.webp"
        },
        {
          "title": "Rendered through skill-luxury-serif",
          "image": "library-showcase/agency-luxury.webp"
        },
        {
          "title": "Rendered through skill-neobrutalism",
          "image": "library-showcase/agency-neobrutal.webp"
        }
      ]
    },
    {
      "name": "Consumer Hardware",
      "slug": "consumer-hardware",
      "kind": "prompt",
      "category": "Physical Product",
      "tags": [
        "hardware",
        "consumer",
        "ecommerce",
        "product",
        "specs",
        "retail"
      ],
      "tier": "pro",
      "version": "1.1.0",
      "summary": "Build a product page for a physical consumer device: desire before specs, one honest hero photograph, a spec table buyers actually read, and shipping, warranty and returns resolved before the visitor hunts for them.",
      "whenToUse": "Use when the user is building a page for a physical product or device, mentions hardware, gadgets, specifications, dimensions, materials, pre-orders or shipping, or needs a spec table and product photography layout that sells desire before detail.",
      "preview": "Hardware pages fail in a specific way: the agent writes a SaaS page and drops a\nproduct photo into it. Physical products need a different argument order: material\nand feel before the feature list, one honest hero photograph before any render, a\ndense specification table, and shipping, warranty, returns and compatibility\nanswered before the buyer has to look for them.\n\nThis prompt covers the audience model and desire-to-specs section order, product\nphotography specified shot by shot, conveying material and weight through a screen,\nthe variant configurator for desktop and mobile, one-time-purchase price anchoring,\npre-order and backorder honesty, warranty and repairability as trust signals,\ncertification and regulatory handling, comparison against the incumbent, and 34\nnumbered mistakes that make a hardware page read as dropshipping.",
      "outline": [
        "1. Before you write anything",
        "2. Primary objective",
        "3. User journey",
        "4. Required page structure",
        "5. Product photography",
        "6. Conveying the physical object through a screen",
        "7. Copy and specification tables",
        "8. Variants and configuration",
        "9. Price and value for a one-time purchase",
        "10. Availability, shipping and pre-order honesty",
        "11. Proof: reviews, press and comparison",
        "12. Warranty, returns and repairability",
        "13. Regulatory, certifications and compliance",
        "14. Responsive priorities and accessibility",
        "15. Common mistakes to avoid",
        "16. Completion checklist"
      ],
      "wordCount": 3171,
      "updated": "2026-02-04",
      "pairsWith": [
        "skill-apple-minimal",
        "recipe-product-launch"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/prompts/consumer-hardware",
      "showcase": [
        {
          "title": "Rendered through skill-swiss-grid",
          "image": "library-showcase/hardware-swiss.webp"
        },
        {
          "title": "Rendered through skill-corporate-trust",
          "image": "library-showcase/hardware-corporate.webp"
        },
        {
          "title": "Rendered through skill-playful-motion",
          "image": "library-showcase/hardware-playful.webp"
        }
      ]
    },
    {
      "name": "Developer Tool",
      "slug": "developer-tool",
      "kind": "prompt",
      "category": "Software",
      "tags": [
        "developer",
        "api",
        "sdk",
        "cli",
        "open-source",
        "docs"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build a landing page for engineers: real code in the hero, a copy-paste quickstart, honest benchmarks, credible open-source signals, and zero marketing tics that close tabs.",
      "whenToUse": "Use when the user is building a landing page for a library, SDK, CLI, API, framework or developer platform, and needs a copy-paste quickstart, installation commands, honest benchmarks, open-source signals, or a page written for engineers.",
      "preview": "Engineers are the most marketing-hostile audience on the internet. They evaluate a\ntool by reading its code, not its adjectives, and they close the tab the instant a\npage smells like it was written for a VP. A developer-tool page that leads with a\nvalue proposition instead of a runnable command has already lost the reader it\nwanted.\n\nThis prompt covers why the hero must contain real code or a real command, what that\ncode should demonstrate, the install/quickstart block, \"time to first success\" as a\ndesign constraint, docs as a conversion surface, open-source signalling done right,\ncredible benchmarks with disclosed methodology, fair comparison, developer-tool\npricing (free tiers, usage-based, self-host), the community section, language\ncoverage, and the exact marketing tics that make engineers bounce.",
      "outline": [
        "1. Before you write anything",
        "2. Primary objective",
        "3. Why the hero must contain real code",
        "4. What the hero code should demonstrate",
        "5. Install and quickstart block",
        "6. Time to first success as a design constraint",
        "7. Documentation as a conversion surface",
        "8. Open-source signalling",
        "9. Performance and benchmark claims",
        "10. Comparison against alternatives",
        "11. Pricing for developer tools",
        "12. Community and ecosystem",
        "13. Responsive priorities",
        "14. Accessibility",
        "15. Marketing tics that make engineers close the tab",
        "16. Completion checklist"
      ],
      "wordCount": 2883,
      "updated": "2026-02-04",
      "pairsWith": [
        "skill-terminal-dark",
        "skill-swiss-grid",
        "recipe-saas-homepage"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/prompts/developer-tool",
      "showcase": [
        {
          "title": "Rendered through skill-apple-minimal",
          "image": "library-showcase/devtool-apple.webp"
        },
        {
          "title": "Rendered through skill-terminal-dark",
          "image": "library-showcase/devtool-terminal.webp"
        },
        {
          "title": "Rendered through skill-playful-motion",
          "image": "library-showcase/devtool-playful.webp"
        }
      ]
    },
    {
      "name": "Ecommerce Brand",
      "slug": "ecommerce-brand",
      "kind": "prompt",
      "category": "Commerce",
      "tags": [
        "ecommerce",
        "dtc",
        "product",
        "conversion",
        "mobile",
        "checkout"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build a DTC product page where every unanswered question is a lost sale: hero shot, product story, sizing, variants, shipping and returns as conversion levers, honest reviews, and a mobile-first sticky add-to-cart.",
      "whenToUse": "Use when the user is building a direct-to-consumer product or store page, mentions variants, sizing, shipping, returns, reviews or add-to-cart, or needs every purchase objection answered on the page itself.",
      "preview": "A DTC product page has one job: turn a curious visitor into a buyer before a single\nunanswered question sends them away. Most agent-built store pages fail the same way:\na hero shot that hides the product, no answer to \"will it fit me\", shipping and\nreturns buried in the footer, and manufactured urgency that screams dropshipping.\n\nThis prompt defines the hero shot requirements, the origin-and-values story DTC\nbrands lead with, product detail and sizing done credibly, variant selection,\nshipping and returns as conversion levers, honest handling of a low review count,\nsubscription and bundle patterns, substantiated sustainability claims, the honest\nline on scarcity, sticky add-to-cart behaviour, mobile-first priorities, and 30\nmistakes that make a page feel like a dropshipping store.",
      "outline": [
        "1. Before you write anything",
        "2. Primary objective",
        "3. User journey",
        "4. The hero product shot",
        "5. Product story and values",
        "6. Product detail and sizing",
        "7. Reviews, UGC and honest social proof",
        "8. Price and value justification",
        "9. Shipping, returns and delivery transparency",
        "10. Variants, subscriptions and bundles",
        "11. Sustainability and ethical claims",
        "12. Urgency and scarcity: the honest line",
        "13. Add-to-cart and sticky behaviour",
        "14. Mobile-first priorities and accessibility",
        "15. Common mistakes to avoid",
        "16. Completion checklist"
      ],
      "wordCount": 2577,
      "updated": "2026-02-04",
      "pairsWith": [
        "skill-luxury-serif",
        "skill-playful-motion",
        "recipe-product-launch"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/prompts/ecommerce-brand",
      "showcase": [
        {
          "title": "Rendered through skill-swiss-grid",
          "image": "library-showcase/bag-swiss.webp"
        },
        {
          "title": "Rendered through skill-terminal-dark",
          "image": "library-showcase/bag-terminal.webp"
        },
        {
          "title": "Rendered through skill-editorial",
          "image": "library-showcase/bag-editorial.webp"
        }
      ]
    },
    {
      "name": "Fintech",
      "slug": "fintech",
      "kind": "prompt",
      "category": "Finance",
      "tags": [
        "fintech",
        "finance",
        "payments",
        "banking",
        "compliance",
        "trust"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build a financial product page where trust is the design problem: licensing, deposit protection, security, fee transparency, and required risk disclosures placed to convert.",
      "whenToUse": "Use when the user is building a page for a bank, broker, payments, lending, investing or crypto product, mentions regulation, licensing, deposit protection, fees, APR or risk disclosures, or needs required financial disclaimers placed where they are legally effective.",
      "preview": "A fintech page has a problem no SaaS page has: the visitor is being asked to move\nmoney, and the internet has trained them to assume any slick money app is a scam.\nTrust is not a section. It is the whole design brief. Get the disclosures, the\nlicensing, and the fee transparency wrong and the page reads as fraud no matter how\ngood the visuals are.\n\nThis prompt covers the trust ladder specific to money (licensing, regulator\nregistration, deposit protection, custody, audits, security architecture), the\nrequired legal disclosures and risk warnings and how to place them without wrecking\nthe page, fee and APR transparency, how a consumer fintech page diverges from an\nAPI/infrastructure page, KYC expectation-setting, financial-grade social proof,\nincumbent comparison, and the specific tics that make a fintech page read as a scam.",
      "outline": [
        "1. Before you write anything",
        "2. Primary objective",
        "3. The trust ladder for money",
        "4. Required disclosures and risk warnings",
        "5. Fee transparency",
        "6. Rate and APR presentation",
        "7. Onboarding and KYC expectation-setting",
        "8. Consumer vs infrastructure fintech",
        "9. The security section",
        "10. Social proof that works for money",
        "11. Comparison against incumbents",
        "12. Responsive priorities",
        "13. Accessibility",
        "14. Common mistakes that make a fintech page read as a scam",
        "15. Completion checklist"
      ],
      "wordCount": 2999,
      "updated": "2026-02-04",
      "pairsWith": [
        "skill-corporate-trust",
        "skill-swiss-grid",
        "recipe-saas-homepage"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/prompts/fintech",
      "showcase": [
        {
          "title": "Rendered through skill-corporate-trust",
          "image": "library-showcase/fintech-corporate.webp"
        },
        {
          "title": "Rendered through skill-apple-minimal",
          "image": "library-showcase/fintech-apple.webp"
        },
        {
          "title": "Rendered through skill-neobrutalism",
          "image": "library-showcase/fintech-neobrutal.webp"
        }
      ]
    },
    {
      "name": "Fitness",
      "slug": "fitness",
      "kind": "prompt",
      "category": "Health",
      "tags": [
        "fitness",
        "gym",
        "coaching",
        "membership",
        "trial",
        "conversion"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build a fitness page that converts an emotional decision into a booked trial: transformation framing without unfounded claims, schedule UI that works on mobile, honest proof, and transparent pricing.",
      "whenToUse": "Use when the user is building a page for a gym, studio, personal trainer, coaching programme or fitness app, mentions class schedules, memberships, free trials, transformations or testimonials, or needs to turn an emotional decision into a booked session.",
      "preview": "A fitness page sells self-image, not equipment. Most agent-built gym and coaching\npages fail the same way: a hero promise that would trigger a health regulator, a\nclass timetable that is unreadable on the phone every member actually uses, and\nbefore/after photos that read as fabricated the moment a real human looks at them.\n\nThis prompt defines the three distinct structures: physical gym, online coaching,\nand fitness app. It also covers the transformation promise done honestly, a\nconcrete schedule and timetable UI for desktop and mobile, the trial offer as the\nprimary conversion, trainer credibility rules, contract and cancellation\ntransparency, member proof with attribution, inclusive imagery, and 28\nfitness-specific mistakes to avoid.",
      "outline": [
        "1. Before you write anything",
        "2. Primary objective",
        "3. User journey",
        "4. Required page structure by business type",
        "5. The transformation promise, honestly",
        "6. Schedule and timetable UI",
        "7. Programme and membership structure",
        "8. The trial offer as the primary conversion",
        "9. Trainer and coach credibility",
        "10. Honest before/after and results imagery",
        "11. Pricing and contract transparency",
        "12. Location, hours and finding us",
        "13. Accessibility and inclusivity",
        "14. Common mistakes to avoid",
        "15. Completion checklist"
      ],
      "wordCount": 2850,
      "updated": "2026-02-04",
      "pairsWith": [
        "skill-playful-motion",
        "skill-neobrutalism",
        "recipe-product-launch"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/prompts/fitness",
      "showcase": [
        {
          "title": "The same gym hero in Swiss Grid",
          "image": "library-showcase/fitness-swiss.webp"
        },
        {
          "title": "The same hero in Playful Motion",
          "image": "library-showcase/fitness-playful.webp"
        },
        {
          "title": "The same hero in Editorial",
          "image": "library-showcase/fitness-editorial.webp"
        }
      ]
    },
    {
      "name": "Real Estate",
      "slug": "real-estate",
      "kind": "prompt",
      "category": "Property",
      "tags": [
        "real-estate",
        "property",
        "listing",
        "development",
        "brokerage",
        "gallery"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build a property page where imagery does the selling for a single listing, development launch, or brokerage, with a shot-ordered gallery, mobile-readable floor plans, spec tables, and a viewing-request conversion.",
      "whenToUse": "Use when the user is building a page for a property listing, new development, brokerage or rental, mentions floor plans, photo galleries, viewings, neighbourhoods or agent contact, or needs imagery to carry the selling.",
      "preview": "Property is a high-value, slow decision, and photography does most of the work.\nMost agent-built property pages fail on the parts that matter: a weak first image\nthat kills the listing before the scroll, floor plans that are unreadable on a\nphone, missing spec facts a serious buyer needs, and a viewing form buried below\nthe fold.\n\nThis prompt defines the three distinct structures for single listings, development\nlaunches, and brokerages, plus the gallery shot list and ordering, floor-plan\npresentation for mobile, the specification table, neighbourhood context that works\nwithout a dead map, availability and unit-selector interfaces, price-on-application\nlogic, agent credibility, a general pattern for legal notices, and 30 mistakes that\nmake a property page feel like a scam listing.",
      "outline": [
        "1. Before you write anything",
        "2. Primary objective",
        "3. Structure by page type",
        "4. Photography and gallery",
        "5. Floor plans",
        "6. Specification and detail table",
        "7. Location and neighbourhood",
        "8. Virtual tours, video and viewing conversion",
        "9. Availability and unit selectors (developments)",
        "10. Price presentation",
        "11. Legal and regulatory notices",
        "12. Agent and firm credibility",
        "13. Accessibility and performance",
        "14. Common mistakes to avoid",
        "15. Completion checklist"
      ],
      "wordCount": 2717,
      "updated": "2026-02-04",
      "pairsWith": [
        "skill-luxury-serif",
        "skill-editorial",
        "recipe-agency-homepage"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/prompts/real-estate",
      "showcase": [
        {
          "title": "The same listing hero in Luxury Serif",
          "image": "library-showcase/estate-luxury.webp"
        },
        {
          "title": "The same hero in Corporate Trust",
          "image": "library-showcase/estate-corporate.webp"
        },
        {
          "title": "The same hero in Terminal Dark",
          "image": "library-showcase/estate-terminal.webp"
        }
      ]
    },
    {
      "name": "SaaS Landing Page",
      "slug": "saas",
      "kind": "prompt",
      "category": "Software",
      "tags": [
        "saas",
        "b2b",
        "software",
        "conversion",
        "signup",
        "trial"
      ],
      "tier": "pro",
      "version": "1.0.0",
      "summary": "Build a SaaS landing page that converts self-serve signups through problem framing, product proof, objection handling, pricing clarity, and a single dominant CTA.",
      "whenToUse": "Use when the user is building a landing page for a software subscription product, mentions free trials, signup, pricing tiers, integrations or dashboards, or needs problem framing, product proof and objection handling aimed at self-serve conversion.",
      "preview": "A SaaS landing page has one job: get a qualified visitor to start. Most\nagent-built SaaS pages fail because they describe the software instead of the\noutcome, bury the product behind three scrolls of abstract benefit copy, and\nscatter five competing CTAs across the page.\n\nThis prompt defines the audience model, the required page structure and section\norder, the exact questions each section must answer, the CTA hierarchy, the\ntrust ladder (and when each rung is a liability rather than an asset), pricing\npresentation rules, and 20+ SaaS-specific mistakes to avoid, from \"our AI-powered\nplatform\" headlines to feature tables nobody reads.",
      "outline": [
        "1. Before you write anything",
        "2. Primary objective",
        "3. User journey",
        "4. Required page structure",
        "5. Content guidance",
        "6. CTA strategy",
        "7. Trust ladder",
        "8. Pricing presentation",
        "9. Navigation requirements",
        "10. Responsive priorities",
        "11. Accessibility",
        "12. Industry-specific considerations",
        "13. Common mistakes to avoid",
        "14. Completion checklist"
      ],
      "wordCount": 2512,
      "updated": "2026-02-04",
      "pairsWith": [
        "skill-apple-minimal",
        "recipe-product-launch"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/prompts/saas",
      "showcase": [
        {
          "title": "The same SaaS hero in Apple Minimal",
          "image": "library-showcase/saas-apple.webp"
        },
        {
          "title": "The same hero in Terminal Dark",
          "image": "library-showcase/saas-terminal.webp"
        },
        {
          "title": "The same hero in Editorial",
          "image": "library-showcase/saas-editorial.webp"
        }
      ]
    },
    {
      "name": "Agency Homepage",
      "slug": "agency-homepage",
      "kind": "recipe",
      "category": "Marketing",
      "tags": [
        "agency",
        "studio",
        "homepage",
        "portfolio",
        "blocks"
      ],
      "tier": "pro",
      "version": "1.1.0",
      "summary": "A tested 10-block arrangement that assembles a complete creative or technical studio homepage (positioning through enquiry) from React Bits Pro blocks in one prompt.",
      "whenToUse": "Use when the user wants a complete studio or agency homepage assembled in one pass, from positioning through enquiry, rather than composing sections one at a time. Works with the React Bits Pro blocks or with the plain-markup fallback described for every section.",
      "preview": "A recipe is a prompt with a bill of materials. This one produces a full studio\nhomepage from ten React Bits Pro blocks in a fixed order, built to convert a\nqualified enquiry rather than a signup, with the role of each block, the content\nit must carry, and the configuration the agent should apply.\n\nBecause the block set and order live as structured data in plan.json, the same\nrecipe drives an agent prompt today and the visual Landing Builder later. It ships\na content plan for every block, a harmonization pass that makes the ten\nindependently authored blocks read as one page, an adaptation guide for\ndesign-led versus engineering-led studios, guidance on pairing it with a visual\nskill, and a fallback path for projects without the Pro registry.",
      "outline": [
        "1. When to use this recipe",
        "2. The prompt",
        "3. Block set and order",
        "4. Content plan per block",
        "5. The harmonization pass",
        "6. Adapting the result",
        "7. Pairing with a skill",
        "8. Working without React Bits Pro",
        "9. Completion checklist"
      ],
      "wordCount": 3454,
      "updated": "2026-08-05",
      "pairsWith": [
        "skill-editorial",
        "skill-luxury-serif",
        "prompt-agency"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/recipes/agency-homepage",
      "showcase": [
        {
          "title": "Eight blocks assembled into one studio homepage",
          "image": "library-showcase/agency-recipe-page.webp"
        },
        {
          "title": "The bill of materials and what it leaves out",
          "image": "library-showcase/agency-recipe-blocks.webp"
        },
        {
          "title": "Detail crops at full size",
          "image": "library-showcase/agency-recipe-details.webp"
        }
      ]
    },
    {
      "name": "Product Launch Page",
      "slug": "product-launch",
      "kind": "recipe",
      "category": "Launch",
      "tags": [
        "launch",
        "product",
        "waitlist",
        "announcement",
        "blocks"
      ],
      "tier": "pro",
      "version": "1.1.0",
      "summary": "A tested block arrangement that assembles a full product-launch page from React Bits Pro blocks (announcement hero through waitlist capture) in one prompt.",
      "whenToUse": "Use when the user wants a full product launch or announcement page assembled in one pass, including waitlist or pre-order capture, rather than composing sections one at a time. Works with the React Bits Pro blocks or with the plain-markup fallback described for every section.",
      "preview": "A recipe is a prompt with a bill of materials. This one produces a complete\nproduct-launch page from eleven React Bits Pro blocks in a fixed order, with the\nrole of each block, the content it should carry, and the configuration the agent\nshould apply.\n\nBecause the block set and order are declared as structured data\n(`plan.json`), the same recipe drives an agent prompt today and the visual\nLanding Builder later. It ships a full harmonization pass that unifies type,\ncolour, layout and scroll motion across the blocks so they read as one page, plus\nan adaptation guide for the two common variants (pre-launch waitlist versus\navailable-now) and a fallback path for projects without the Pro registry.",
      "outline": [
        "1. When to use this recipe",
        "2. The prompt",
        "3. Block set and order",
        "4. Content plan per block",
        "5. The harmonization pass",
        "6. Launch mechanics: countdown, scarcity, and the day after",
        "7. Adapting the result",
        "8. Pairing with a skill",
        "9. Working without React Bits Pro",
        "10. Completion checklist"
      ],
      "wordCount": 3453,
      "updated": "2026-08-05",
      "pairsWith": [
        "skill-apple-minimal",
        "prompt-saas",
        "prompt-consumer-hardware"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/recipes/product-launch",
      "showcase": [
        {
          "title": "Nine blocks assembled into one launch page",
          "image": "library-showcase/launch-recipe-page.webp"
        },
        {
          "title": "The bill of materials and what it leaves out",
          "image": "library-showcase/launch-recipe-blocks.webp"
        },
        {
          "title": "Detail crops at full size",
          "image": "library-showcase/launch-recipe-details.webp"
        }
      ]
    },
    {
      "name": "SaaS Homepage",
      "slug": "saas-homepage",
      "kind": "recipe",
      "category": "Marketing",
      "tags": [
        "saas",
        "homepage",
        "marketing",
        "conversion",
        "blocks"
      ],
      "tier": "pro",
      "version": "1.1.0",
      "summary": "A tested 13-block arrangement that assembles a complete self-serve B2B SaaS homepage (navigation through footer) from React Bits Pro blocks in one prompt.",
      "whenToUse": "Use when the user wants an entire self-serve SaaS homepage assembled in one pass, from navigation through footer, rather than composing sections one at a time. Works with the React Bits Pro blocks or with the plain-markup fallback described for every section.",
      "preview": "A recipe is a prompt with a bill of materials. This one produces a full\nself-serve SaaS homepage from thirteen React Bits Pro blocks in a fixed order,\nwith the role of each block, the content it must carry, and the configuration\nthe agent should apply.\n\nBecause the block set and order live as structured data in plan.json, the same\nrecipe drives an agent prompt today and the visual Landing Builder later. It\nships a content plan for every block, a harmonization pass that makes the\nthirteen independently authored blocks read as one page (type, colour, layout,\nmotion), an adaptation guide for product-led versus sales-assisted variants,\nguidance on pairing it with a visual skill, and a fallback path for projects\nthat do not have the Pro registry configured.",
      "outline": [
        "1. When to use this recipe",
        "2. The prompt",
        "3. Block set and order",
        "4. Content plan per block",
        "5. The harmonization pass",
        "6. Adapting the result",
        "7. Pairing with a skill",
        "8. Working without React Bits Pro",
        "9. Completion checklist"
      ],
      "wordCount": 3296,
      "updated": "2026-08-05",
      "pairsWith": [
        "skill-swiss-grid",
        "skill-corporate-trust",
        "prompt-saas"
      ],
      "href": "https://pro.reactbits.dev/docs/agent-kit/recipes/saas-homepage",
      "showcase": [
        {
          "title": "The assembled page: thirteen blocks",
          "image": "library-showcase/saas-recipe-page.webp"
        },
        {
          "title": "The bill of materials",
          "image": "library-showcase/saas-recipe-blocks.webp"
        },
        {
          "title": "Detail crops at full size",
          "image": "library-showcase/saas-recipe-details.webp"
        }
      ]
    }
  ],
  "agentSkill": {
    "name": "React Bits Pro Skill",
    "slug": "agent-skill",
    "category": "Integration",
    "summary": "Teach your agent to install and use React Bits Pro components and blocks correctly on the first try.",
    "tier": "starter",
    "href": "https://pro.reactbits.dev/docs/agent-kit/agent-skill"
  }
}