HextaUI is a collection of modern, responsive, and customizable UI components designed for Next.js. It offers features like endless customization, stunning components, dark mode readiness, and production-ready code. Ideal for building efficient and clean-coded web applications.
Features
Endless Customization
Fully customizable with props and Tailwind classes, allowing for tailored UIs.
Stunning Components
Modern, responsive UI components designed specifically for Next.js.
Your Project, Your Code
Copy, modify, and integrate components with clean code to fit your project needs.
Lightning Fast
Optimized for performance and responsiveness, ensuring fast load times.
Dark Mode Ready
Seamless support for dark mode, allowing easy theme switching.
Production Ready
Battle-tested components that are ready to use in real-world application scenarios.
Next.js Initialization
Guides you in creating a new Next.js project with specific setup options like TypeScript, Tailwind CSS, and App Router.
ShadCN Components
Allows you to set up ShadCN within a Next.js project, configure components.json for styling, and add UI components like button elements to enhance the app's UI.
Framer Motion Integration
Provides instructions to install and use Framer Motion for adding animations to your project, enhancing interactivity and visual appeal.
React Icons Integration
Enables simple installation and usage of React Icons for adding scalable vector icons to your project, useful for UI components.
Canvas Confetti Integration
Describes installation and usage of the Canvas Confetti library to add fun, celebratory animations to the app's interface.
Animated Icons
A dock with icons that animate and grow on hover, creating an engaging user experience.
Customizable Dock Items
Allows developers to customize the dock items by specifying links, icons, and targets. Users can define the appearance and behavior of each item.
Responsive Design
Works perfectly on all screen sizes.
Customizable
Easily customizable with your own data.
Dark Mode
Toggleable dark mode.
Fast Performance
Optimized for fast loading times.
SEO Optimized
Optimized SEO for ranking.
Responsive Design
Works perfectly on all screen sizes.
Customizable
Easily customizable with your own data.
Dark Mode
Toggleable dark mode.
Fast Performance
Optimized for fast loading times.
SEO Optimized
Optimized SEO for ranking.
3D Carousel
This feature allows you to create a 3D carousel using Framer Motion. It provides a visually engaging way to display content by animating elements into a 3D space.
Confetti Animation Integration
Easily add confetti animation to your website using the canvas-confetti library. This feature allows you to create visual effects like basic, realistic, fireworks, star, snow, and school pride confetti with customizable particle count and spread options.
Utility Function for Random Range
Provides a reusable utility function to generate random numbers within a specified range, which can be utilized in various animation configurations for dynamic effects.
Gradient Tracing Animation
Visualize gradient information on 3D surfaces, which allows users to see how gradients behave and change over time, aiding in understanding vector fields or surface properties.
Preset Shapes
Provides multiple predefined shapes like Torus, Mobius Band, Trefoil Knot, and others for visualizing gradient animations, enabling easy experimentation without custom shape creation.
Interactive Controls
Offers slider controls to adjust parameters of the gradient tracing animations, providing users with the ability to see real-time changes and better understand different configurations.
Magic Text
An animated text component that reveals text as you scroll down the page. It creates a dynamic and engaging effect for presenting text content.