Components

Input

Basic text field for user data entry

Textarea

Multi-line textarea for longer text content

formtextmultiline

Switch

Toggle switch for binary on/off selections

formtoggleboolean

Comparison Card

Compare items side-by-side for easy analysis.

slidercomparisoncard

Select

Dropdown selection component for choosing from multiple options

forminputdropdown

Tree Dropdown

Hierarchical dropdown with nested selection options

formdropdownnestedhierarchy

Radio

Radio button group for selecting a single option

forminputselection

File

File upload for selecting and uploading files

forminputupload

Normal Button

Standard button component for user interactions

uiinteractivebutton

Timer

A timer lets you set a specific duration, and it counts down based on that duration, notifying you when the time is up.

timercount-downtimer effect

RGB Border

Colorful border effect with RGB color transitions

uistylingeffect

Hover Animated Cards

Interactive cards with smooth hover animations

uianimationinteractive

Drag & Drop

Drag and drop interface for interactive content movement

uiinteractivedrag-drop

Animated Button

Button with dynamic animation effects

uibuttonanimation

Context Menu

Contextual menu displaying actions based on user interaction

uimenuinteractive

Cards

Flexible card layout for displaying content

uilayoutcontainer

Accordion

Expandable/collapsible content sections

uilayoutinteractive

Resources

Documentation and resource links

documentationresources

Custom Hooks

Reusable React hook utilities

reacthooksutility

Pie Chart

Circular statistical chart for data visualization

chartdatavisualization

App Bar

Top navigation bar for application layout

uinavigationlayout

Table

Structured data display component

Github Activity Graph

Track user activity like github activity tracker graph.

uidatadisplaygraph

Image Gallery

Interactive image display and browsing component

Pagination

Navigation control for paginated content

uinavigationcontrol

Dropdown Menu

Expandable menu for selecting options

uimenuselection

Chip

Compact, interactive tag or filter element

Modal

Overlay dialog for focused interactions

uioverlayinteractive

Tabs

Tabbed interface for organizing content

uinavigationlayout

Skeleton

Placeholder loading state for content

uiloadingplaceholder

Alert Message

Informative message display component

uinotificationfeedback

Dialog

Interactive dialog box for user confirmations

uioverlayinteractive

Testimonial

Display customer or user testimonials

uicontentsocial-proof

Loader

Visual loading indicator

uiloadingfeedback

Notification

System or application notification display

uifeedbackalert

Badge

Small status or informational label

Tooltip

Contextual information popup

uiinformationhover

Code

Code display and syntax highlighting

uidisplaydevelopment

Snippet

Compact code or text snippet display

Number Input

Field specifically for numeric values

forminputnumeric

Checkbox Input

Checkbox for multiple selection options

forminputselection

Strong Password

Password with strength validation

forminputsecurity

Range Input

Slider for selecting a value within a range

forminputslider

OTP Input

One-time password field

forminputsecurity

Auth Button

Authentication-related buttons

uiauthenticationbutton

Dropdown Button

Button with additional dropdown options

Progress Bar

Visual representation of progress or completion

uifeedbackstatus

Breadcrumb

Navigation trail showing current page hierarchy

uinavigationhierarchy

Rating

Interactive rating or display for user feedback

uiinputfeedback

Stepper

Multi-step progress or form navigation

uinavigationprogress

Timeline

Chronological event or process visualization

uidisplaychronology

Product Card

E-commerce product cards with animation and basic functionality.

e-commerceproductcardanimation

Ads Card

Ads cards for showing ads in e-commerce website.

e-commerceadscardanimation

Blocks

Responsive navbar

Adaptive navigation bar that adjusts to different screen sizes

layoutnavigationresponsive

Hero section

Prominent introductory section with key messaging and call-to-action

landingmarketingui

Pricing section

Comprehensive pricing plan display with feature comparisons

businesspricingcomparison

Responsive footer

Adaptable footer that scales across different device sizes

layoutnavigationresponsive

Contact form

Interactive form for user communication and feedback

forminteractioncommunication

Multi step form

Complex form divided into sequential, manageable stages

formprocessworkflow

Newsletter form

Subscription form for email list sign-ups

formmarketingsubscription

404 page

Custom error page for handling non-existent routes

errornavigationui

Empty page

Minimal template for creating new page layouts

templatelayoutstarter

Responsive searchbar

Adaptive search that works across different device sizes

searchinputresponsive

Responsive sidebar

Flexible side navigation that adapts to screen dimensions

navigationlayoutresponsive

Checkout Page

Checkout page with selected products and payment options.

e-commercecheckoutpayment

Product Details Page

Product details page with functionality and product view carousel.

e-commerceproduct details pageproductdetails

Offer Grid

Grid layouts for showing e-commerce product offers.

e-commerceofferproductgrid layout

↑up navigate

↓down navigate

↵select

Escclose

Components

Input

Basic text field for user data entry

Textarea

Multi-line textarea for longer text content

formtextmultiline

Switch

Toggle switch for binary on/off selections

