Bento Tailwind UI Library is a tool for creating bento grids using TailwindCSS and shadcn. It provides pre-made components that can be customized and implemented quickly. The tool supports frameworks like Next.js and React, and offers a one-time pricing option for access to all grids.
Features
Lightning Speed Bento Grids
Easily copy and paste your preset from selected components to quickly build UI grids with speed and efficiency.
Customizable and Bold Design
Access unlimited designs one at a time until you are satisfied, making it easy to customize the look and feel of your UI.
Source Code Access with Toggle
Get direct access to the source code by using the Code toggle, making the development process more straightforward.
Premium Components Unlocked
Gain access to all premium components for a lifetime, offering beautifully designed premium grids and ensuring full responsiveness and customization.
Fully Responsive & Customizable
Components are optimized for responsiveness and can be easily customized to fit your design needs using React / Next.js / Tailwind CSS code.
Custom Grid Component
Tailor a grid component to your specific needs, with a focus on one component at a time, including design and development, unlimited revisions, and a private communication channel.
Hero Headers
Stylish header components for creating impactful landing pages with call to action.
Animated Headers
Visually appealing animated header designs to capture user attention on page load.
Sign Up Form
Pre-designed sign-up forms to quickly implement user registration functionality.
Mini Headers
Compact header designs for section introductions or smaller display areas.
Testimonials
Components for displaying customer testimonials and quotes to build trust.
Newsletter Sign Up
Engaging newsletter sign-up components for email marketing.
Light Hero
Bright and minimalistic hero sections suitable for a modern website look.
Content Section
Versatile layouts for presenting content effectively on a page.
Counter Section
Dynamic number counters for showcasing statistics or achievements.
Call to Action Card
Focused components to drive user action with compelling messages.
Stats Card
Components to display key statistics in an easy-to-digest format.
Dark Hero
Dark-themed hero sections for creating striking contrasts on webpages.
Pricing Tables
Comparison tables to clearly present different pricing options.
Pricing Card
Simple pricing cards for individual product or service offerings.
Main Blog
Full-featured blog components for sharing articles and updates.
Footer Section
Comprehensive footer designs to facilitate site navigation and provide information.
Feature List Grid
Layout to effectively showcase product features or service offerings.
Social Proof Section
Components to display user endorsements and build credibility.
Contact Form
Ready-to-use contact forms for user inquiries and feedback.
Hero Boxes
A component that highlights featured plans with interactive cards. It showcases various strategies and plans with details like CAGR and returns, offering a visual and organized layout for promoting different plans.
Code Preview and Integration
Offers a code preview option allowing developers to view and integrate the component into their projects using specific npm packages.
404 Page Component
A premade 'Alone 404' page design featuring an astronaut with a cosmic background. It provides a visually appealing way to handle page-not-found errors on websites using Tailwind CSS framework.
Next.js Configuration
Provides configuration settings for Next.js within a Next.js project, specifically for handling image domains using Cloudinary.
Simple Navbar Component
A customizable simple navbar component that can be integrated into your web projects using Tailwind CSS. It includes menu options like Home, Components, and About, with a call-to-action button labeled ‘Contact Us’.
Installation Instructions
The page provides clear instructions on how to install necessary dependencies using npm, specifically for framer-motion, lucide-react, and next-navigation.
Code Imports
Guides on what specific code imports are needed for implementation, including motion and AnimatePresence from framer-motion, chevronDown from lucide-react, and usePathname from next-navigation.