CuiCui - Copy Paste quality React component
CuiCui is a modern UI copy paste library that helps you build beautiful websites and applications. Its name "CuiCui" is for Quick UI.
Explore the component categories
Info
Why another library?
CuiCui is a collection of components that I use in my projects. I wanted to share them with the world.
Getting Started
Learn how to use CuiCui in your project. It's easy and simple.
Contribute
Help us make CuiCui better. Contribute to the project with your ideas or directly on GitHub.
Roadmap
See what's coming next in CuiCui. We have a lot of cool stuff planned.
Changelog
See the latest changes in CuiCui.
Common UI
Avatars
Create simple avatars with different styles
Badges
Badges with various styles and purposes
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison
Blockquotes
Blockquotes with different styles
Buttons
Buttons with various animations and styles
Cuicui
Alpha
Cuicui is a design system for building modern web applications.
Cards
Cards with various layouts and effects
Checkboxes
Checkboxes with various styles and interactions
Drag and drop files here, or click to select
Inputs
Inputs with various styles and interactions
Loaders
Loaders with various styles and effects
Navigation
Navigation components with different effects
Skeletons
Skeletons with various effects for loading states
Marketing UI
Carousels
Showcase your product testimonials with style
00
Cards
H1
01
Text
02
Icons
Hello
03
Buttons
Features
Showcase your product features with style
Pricing Tables
Showcase your product pricing with style
Visitors each days :
0
Statistics
Showcase your product statistics with style
Damien Schneider
This marquee is just awesome
The developper
CuiCui library is just amazing, especially the developper
CuiCui
This is one of the best copy paste library I've ever seen
Damien Schneider
This marquee is just awesome
The developper
CuiCui library is just amazing, especially the developper
CuiCui
This is one of the best copy paste library I've ever seen
Testimonials
Showcase your product testimonials with style
Application UI
Please try again
This is the description part
Alert
Alert components
Authentication
Authentication components
Subscribe to the newsletter
Banners
Banner components
Battery
Battery components
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
Code
Code components with special interactions
Keyboard
Keyboard components with various styles
Press enter to see all the effects
Search Bars
Search bar components
Settings
Settings components with animations
50
Sliders
Slider components with animations
1
Step 1
npx create-react-app my-app2
Step 2
cd my-app3
Step 3
npm start4
Step 4
npm run buildStatic Steppers
Components to display a list of steps
Table of Contents
Table of contents components
Theme
Theme components
Tree
Tree components
Other
Cursors
Create cursor effects
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
Transition wrappers
Create transition wrappers to animate any component without changing your code
Hooks
Picture in Picture
Create a picture in picture mode for your videos
Copy to Clipboard
A hook that allows you to copy text to the clipboard
Use in View
A hook that allows you to know if an element is in the viewport
Use debounce
A hook that allows you to debounce the value of an input
UseCounter
with optional min / max
6
Use counter
A hook that allows you to count easily
Use Network Status
A hook to get the network status
Use Battery
A hook to get battery informations