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
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
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 Color Palette
Create Your Custom Color Palette. Design and Customize Your Unique Color Shades.
Customize Your Color Shades! Paste your color code to explore various shade levels. Instantly view and copy the corresponding hex, RGB, and HSL codes, making it easy to integrate your custom shades into any project.
Copy To Clipboard
Hex Code
RGB Code
HSL Code
Selected Color:
Hex Color: #fff
RGB Color: rgb(0,0,0)
We use cookies to make your experience better.
By accepting, you agree to our Privacy Policy.
Donate