Documentation
Components
Input Text
Component example: Input Text
Input Textarea
Component example: Input Textarea
Input Switch
Component example: Input Switch
Otp Input
Component example: Otp Input
Input Select
Component example: Input Select
Input Radio
Component example: Input Radio
Input File
Component example: Input File
Input Number
Component example: Input Number
Strong Password
Component example: Strong Password
Input Checkbox
Component example: Input Checkbox
Input Range
Component example: Input Range
Normal Button
Component example: Normal Button
Login Buttons
Component example: Login Buttons
Dropdown Button
Component example: Dropdown Button
Animated Button
Component example: Animated Button
Pagination
Component example: Pagination
Tabs
Component example: Tabs
Modal
Component example: Modal
Progress Bar
Component example: Progress Bar
Chip
Component example: Chip
Marquee
Component example: Marquee
Timer
Component example: Timer
Breadcrumb
Component example: Breadcrumb
Rating
Component example: Rating
Stepper
Component example: Stepper
Slider
Component example: Slider
Context Menu
Component example: Context Menu
Skeleton
Component example: Skeleton
Alert Message
Component example: Alert Message
Dialog Message
Component example: Dialog Message
Tree Dropdown
Component example: Tree Dropdown
Loader
Component example: Loader
Testimonials
Component example: Testimonials
Notification
Component example: Notification
Cards
Component example: Cards
Drag And Drop
Component example: Drag And Drop
Comparison Card
Component example: Comparison Card
Image Cropper
Component example: Image Cropper
Animated Cards
Component example: Animated Cards
Image Gallery
Component example: Image Gallery
Carousel
Component example: Carousel
According
Component example: According
Appbar
Component example: Appbar
Resizable Layout
Component example: Resizable Layout
Drawer
Component example: Drawer
Badge
Component example: Badge
Table
Component example: Table
Github Activity Graph
Component example: Github Activity Graph
Pie Chart
Component example: Pie Chart
Graph Chart
Component example: Graph Chart
Tooltip
Component example: Tooltip
Redo Undo
Component example: Redo Undo
Timeline
Component example: Timeline
Product Card
Component example: Product Card
Ads Card
Component example: Ads Card
Code
Component example: Code
Snippet
Component example: Snippet
Animations
Installation
Animation example: Installation
Magic Card
Animation example: Magic Card
Reveal Card
Animation example: Reveal Card
Magnet Card
Animation example: Magnet Card
Sorting Animation
Animation example: Sorting Animation
Layout Switcher
Animation example: Layout Switcher
Reaction Trail
Animation example: Reaction Trail
Text Effects
Animation example: Text Effects
Background Animations
Animation example: Background Animations
Dropdown Animations
Animation example: Dropdown Animations
Drag Animations
Animation example: Drag Animations
Gallery View
Animation example: Gallery View
Hover Effects
Animation example: Hover Effects
Chat Screen
Animation example: Chat Screen
Animated Accordion
Animation example: Animated Accordion
Mouse Navigations
Animation example: Mouse Navigations
Search Placeholder
Animation example: Search Placeholder
Blocks
All Blocks
Block example: All Blocks
Responsive Navbar
Block example: Responsive Navbar
Hero Section
Block example: Hero Section
Contact Form
Block example: Contact Form
Responsive Search Bar
Block example: Responsive Search Bar
Responsive Footer
Block example: Responsive Footer
404 Page
Block example: 404 Page
Pricing Section
Block example: Pricing Section
Newsletter Form
Block example: Newsletter Form
Multi Step Form
Block example: Multi Step Form
Responsive Sidebar
Block example: Responsive Sidebar
Empty Page
Block example: Empty Page
Offer Grid
Block example: Offer Grid
Product Details Page
Block example: Product Details Page
Product Filter Page
Block example: Product Filter Page
Checkout Page
Block example: Checkout Page
Documentation
Components
Input Text
Component example: Input Text
Input Textarea
Component example: Input Textarea
Input Switch
Component example: Input Switch
Otp Input
Component example: Otp Input
Input Select
Component example: Input Select
Input Radio
Component example: Input Radio
Input File
Component example: Input File
Input Number
Component example: Input Number
Strong Password
Component example: Strong Password
Input Checkbox
Component example: Input Checkbox
Input Range
Component example: Input Range
Normal Button
Component example: Normal Button
Login Buttons
Component example: Login Buttons
Dropdown Button
Component example: Dropdown Button
Animated Button
Component example: Animated Button
Pagination
Component example: Pagination
Tabs
Component example: Tabs
Modal
Component example: Modal
Progress Bar
Component example: Progress Bar
Chip
Component example: Chip
Marquee
Component example: Marquee
Timer
Component example: Timer
Breadcrumb
Component example: Breadcrumb
Rating
Component example: Rating
Stepper
Component example: Stepper
Slider
Component example: Slider
Context Menu
Component example: Context Menu
Skeleton
Component example: Skeleton
Alert Message
Component example: Alert Message
Dialog Message
Component example: Dialog Message
Tree Dropdown
Component example: Tree Dropdown
Loader
Component example: Loader
Testimonials
Component example: Testimonials
Notification
Component example: Notification
Cards
Component example: Cards
Drag And Drop
Component example: Drag And Drop
Comparison Card
Component example: Comparison Card
Image Cropper
Component example: Image Cropper
Animated Cards
Component example: Animated Cards
Image Gallery
Component example: Image Gallery
Carousel
Component example: Carousel
According
Component example: According
Appbar
Component example: Appbar
Resizable Layout
Component example: Resizable Layout
Drawer
Component example: Drawer
Badge
Component example: Badge
Table
Component example: Table
Github Activity Graph
Component example: Github Activity Graph
Pie Chart
Component example: Pie Chart
Graph Chart
Component example: Graph Chart
Tooltip
Component example: Tooltip
Redo Undo
Component example: Redo Undo
Timeline
Component example: Timeline
Product Card
Component example: Product Card
Ads Card
Component example: Ads Card
Code
Component example: Code
Snippet
Component example: Snippet
Animations
Installation
Animation example: Installation
Magic Card
Animation example: Magic Card
Reveal Card
Animation example: Reveal Card
Magnet Card
Animation example: Magnet Card
Sorting Animation
Animation example: Sorting Animation
Layout Switcher
Animation example: Layout Switcher
Reaction Trail
Animation example: Reaction Trail
Text Effects
Animation example: Text Effects
Background Animations
Animation example: Background Animations
Dropdown Animations
Animation example: Dropdown Animations
Drag Animations
Animation example: Drag Animations
Gallery View
Animation example: Gallery View
Hover Effects
Animation example: Hover Effects
Chat Screen
Animation example: Chat Screen
Animated Accordion
Animation example: Animated Accordion
Mouse Navigations
Animation example: Mouse Navigations
Search Placeholder
Animation example: Search Placeholder
Blocks
All Blocks
Block example: All Blocks
Responsive Navbar
Block example: Responsive Navbar
Hero Section
Block example: Hero Section
Contact Form
Block example: Contact Form
Responsive Search Bar
Block example: Responsive Search Bar
Responsive Footer
Block example: Responsive Footer
404 Page
Block example: 404 Page
Pricing Section
Block example: Pricing Section
Newsletter Form
Block example: Newsletter Form
Multi Step Form
Block example: Multi Step Form
Responsive Sidebar
Block example: Responsive Sidebar
Empty Page
Block example: Empty Page
Offer Grid
Block example: Offer Grid
Product Details Page
Block example: Product Details Page
Product Filter Page
Block example: Product Filter Page
Checkout Page
Block example: Checkout Page
ZenUI Image React Playground
Experiment with different settings to see how the LazyLoadImage component behaves. ( open network tab in the browser developer tool and scroll images to see lazy loading )
1<LazyLoadImage
2 src="your-image.jpg"
3 alt="Your alt text"
4 placeholderType="effect"
5 effectType="blur"
6 effectAmount={10}
7 optimize={true}
8 quality={80}
9 offset={100}
10 useIntersectionObserver={true}
11/>
We use cookies to make your experience better.
By accepting, you agree to our Privacy Policy.
Donate