You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The prop tables on the component docs pages (propData in src/demo/**/*Demo.jsx) have drifted away from the actual component source. I scanned all 166 components and found 50 props across 16 components where the documented default does not match the real default, plus 7 props across 5 components where the four variants disagree with each other (a CONTRIBUTING rule 5 violation).
This matters more than a normal docs typo because these tables are the primary prop reference for the library, and they are also what people paste into AI coding assistants. A wrong default produces code that silently behaves differently from what the docs promised.
1. Documented default != actual default
Comparison is against the JS-CSS variant (src/content/<Category>/<Name>/<Name>.jsx) vs the propData array in src/demo/<Category>/<Name>Demo.jsx. Only scalar defaults (string / number / boolean) are listed; arrays, objects and placeholder values like - or undefined were excluded to avoid false positives.
Component
Prop
Actual default (source)
Documented default
ClickSpark
sparkColor
#fff
#f00
ClickSpark
sparkSize
10
30
ClickSpark
sparkRadius
15
30
ClickSpark
duration
400
660
Ferrofluid
scale
1.6
1
Ferrofluid
sharpness
2.5
3
Ferrofluid
shimmer
1.5
1
Ferrofluid
mouseRadius
0.35
0.3
GlitchText
speed
1
0.5 (!)
GlitchText
enableOnHover
true
false (!)
LightRays
lightSpread
1
0.5
LightRays
rayLength
2
1.0
LightRays
followMouse
true
false
LightRays
mouseInfluence
0.1
0.5
Lightfall
speed
0.5
1
Lightfall
streakCount
2
8
Lightfall
density
0.6
1
Lightfall
zoom
3
2
Lightfall
backgroundGlow
0.5
1
Lightfall
mouseStrength
0.5
1
Lightfall
mouseRadius
1
0.6
LiquidChrome
speed
0.2
1.0
LiquidChrome
amplitude
0.3
0.6 (!)
LiquidChrome
frequencyX
3
2.5
LiquidChrome
frequencyY
3
1.5 (!)
MetaBalls
enableTransparency
true
false (!)
MetaBalls
cursorBallColor
#ffffff
#ff0000
PillNav
initialLoadAnimation
true
false
PixelBlast
pixelSize
3
4
PixelBlast
edgeFade
0.5
0.25
Plasma
mouseInteractive
true
false
Plasma
targetFps
60
30
Ribbons
offsetFactor
0.05
0.02
Ribbons
speedMultiplier
0.6
0.5
Ribbons
enableFade
false
true
Ribbons
enableShaderEffect
false
true
RippleGrid
mouseInteraction
true
false
RippleGrid
mouseInteractionRadius
1
0.8
SideRays
speed
2.5
1.0
SideRays
rayColor1
#EAB308
#ffaa6e
SideRays
intensity
2
1.0
SideRays
spread
2
1.0
SideRays
saturation
1.5
1.0
SideRays
blend
0.75
0.78
SideRays
falloff
1.6
2.0 (!)
StaggeredMenu
displaySocials
true
false
StarBorder
thickness
1
3
TextPressure
text
Compressa
Hello!
TextPressure
textColor
#FFFFFF
true
TextPressure
strokeColor
#FF0000
#FFFFFF
Rows marked (!) are also variant-parity splits (section 2) — for those, the docs match 3 of the 4 variants and the JS-CSS source is the outlier, so the fix belongs in the source rather than the table.
Worst case — TextPressure prop table is shifted by one row. Source (src/content/TextAnimations/TextPressure/TextPressure.jsx) declares:
but src/demo/TextAnimations/TextPressureDemo.jsx documents textColor default as 'true' (that is the stroke boolean's value), strokeColor as '#FFFFFF' (that is textColor's value) and className as '#FF0000' (that is strokeColor's value). Every value is one row late.
2. The four variants disagree with each other
CONTRIBUTING rule 5 requires all 4 variants to stay in sync, but these props have different defaults depending on which variant you install:
Component
Prop
JS-CSS
JS-TW
TS-CSS
TS-TW
MetaBalls
enableTransparency
true
false
false
false
LiquidChrome
amplitude
0.3
0.5
0.5
0.5
LiquidChrome
frequencyY
3
2
2
2
SideRays
falloff
1.6
1.6
1.6
2.0
FuzzyText
fontSize
clamp(2rem, 10vw, 10rem)
clamp(2rem, 10vw, 10rem)
clamp(2rem, 8vw, 8rem)
clamp(2rem, 8vw, 8rem)
GlitchText
speed
1
0.5
0.5
0.5
GlitchText
enableOnHover
true
false
false
false
GlitchText is the clearest: install the JS-CSS variant and the glitch animation runs constantly; install any other variant and it only runs on hover. Same component, same docs page, different behaviour.
Note: my scan could not parse the prop signature of 54 of the 166 components (unusual declaration shapes), so both lists are a lower bound, not a complete audit.
Proposed fix
Correct the mismatched propData entries, and align the outlier variant sources for the 7 parity splits.
Add scripts/checkPropDocs.js, run from npm run build, that fails when a scalar propData default disagrees with the component source, or when the 4 variants disagree with each other. This is the same class of problem as [BUG]: incorrect installation command for SpecularButton ("npm i ogl") #1057, and a check would stop it recurring as components are edited.
I'm happy to open a PR for both parts (fixes first, checker second, or together — whichever you prefer). Wanted to confirm the approach before doing 16 components' worth of edits.
Install the component: npx shadcn@latest add https://reactbits.dev/r/ClickSpark-JS-CSS
Open the installed ClickSpark.jsx. The real defaults are sparkColor = '#fff', sparkSize = 10, sparkRadius = 15, duration = 400.
Render <ClickSpark> with no props — the sparks are white and small, not red and large as the docs describe.
For the variant split, compare src/content/TextAnimations/GlitchText/GlitchText.jsx (enableOnHover = true) against src/tailwind/TextAnimations/GlitchText/GlitchText.jsx (enableOnHover = false).
Validations
I have checked other issues to see if my issue was already reported or addressed
Description
The prop tables on the component docs pages (
propDatainsrc/demo/**/*Demo.jsx) have drifted away from the actual component source. I scanned all 166 components and found 50 props across 16 components where the documented default does not match the real default, plus 7 props across 5 components where the four variants disagree with each other (a CONTRIBUTING rule 5 violation).This matters more than a normal docs typo because these tables are the primary prop reference for the library, and they are also what people paste into AI coding assistants. A wrong default produces code that silently behaves differently from what the docs promised.
1. Documented default != actual default
Comparison is against the JS-CSS variant (
src/content/<Category>/<Name>/<Name>.jsx) vs thepropDataarray insrc/demo/<Category>/<Name>Demo.jsx. Only scalar defaults (string / number / boolean) are listed; arrays, objects and placeholder values like-orundefinedwere excluded to avoid false positives.ClickSparksparkColor#fff#f00ClickSparksparkSize1030ClickSparksparkRadius1530ClickSparkduration400660Ferrofluidscale1.61Ferrofluidsharpness2.53Ferrofluidshimmer1.51FerrofluidmouseRadius0.350.3GlitchTextspeed10.5(!)GlitchTextenableOnHovertruefalse(!)LightRayslightSpread10.5LightRaysrayLength21.0LightRaysfollowMousetruefalseLightRaysmouseInfluence0.10.5Lightfallspeed0.51LightfallstreakCount28Lightfalldensity0.61Lightfallzoom32LightfallbackgroundGlow0.51LightfallmouseStrength0.51LightfallmouseRadius10.6LiquidChromespeed0.21.0LiquidChromeamplitude0.30.6(!)LiquidChromefrequencyX32.5LiquidChromefrequencyY31.5(!)MetaBallsenableTransparencytruefalse(!)MetaBallscursorBallColor#ffffff#ff0000PillNavinitialLoadAnimationtruefalsePixelBlastpixelSize34PixelBlastedgeFade0.50.25PlasmamouseInteractivetruefalsePlasmatargetFps6030RibbonsoffsetFactor0.050.02RibbonsspeedMultiplier0.60.5RibbonsenableFadefalsetrueRibbonsenableShaderEffectfalsetrueRippleGridmouseInteractiontruefalseRippleGridmouseInteractionRadius10.8SideRaysspeed2.51.0SideRaysrayColor1#EAB308#ffaa6eSideRaysintensity21.0SideRaysspread21.0SideRayssaturation1.51.0SideRaysblend0.750.78SideRaysfalloff1.62.0(!)StaggeredMenudisplaySocialstruefalseStarBorderthickness13TextPressuretextCompressaHello!TextPressuretextColor#FFFFFFtrueTextPressurestrokeColor#FF0000#FFFFFFRows marked (!) are also variant-parity splits (section 2) — for those, the docs match 3 of the 4 variants and the JS-CSS source is the outlier, so the fix belongs in the source rather than the table.
Worst case —
TextPressureprop table is shifted by one row. Source (src/content/TextAnimations/TextPressure/TextPressure.jsx) declares:but
src/demo/TextAnimations/TextPressureDemo.jsxdocumentstextColordefault as'true'(that is thestrokeboolean's value),strokeColoras'#FFFFFF'(that istextColor's value) andclassNameas'#FF0000'(that isstrokeColor's value). Every value is one row late.2. The four variants disagree with each other
CONTRIBUTING rule 5 requires all 4 variants to stay in sync, but these props have different defaults depending on which variant you install:
MetaBallsenableTransparencytruefalsefalsefalseLiquidChromeamplitude0.30.50.50.5LiquidChromefrequencyY3222SideRaysfalloff1.61.61.62.0FuzzyTextfontSizeclamp(2rem, 10vw, 10rem)clamp(2rem, 10vw, 10rem)clamp(2rem, 8vw, 8rem)clamp(2rem, 8vw, 8rem)GlitchTextspeed10.50.50.5GlitchTextenableOnHovertruefalsefalsefalseGlitchTextis the clearest: install the JS-CSS variant and the glitch animation runs constantly; install any other variant and it only runs on hover. Same component, same docs page, different behaviour.Note: my scan could not parse the prop signature of 54 of the 166 components (unusual declaration shapes), so both lists are a lower bound, not a complete audit.
Proposed fix
propDataentries, and align the outlier variant sources for the 7 parity splits.scripts/checkPropDocs.js, run fromnpm run build, that fails when a scalarpropDatadefault disagrees with the component source, or when the 4 variants disagree with each other. This is the same class of problem as [BUG]: incorrect installation command for SpecularButton ("npm i ogl") #1057, and a check would stop it recurring as components are edited.I'm happy to open a PR for both parts (fixes first, checker second, or together — whichever you prefer). Wanted to confirm the approach before doing 16 components' worth of edits.
Reproduction Link
No response
Steps to reproduce
sparkColoris listed as#f00,sparkSizeas30,sparkRadiusas30,durationas660.npx shadcn@latest add https://reactbits.dev/r/ClickSpark-JS-CSSClickSpark.jsx. The real defaults aresparkColor = '#fff',sparkSize = 10,sparkRadius = 15,duration = 400.<ClickSpark>with no props — the sparks are white and small, not red and large as the docs describe.For the variant split, compare
src/content/TextAnimations/GlitchText/GlitchText.jsx(enableOnHover = true) againstsrc/tailwind/TextAnimations/GlitchText/GlitchText.jsx(enableOnHover = false).Validations