formtoggleboolean

Comparison Card

Compare items side-by-side for easy analysis.

slidercomparisoncard

Select

Dropdown selection component for choosing from multiple options

forminputdropdown

Tree Dropdown

Hierarchical dropdown with nested selection options

formdropdownnestedhierarchy

Radio

Radio button group for selecting a single option

forminputselection

File

File upload for selecting and uploading files

forminputupload

Normal Button

Standard button component for user interactions

uiinteractivebutton

Timer

A timer lets you set a specific duration, and it counts down based on that duration, notifying you when the time is up.

timercount-downtimer effect

RGB Border

Colorful border effect with RGB color transitions

uistylingeffect

Hover Animated Cards

Interactive cards with smooth hover animations

uianimationinteractive

Drag & Drop

Drag and drop interface for interactive content movement

uiinteractivedrag-drop

Animated Button

Button with dynamic animation effects

uibuttonanimation

Context Menu

Contextual menu displaying actions based on user interaction

uimenuinteractive

Cards

Flexible card layout for displaying content

uilayoutcontainer

Accordion

Expandable/collapsible content sections

uilayoutinteractive

Resources

Documentation and resource links

documentationresources

Custom Hooks

Reusable React hook utilities

reacthooksutility

Pie Chart

Circular statistical chart for data visualization

chartdatavisualization

App Bar

Top navigation bar for application layout

uinavigationlayout

Table

Structured data display component

Github Activity Graph

Track user activity like github activity tracker graph.

uidatadisplaygraph

Image Gallery

Interactive image display and browsing component

Pagination

Navigation control for paginated content

uinavigationcontrol

Dropdown Menu

Expandable menu for selecting options

uimenuselection

Chip

Compact, interactive tag or filter element

Modal

Overlay dialog for focused interactions

uioverlayinteractive

Tabs

Tabbed interface for organizing content

uinavigationlayout

Skeleton

Placeholder loading state for content

uiloadingplaceholder

Alert Message

Informative message display component

uinotificationfeedback

Dialog

Interactive dialog box for user confirmations

uioverlayinteractive

Testimonial

Display customer or user testimonials

uicontentsocial-proof

Loader

Visual loading indicator

uiloadingfeedback

Notification

System or application notification display

uifeedbackalert

Badge

Small status or informational label

Tooltip

Contextual information popup

uiinformationhover

Code

Code display and syntax highlighting

uidisplaydevelopment

Snippet

Compact code or text snippet display

Number Input

Field specifically for numeric values

forminputnumeric

Checkbox Input

Checkbox for multiple selection options

forminputselection

Strong Password

Password with strength validation

forminputsecurity

Range Input

Slider for selecting a value within a range

forminputslider

OTP Input

One-time password field

forminputsecurity

Auth Button

Authentication-related buttons

uiauthenticationbutton

Dropdown Button

Button with additional dropdown options

Progress Bar

Visual representation of progress or completion

uifeedbackstatus

Breadcrumb

Navigation trail showing current page hierarchy

uinavigationhierarchy

Rating

Interactive rating or display for user feedback

uiinputfeedback

Stepper

Multi-step progress or form navigation

uinavigationprogress

Timeline

Chronological event or process visualization

uidisplaychronology

Product Card

E-commerce product cards with animation and basic functionality.

e-commerceproductcardanimation

Ads Card

Ads cards for showing ads in e-commerce website.

e-commerceadscardanimation

Blocks

Responsive navbar

Adaptive navigation bar that adjusts to different screen sizes

layoutnavigationresponsive

Hero section

Prominent introductory section with key messaging and call-to-action

landingmarketingui

Pricing section

Comprehensive pricing plan display with feature comparisons

businesspricingcomparison

Responsive footer

Adaptable footer that scales across different device sizes

layoutnavigationresponsive

Contact form

Interactive form for user communication and feedback

forminteractioncommunication

Multi step form

Complex form divided into sequential, manageable stages

formprocessworkflow

Newsletter form

Subscription form for email list sign-ups

formmarketingsubscription

404 page

Custom error page for handling non-existent routes

errornavigationui

Empty page

Minimal template for creating new page layouts

templatelayoutstarter

Responsive searchbar

Adaptive search that works across different device sizes

searchinputresponsive

Responsive sidebar

Flexible side navigation that adapts to screen dimensions

navigationlayoutresponsive

Checkout Page

Checkout page with selected products and payment options.

e-commercecheckoutpayment

Product Details Page

Product details page with functionality and product view carousel.

e-commerceproduct details pageproductdetails

Offer Grid

Grid layouts for showing e-commerce product offers.

e-commerceofferproductgrid layout

↑up navigate

↓down navigate

↵select

Escclose

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 )

Placeholder Type

Effect Type

Optimize Images

Use Intersection observer

Loading Offset (px)

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/>

Mountain Lake

Sunset Over Forest

We use cookies to improve your experience, personalize content, and analyze traffic. By clicking "Accept" you agree to our cookie use. For details, see our Privacy Policy.