SupaUI is a TailwindCSS UI library featuring retro components, animations, sections, landing pages, and templates, ready to be integrated into projects.
Features
Ready-to-use Components
Provides a library of pre-designed UI components such as form layouts, tables, modal dialogs, and animations, all ready to be copied and pasted into projects to speed up the development process.
Custom Animations
Offers unique and cool effect animations for creating engaging marketing websites and user interfaces.
Real-time Collaboration
Enables team members to work together in real time, ensuring seamless teamwork and project consistency.
Multi-language Support
Allows the use of the app in over 20 different languages, making it accessible to a broader audience.
Unlimited Animations
Provides users with unlimited access to various animations for enhancing the visual appeal of their projects, suitable for creating engaging user interfaces.
SupaUI MCP Server
Offers unlimited access to the SupaUI MCP Server, allowing for efficient UI component management and customization.
AI Image Create
Allows users to create AI-generated images up to 100 times per month, enhancing design and creative capabilities with cutting-edge technology.
Private Communication Channel
Enables users to have a private communication channel with 24-hour support, ensuring timely assistance and troubleshooting.
3D event badge
Displays a beautiful 3D event badge with React Three Fiber, adding a dynamic and visually appealing element to your web applications.
3D Logo Particles
Utilizes canvas to create a visually striking 3D logo particle effect, enhancing branding and presentation.
Firework Effect
Creates a visually stunning firework display using canvas, perfect for special events or celebrations on your website.
Multi Step Form
Integrates React Hook Form and Zod to create a multi-step form with smooth transitions and validation, improving user experience.
Nintendo NES Controller UI
Features a retro Nintendo NES controller design crafted with TailwindCSS, appealing to nostalgic users.
Sprinkle Flowers Button
A clickable button that triggers a charming flower effect, adding an interactive element to web pages.
Workflow Animation
Illustrates workflows with scrolling animations, helping users understand processes more engagingly.
Animation Password Input
Provides a password input feature with animation effects for checking and tips, enhancing security and UX.
Responsive Navigation
Enables the creation of responsive navigation docks for both mobile and desktop layouts with customizable class options.
Animated Dock
Allows dock animations to enhance user experience, making the navigation feel smooth and interactive.
Customizable Icon Size
Supports setting custom icon sizes, magnification, and distances for dock items to fit various design needs.
Step Props
Defines properties like label, value, and stepSvg that help you customize and manage the different stages of animations within web applications.
Swiper integration
Enables a smooth, touch-friendly image browsing experience by seamlessly integrating swiper functionality into galleries.
Autoplay capability
Allows images to cycle automatically, enhancing viewer engagement without requiring manual intervention.
Thumbnails display
Shows thumbnails below the main gallery images for easy navigation through the image collection.
Progress indicator
Displays a progress bar that visually represents the slideshow's progression, providing users with an idea of timing.
Reorder Card
Displays a reorder card component that allows users to easily modify the order of items, enhancing user interface customization.
Animation Support
Integrates animations like levitate and swap through components, adding dynamic visual effects to applications.
Tailwind Merge Utility
Includes a utility for merging Tailwind CSS class names, optimizing your styles for seamless integration.
Beautiful Color Display
Displays a vibrant and visually appealing color card that can enhance the look of any web project.
Easy Installation
Integrates seamlessly by installing shadcn components and copying the Color Card code into your project.
React Payment Inputs integration
Provides payment input handling using the 'react-payment-inputs' library, making it easier to build payment forms.
Customization with Radix-UI labels
Allows customization of input labels using '@radix-ui/react-label', enhancing the UI compatibility with Radix UI components.
Class variance merging utility
Incorporates 'class-variance-authority' for utility merging, enabling seamless integration with CSS frameworks like Tailwind CSS.
Password Requirement Indicators
Displays interactive prompts showing if password requirements such as length, number inclusion, uppercase and lowercase letters, and special characters are met.
Customizable Password Input
Allows developers to customize the password input field through a set of props and class utilities, enabling integration with various frontend frameworks.