HextaUI provides modern, responsive, and customizable UI components for Next.js. You can easily copy and paste components to build websites.
Features
Customization
Customizable components to make coding easier. You can adjust and modify styles and settings to fit your specific needs.
Stunning Components
Provides pre-built, visually appealing components that you can copy and paste into your project with ease.
Your Project, Your Code
The components are designed to integrate seamlessly into your existing codebase, allowing for easy customization and integration.
Project Creation
Use the command 'npx create-next-app@latest' to create a new Next.js project.
Installation Prompts
On installation, you can configure your Next.js project with several options like TypeScript, ESLint, Tailwind CSS, src directory, App Router, and import alias.
App Start Command
Navigate into your project directory and use 'npm run dev' to start the development server.
Accordion Implementation
Provides components to create an accordion interface, allowing users to show and hide sections of content.
Variants
Offers different visual styles for the accordion: default, bordered, and ghost.
Custom Icons
Allows users to add custom icons in the accordion header.
Multiple Open
Supports multiple accordions being open at the same time using the 'allowMultiple' prop.
Controlled State
Allows setting a default index to be open and provides a callback for state changes.
Animated Dock
A dock with animated icons that grow on hover. The feature allows icons to enlarge when hovered over, providing a more interactive and visually appealing interface element.
Installation Command
Use the command `npm install @hextastudio/ui` to install the HextaUI library in your project.
Component Addition Command
Use the command `npx hexta-ui add <component_name>` to add specific components to your project. This command downloads the specified component and places it in the `src/components/hexta-ui` directory.
Installation Command
Provides the npm command to install Framer Motion: `npm install framer-motion`.
Example Code
Shows an example of how to use Framer Motion with scroll and transform features in a React component.
Installing GSAP
Guide on how to install GSAP using npm with command `npm install gsap`.
Setup GSAP ScrollTrigger
Instructions to set up ScrollTrigger, a plugin for GSAP. Import `gsap` and `ScrollTrigger` from their respective modules and register the plugin using `gsap.registerPlugin(ScrollTrigger);`.
GSAP Example
Provides a basic example of GSAP use in a React component. It demonstrates importing GSAP and ScrollTrigger, setting up the plugin, and creating an animation using the `useEffect` hook in a functional component.
Create Next.js Project
Automatically sets up a new Next.js project using TypeScript and ESLint with the command `npx create-next-app@latest my-project --typescript --eslint`.
Install Tailwind CSS
Installs Tailwind CSS along with PostCSS and Autoprefixer using the command `npm install -D tailwindcss postcss autoprefixer`, and initializes Tailwind CSS with `npx tailwindcss init -p`.
Configure Template Paths
Helps to set up and edit the `tailwind.config.js` file to specify the paths to all of your template files for Tailwind CSS to apply the styles.
Add Tailwind Directives
Involves adding `@tailwind base;`, `@tailwind components;`, and `@tailwind utilities;` to the `globals.css` file to apply Tailwind's styles.
Start the Build Process
Runs the development server using the command `npm run dev`.
Basic Setup Verification
Includes an example of using Tailwind CSS classes in `index.jsx` to verify setup by displaying 'Hello world' with text styling.
Customization
Allows you to customize any components with your own style seamlessly.
Stunning Components
Provides modern components that can be copied and pasted without any hassle.
Complete Code Integration
Includes complete code examples for easy integration into your projects.
Stunning Design
hextastudio/ui provides components with stunning design and animations.
Easy to Use
hextastudio/ui is easy to use and customize. It is built with Tailwind CSS.
Customization
hextastudio/ui provides customization options to make it easy to fit your brand.
Feedback Rating Component
This feature provides an animated feedback rating system with icons and a textarea for user input. It can be customized to suit various user interface needs.
Icon Integration
Allows for the use of different icons (such as smiley faces) to depict different levels of feedback, making the feedback process more visual and engaging.
Music Player Component
A modern music player UI component that can be integrated into applications. It supports standard music player functionalities such as play, pause, next, and previous. The component is styled and presented using React and Tailwind CSS.
Default Notification
Provides a basic notification component that displays a message, typically used to inform users. It includes an avatar and a basic layout structure.
Notification with Buttons
This feature allows notifications to have interactive buttons, such as dismiss or action buttons, enabling user interaction with the notification.
Post Card Component
An example card component of a social media post, which includes a preview of a tweet-like post with options to like, save, and share.
Complete Code
Provides the code needed to create the Post Card component, including imports for necessary avatars, menus, and React icons.
Integration with Existing Components
The Post Card component integrates with components like Avatar and Menu from the hexta-ui library.
Profile Card
An example component to showcase a user profile card.
Tooltip Support
Integrates tooltip functionality to enhance user interaction on the profile card.
Badge and Button Integration
Allows adding badges and buttons to the profile card for additional features.
Tabs Integration
Allows switching between Login and Signup forms using tabs for better organization and user experience.
Login Form Component
Includes a simple login form with email and password inputs. Users can toggle password visibility.
Signup Form Component
Features a signup form with additional inputs for username, email, and password. Users can also toggle password visibility.
Modern Searchbar
A modern searchbar component that includes an input field for users to type their queries.
Searchbar with Items
A searchbar component that can be used to search within a predefined list of items.
Installation Instructions
Provides the necessary commands and code snippets for installing the searchbar component, including npm installation and component import.
Usage Examples
Examples of how to integrate the searchbar component into a React application, including setting up state and using the component with a list of items.
Notification Settings
Allows users to toggle different types of notifications such as push notifications, email notifications, direct messages, and weekly performance stats.
Members Section
Includes functionality for managing member avatars and a button menu for expanded member actions.
One-Time Payment Option
Allows the user to make a one-time payment of $199.99 for the subscription, providing a clear and straightforward billing process.
Email and Card Information Form
Collects user email, name on card, card details, and billing address to process payments securely.
Card Details Security
Offers an option to save card details securely for 1-click checkout, emphasizing convenience and data security for future transactions.
Bottom Navigation
Bottom navigation is a UI component that provides a navigation system between different sections of an app. It typically appears at the bottom of the screen and may include icons to represent different navigation options.