Fallback Card

Preview not available

Install the component using the shadcn CLI:

npx shadcn@latest add @uimix/fallback-card

npx shadcn@latest add @uimix/fallback-card

This will automatically add the component to your project.

Copy and paste the following code into your project:

Loading source…

Features

ASCII Glitch Effect: Animated ASCII character background with customizable colors and speed
Theme Support: Dark and light theme variants with appropriate color schemes
Customizable Icon: Optional SVG icon display with shadow effects
Flexible Sizing: Adjustable card dimensions and glitch effect positioning
Smooth Animations: Canvas-based glitch animations with smooth color transitions
Edge Vignette: Built-in vignette effects for polished visual appearance
Responsive Design: Adapts to different container sizes

Loading source…

Prop	Type	Default	Description
message	string	undefined	Message to display in the card center
theme	'dark' \| 'light'	undefined	Visual theme for the card
showIcon	boolean	undefined	Whether to display the monitor icon
showGlitch	boolean	undefined	Whether to display the glitch effect background
glitchOffsetX	number	undefined	Horizontal offset for the glitch effect (in pixels)
glitchOffsetY	number	undefined	Vertical offset for the glitch effect (in pixels)
glitchScale	number	undefined	Scale factor for the glitch effect
cardWidth	number	undefined	Card width in pixels (max-width)
cardHeight	number	undefined	Card height in pixels
className	string	undefined	Additional CSS classes to apply to the root element

<FallbackCard 
  message="Preview not available"
  theme="dark"
/>

<FallbackCard 
  message="Content unavailable"
  glitchOffsetX={150}
  glitchOffsetY={170}
  glitchScale={1.6}
/>

<FallbackCard 
  message="Loading failed"
  cardWidth={600}
  cardHeight={550}
/>

<FallbackCard 
  message="Content not found"
  theme="light"
/>

<FallbackCard 
  message="Error loading content"
  showGlitch={false}
/>

<FallbackCard 
  message="Unavailable"
  showIcon={false}
  showGlitch={false}
/>