Every UI components, hooks, tools, ... you need
Cuicui is a collection of components, tools, and hooks that are designed to be simple, customizable and educational.
Damien Schneider
CEO, Modul
Modul is a time-saver! Our team is more productive, and app integration has never been smoother. Kudos to the Modul team!
export const = explanations = { main : "This component needs more than the default code block to be displayed" detailed : "For now, if you want the exact same behaviour, please check the github" }
Please try again
This is the description part
Damien Schneider
CEO, Modul
Modul is a time-saver! Our team is more productive, and app integration has never been smoother. Kudos to the Modul team!
export const = explanations = { main : "This component needs more than the default code block to be displayed" detailed : "For now, if you want the exact same behaviour, please check the github" }
Please try again
This is the description part
Why another library
Another Library ? Come on...
Cuicui is not just another library, it's a collection of components, tools, and hooks that are designed to be simple, customizable and educational.
Copy-Paste simplicity
Own the code, no more black box libraries, you can copy-paste the code and make it yours.
Easy customization
Libraries are oftent limited, Cuicui is designed to be flexible and easy to customize.
Promoting good practices
Having micro-interaction, use as much css as possible, instead of js, etc.
Creative effects
Creative effects are often a secret sauce, Cuicui shows you how to make them.
Learn how it works
Libraries often hide the complexity, Cuicui shows everything, so you can learn how everything works.
Application UI
A collection of UI components for advanced applications.
Action Menu
Create action menus to display actions in a dropdown
Alert
Alert components
Authentication
Authentication components
Battery
Battery components
Code
Code components with special interactions
Color Picker
A collection of color pickers.
Context Menu
Context menu components
Cookie Banner
Display a cookie banner to inform users about cookies
Dropdown Menu
Dropdown menu components
Keyboard
Keyboard components with various styles
Notification
Notification components
Search Bars
Search bar components
Settings
Settings components with animations
Signature
Signature components
Sliders
Slider components with animations
Static Steppers
Components to display a list of steps
Table of Contents
Table of contents components
Theme
Theme components
Tree
Tree components
Common UI
A collection of common UI components for your projects.
Avatars
Create simple avatars with different styles
Badges
Badges with various styles and purposes
Blockquotes
Blockquotes with different styles
Buttons
Buttons with various animations and styles
Cards
Cards with various layouts and effects
Checkboxes
Checkboxes with various styles and interactions
Inputs
Inputs with various styles and interactions
Loaders
Loaders with various styles and effects
navbar
navbar
Preview not available
Navigation
Navigation components with different effects
Skeletons
Skeletons with various effects for loading states
Toggle
Toggle components
Hooks
A collection of React hooks for building modern applications.
Use Auto Scroll
A hook to automatically scroll a list
Use Battery
A hook to get battery informations
Use Click Outside
A React hook that allows you to detect clicks outside of a specified element.
useCookies
A universal React hook for managing cookies.
Use Copy to Clipboard
A hook that allows you to copy text to the clipboard
Use counter
A hook that allows you to count easily
Use debounce
A hook that allows you to debounce the value of an input
Use Event Callback
A hook that returns a memoized event callback
Use Event Listener
A hook that allows you to manage event listeners on DOM elements
Use First Visit
A hook that provides a first visit functionality to your application
Use GeoLocation
A hook that allows you to access and manage the user's geolocation data
Use in View
A hook that allows you to know if an element is in the viewport
Use Input Value
A hook that allows you to manage the value of an input field
Use Isomorphic Layout Effect
A hook that allows you to use the isomorphic version of useLayoutEffect, ensuring compatibility with server-side rendering.
Use Key Press
A hook that allows you to know if an element is in the viewport
Use Konami Code
A hook that detects the Konami Code sequence and triggers actions accordingly
Use Local Storage
A hook that allows you to manage and persist state using localStorage
Use Location
A hook that allows you to access and manage the current location in your application
Use Measure
A hook that allows you to measure the size of an element in your application
Use Mouse
A simple hook to get the mouse position.
Use Network Status
A hook to get the network status
Use Online Status
A hook that allows you to monitor the online/offline status of the user's device
Use Rerender
A hook that throttles the execution of a function, limiting how often it can be invoked
Use Session Storage
A hook that allows you to manage session storage values
Use Speech to Text
A hook that allows you to convert speech to text
Use Step
Create a step component
Use Stopwatch
A hook that provides a stopwatch functionality to your application
Use Text to Speech
A hook that allows you to convert text to speech
Use Throttle
A hook that throttles the execution of a function, limiting how often it can be invoked
Use Video
A hook that provides a video player functionality to your application
Use Window Scroll Position
A hook that allows you to track the window's scroll position
Use Window Size
A hook that allows you to track the size of the browser window
Marketing UI
A collection of UI components for marketing websites.
Carousels
Showcase your product testimonials with style
FAQ
A collection of FAQ components for your projects.
Features
Showcase your product features with style
Footer
Customize the footer section of your website with various styles and components.
Pricing Tables
Showcase your product pricing with style
Statistics
Showcase your product statistics with style
Testimonials
Showcase your product testimonials with style
Other
A collection of creative advanced UI components for your projects.
Creative Effects
An all bunch of creative effects that can be used in any project with any artisitic style
Cursors
Create cursor effects
Equalizer
An equalizer component that can be used in any project with any artisitic style
Font Effects
An all bunch of creative effects that can be used in any project with any artisitic style
cuicui
Mock-ups
Create mock-ups without images, just with CSS and HTML for better performance, SEO and accessibility & also more micro-interactions
Patterns
Create patterns without images, just with CSS and HTML for better performance, SEO and accessibility & also more micro-interactions
QR Code
QR Code components to scan and generate QR codes
Transition wrappers
Create transition wrappers to animate any component without changing your code
Utils
A collection of utility components for your projects.