Input
Basic text field for user data entry
Textarea
Multi-line textarea for longer text content
Switch
Toggle switch for binary on/off selections
Comparison Card
Compare items side-by-side for easy analysis.
Select
Dropdown selection component for choosing from multiple options
Tree Dropdown
Hierarchical dropdown with nested selection options
Radio
Radio button group for selecting a single option
File
File upload for selecting and uploading files
Normal Button
Standard button component for user interactions
Timer
A timer lets you set a specific duration, and it counts down based on that duration, notifying you when the time is up.
RGB Border
Colorful border effect with RGB color transitions
Hover Animated Cards
Interactive cards with smooth hover animations
Drag & Drop
Drag and drop interface for interactive content movement
Animated Button
Button with dynamic animation effects
Context Menu
Contextual menu displaying actions based on user interaction
Cards
Flexible card layout for displaying content
Accordion
Expandable/collapsible content sections
Resources
Documentation and resource links
Custom Hooks
Reusable React hook utilities
Pie Chart
Circular statistical chart for data visualization
App Bar
Top navigation bar for application layout
Table
Structured data display component
Github Activity Graph
Track user activity like github activity tracker graph.
Image Gallery
Interactive image display and browsing component
Pagination
Navigation control for paginated content
Dropdown Menu
Expandable menu for selecting options
Chip
Compact, interactive tag or filter element
Modal
Overlay dialog for focused interactions
Tabs
Tabbed interface for organizing content
Skeleton
Placeholder loading state for content
Alert Message
Informative message display component
Dialog
Interactive dialog box for user confirmations
Testimonial
Display customer or user testimonials
Loader
Visual loading indicator
Notification
System or application notification display
Badge
Small status or informational label
Tooltip
Contextual information popup
Code
Code display and syntax highlighting
Snippet
Compact code or text snippet display
Number Input
Field specifically for numeric values
Checkbox Input
Checkbox for multiple selection options
Strong Password
Password with strength validation
Range Input
Slider for selecting a value within a range
OTP Input
One-time password field
Auth Button
Authentication-related buttons
Dropdown Button
Button with additional dropdown options
Progress Bar
Visual representation of progress or completion
Breadcrumb
Navigation trail showing current page hierarchy
Rating
Interactive rating or display for user feedback
Stepper
Multi-step progress or form navigation
Timeline
Chronological event or process visualization
Product Card
E-commerce product cards with animation and basic functionality.
Ads Card
Ads cards for showing ads in e-commerce website.
Responsive navbar
Adaptive navigation bar that adjusts to different screen sizes
Hero section
Prominent introductory section with key messaging and call-to-action
Pricing section
Comprehensive pricing plan display with feature comparisons
Responsive footer
Adaptable footer that scales across different device sizes
Contact form
Interactive form for user communication and feedback
Multi step form
Complex form divided into sequential, manageable stages
Newsletter form
Subscription form for email list sign-ups
404 page
Custom error page for handling non-existent routes
Empty page
Minimal template for creating new page layouts
Responsive searchbar
Adaptive search that works across different device sizes
Responsive sidebar
Flexible side navigation that adapts to screen dimensions
Checkout Page
Checkout page with selected products and payment options.
Product Details Page
Product details page with functionality and product view carousel.
Offer Grid
Grid layouts for showing e-commerce product offers.
Input
Basic text field for user data entry
Textarea
Multi-line textarea for longer text content
Switch
Toggle switch for binary on/off selections
Comparison Card
Compare items side-by-side for easy analysis.
Select
Dropdown selection component for choosing from multiple options
Tree Dropdown
Hierarchical dropdown with nested selection options
Radio
Radio button group for selecting a single option
File
File upload for selecting and uploading files
Normal Button
Standard button component for user interactions
Timer
A timer lets you set a specific duration, and it counts down based on that duration, notifying you when the time is up.
RGB Border
Colorful border effect with RGB color transitions
Hover Animated Cards
Interactive cards with smooth hover animations
Drag & Drop
Drag and drop interface for interactive content movement
Animated Button
Button with dynamic animation effects
Context Menu
Contextual menu displaying actions based on user interaction
Cards
Flexible card layout for displaying content
Accordion
Expandable/collapsible content sections
Resources
Documentation and resource links
Custom Hooks
Reusable React hook utilities
Pie Chart
Circular statistical chart for data visualization
App Bar
Top navigation bar for application layout
Table
Structured data display component
Github Activity Graph
Track user activity like github activity tracker graph.
Image Gallery
Interactive image display and browsing component
Pagination
Navigation control for paginated content
Dropdown Menu
Expandable menu for selecting options
Chip
Compact, interactive tag or filter element
Modal
Overlay dialog for focused interactions
Tabs
Tabbed interface for organizing content
Skeleton
Placeholder loading state for content
Alert Message
Informative message display component
Dialog
Interactive dialog box for user confirmations
Testimonial
Display customer or user testimonials
Loader
Visual loading indicator
Notification
System or application notification display
Badge
Small status or informational label
Tooltip
Contextual information popup
Code
Code display and syntax highlighting
Snippet
Compact code or text snippet display
Number Input
Field specifically for numeric values
Checkbox Input
Checkbox for multiple selection options
Strong Password
Password with strength validation
Range Input
Slider for selecting a value within a range
OTP Input
One-time password field
Auth Button
Authentication-related buttons
Dropdown Button
Button with additional dropdown options
Progress Bar
Visual representation of progress or completion
Breadcrumb
Navigation trail showing current page hierarchy
Rating
Interactive rating or display for user feedback
Stepper
Multi-step progress or form navigation
Timeline
Chronological event or process visualization
Product Card
E-commerce product cards with animation and basic functionality.
Ads Card
Ads cards for showing ads in e-commerce website.
Responsive navbar
Adaptive navigation bar that adjusts to different screen sizes
Hero section
Prominent introductory section with key messaging and call-to-action
Pricing section
Comprehensive pricing plan display with feature comparisons
Responsive footer
Adaptable footer that scales across different device sizes
Contact form
Interactive form for user communication and feedback
Multi step form
Complex form divided into sequential, manageable stages
Newsletter form
Subscription form for email list sign-ups
404 page
Custom error page for handling non-existent routes
Empty page
Minimal template for creating new page layouts
Responsive searchbar
Adaptive search that works across different device sizes
Responsive sidebar
Flexible side navigation that adapts to screen dimensions
Checkout Page
Checkout page with selected products and payment options.
Product Details Page
Product details page with functionality and product view carousel.
Offer Grid
Grid layouts for showing e-commerce product offers.
React
Tailwind CSS
Next JS
ZenUI Library is an Tailwind CSS components library for any needs. Comes with UI examples & blocks, templates, Icons, Color Palette and more.
ZenUI offers fully customizable components that can seamlessly adapt to any project. With just a basic understanding of React and Tailwind CSS, you can easily modify and integrate these components to match your specific requirements.
All ZenUI components are designed following modern design principles, ensuring they meet the latest industry standards. With a sleek, responsive, and customizable structure, they can easily adapt to any project.
All ZenUI components feature highly structured code, designed with beginners in mind. The clean, well-organized code includes helpful comments, making it easy to understand and implement.
ZenUI is incredibly easy to use. You don’t need to install any dependencies, just copy the code and integrate it directly into your project. This hassle-free approach allows you to start using ZenUI components instantly, without any additional setup.
600+
Streamline Your Development with Ready-to-Use UI Components from ZenUI Library
Streamline your workflow with a versatile color palette, an extensive icon library, and a dynamic keyboard shortcut generator.
Type your custom shortcut to instantly generate a function with conditions, enabling specific logic execution when the shortcut keys are pressed. Make Simplify your workflow!
Explore and enjoy ZenUI Library's collection of free icons, designed for customization and easy integration. Download and use them to enhance your projects.
Config AI will provide you with a ready-to-use configuration by generating a tailwind.config.js file with custom colors, fonts, and other settings tailored to your project needs.
Customize your color shades! Paste a color code to explore shades, view hex, RGB, and HSL codes, and copy them instantly for seamless integration into your projects.
Thoughts from those who've experienced ZenUI in action.
ZenUI is one of the best ui library i have ever used.
ZenUI is a fantastic tool for developers! Offering pre-built website templates with React and Tailwind CSS UI components, it truly simplifies the development process. Good Luck! 🚀✊
It’s perfect, clean, simple, beautiful and with tailwind
Nice there’s a ton of great UI components in this collection! 🥳 I love you can just copy/paste the code and adjust it for your project 👍🏻 Great job!
The design of ZenUI looks amazing, it good for all developers.
A fabulous work. It's a great ui library for react and next.js developer
Congratulations to the makers… ZENUI looks amazing… thanks for making it even better ❤️🌟👍
Cool UI components! It also offers many additional components that aren’t provided by ShadCN, Radix UI, or other popular UI providers.
The design of ZenUI looks amazing the range of templates and components will be a big for many developers
The most interesting feature is that the code blocks can be used in any framework with just a tiny manipulation. Also, easy to use, has no installation hassle, and has understandable codes.
ZenUI is impressive 👌 The attention to detail and usability of the components are top-notch. It's clear a lot of thought went into making this a must-have for developers. Excited to see how ZenUI shapes the future of UI design!
ZENUI is amazingly easy to use. It offers high-quality components and makes it super easy to use across various use-cases. Great tool for UI design! Excited to use it a bunch!
ZenUI is a great tool for fast website development. The templates are modern and easy to use, making it simple to build impressive designs quickly. It’s a solid resource for any developer looking to create sleek, responsive websites.
🚀 ZenUI offers free templates, components, icons, and a color palette library, making it an invaluable resource for developers and designers looking to streamline their workflow.
This UI library is different, because you will find here all of unique components for free.
This is a really amazing component library in Bangladesh. Keep updating and give us new UI knowledge from your brain..
20+
Free, ready-to-use templates to build your projects at lightning speed, perfect for anyone looking to save time without sacrificing quality.
Find quick answers to common queries
ZenUI Library is a free collection of UI components and templates designed for developers and businesses. It offers a variety of pre-built components, website templates, essential blocks, and SVG icons to help speed up web development.
Yes, ZenUI Library is completely free to use. It provides high-quality UI components and templates at no cost, making it accessible to everyone.
Absolutely! All components in ZenUI Library are fully customizable. You can modify them to fit your project's design requirements using your preferred CSS framework or custom styles.
Attribution is appreciated but not required. You're free to use ZenUI Library in your projects without needing to give credit, although a mention would help support the project.
ZenUI Library is regularly updated with new components, templates, and features. The team behind ZenUI is committed to keeping the library fresh and relevant to current design trends.
Yes, you can use every component in ZenUI Library with your React, Tailwind CSS, and Next.js projects. However, compatibility with Vue is coming soon, so stay tuned for updates!
Yes, contributions are welcome! If you’re a designer or developer who wants to contribute to the ZenUI Library, you can submit your components or templates. Your contributions will be credited on the website's 'About Us' section.
ZenUI Library stands out for its focus on simplicity and ease of use. It’s designed to be lightweight, customizable, and accessible, making it ideal for developers who need quick, high-quality solutions without the bloat of larger libraries. Additionally, unlike many other UI libraries, you don't need to install ZenUI Library in your project—just copy the code and use it without any dependencies. This makes integration fast and hassle-free.
Yes, ZenUI Library provides detailed documentation for each component and template. The documentation includes usage instructions, code examples, and customization tips to help you get started quickly.
You can stay updated by following ZenUI Library on social media, subscribing to the newsletter, or checking the official website regularly. Updates and new releases are announced through these channels.
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.
