UUibrary
Open-source UI components for your projects.
accordion
A vertically stacked set of collapsible containers allowing users to toggle content visibility.
accordion
A vertically stacked set of interactive headings that each reveal a section of content with a neobrutalism design style.
alert
Displays a callout for user attention with various styling options in neobrutalism design.
alert-dialog
A modal dialog that interrupts the user with important content and expects a response in neobrutalism design style.
animated-background
Visually highlights selected items by sliding a background into view when hovered over or clicked.
animated-beam
An animated beam of light which travels along a path.
animated-circular-progress-bar
Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
animated-gradient-text
An animated gradient background which transitions between colors for text.
animated-grid-pattern
A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
animated-group
A wrapper that adds animated transitions to a group of child elements.
animated-list
A list that animates each item in sequence with a delay.
animated-number
A simple animated number animation.
animated-shiny-text
A light glare effect which pans across text making it appear as if it is shimmering.
animated-subscribe-button
An animated subscribe button useful for showing a micro animation from intial to final result.
autosize-textarea
Auto resize textarea height based on content.
avatar
Displays a user's profile picture or initials with neobrutalism design style.
badge
Displays a small badge or label with neobrutalism design style.
bento-grid
Bento grid is a layout used to showcase the features of a product in a simple and elegant way.
bg-animate-button
A button with gradient and animation defaults.
bg-animated-fractal-grid
An interactive canvas fractal dot grid component to add dynamic visual interest to your UI..
bg-media
A full screen background media component for videos or images.
blockquote
Display a quote or a component that looks like a quote.
border-beam
An animated beam of light which travels along the border of its container.
border-trail
Animated border effect that moves along the edges of its parent container.
box-reveal
Sliding box animation that reveals text behind it.
breadcrumb
Displays a navigation path showing the user's location in a hierarchical structure with neobrutalism design style.
button
A clickable button element with various styles and sizes in neobrutalism design.
carousel
A flexible and easy-to-use carousel with customizable navigation and indicators.
color-picker
A color picker component that allows users to select and customize colors with various formats and options..
confetti
Confetti animations are best used to delight your users when something special happens.
cursor
A custom cursor component with optional spring animations.
datetime-picker
A datetime picker built on top of shadcn-ui and no additional library needed.
dialog
Customize the dialog with variants and transition.
direction-aware-tabs
Tabs that animate direction correctly.
disclosure
The Disclosure component allows users to toggle the visibility of content, either collapsed or expanded.
dock
An interactive dock component inspired by macOS dock with animation capabilities..
dock
An implementation of the MacOS dock using react + tailwindcss + framer motion.
dock
A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.
dot-pattern
A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
dual-range-slider
An enhancement slider that allows you to select a range of values.
dynamic-island
A do anything be anything component inspired by apples dynamic island.
expandable
Expandable Card primitive to easily condense and expand details.
feature-carousel
An animated carousel component for showcasing features with smooth transitions and interactive elements..
file-tree
A component used to showcase the folder and file structure of a directory.
flickering-grid
A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
floating-panel
A headless, composable floating panel component.
globe
An autorotating, interactive, and highly performant globe made using WebGL.
glow-effect
A customizable glow effect with animation modes, colors, blur, and transitions.
grid-pattern
A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
heading-with-anchor
Add anchor for every heading.
hover-video-player
A video player component that plays on hover with advanced features like mobile support, picture-in-picture, and custom overlays..
hyper-text
A text animation that scrambles letters before revealing the final text.
image-comparison
Interactively compare two images with a draggable slider to reveal differences.
in-view
Easily animate elements when they come into view.
infinite-scroll
Simple infinite scroll component. You have fully control over the loading spinner and IntersectionObserver API.
infinite-slider
Infinite scrolling slider component that smoothly loops through its children.
interactive-grid-pattern
A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
interactive-hover-button
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
intro-disclosure
A multi-step onboarding and feature introduction component with responsive design..
lightboard
A fun lightboard component used to display moving text and draw in a visually appealing way..
line-shadow-text
A line shadow text component for Magic UI.
loading-button
Display a button or a component that looks like a button with loading spinner. Everything is just the same as the button in shadcnui.
loading-carousel
An animated carousel component with loading indicators and customizable display options..
logo-carousel
An animated carousel component for displaying brand logos with smooth transitions..
magic-back-button
Redirects first-time visitors to the homepage; otherwise, respects browser history.
magic-card
A spotlight effect that follows your mouse cursor and highlights borders on hover.
magnetic
A magnetic effect for elements that allows them to be attracted to the mouse cursor.
marquee
An infinite scrolling component that can be used to display text, images, or videos.
morphing-dialog
A dialog that uses layout animations to transition content into a focused view.
morphing-text
A dynamic text morphing component for Magic UI.
multiple-selector
Fast, composable, fully-featured multiple selector for React.
neumorph-button
A neumorphic button component with customizable hover and press effects..
neumorph-eyebrow
A neumorphic eyebrow text component with subtle animation effects..
number-ticker
Animate numbers to count up or down to a target number.
orbiting-circles
A collection of circles which move in orbit along a circular path.
particles
Particles are a fun way to add some visual flair to your website.
popover
A headless popover animation component with customizable options..
popover
It pops up on command, and closes easily with a click outside or on a close button.
popover-form
A headless popover form animation component with customizable options..
progress-with-value
A progress bar that displays the current value.
pulsating-button
An animated pulsating button useful for capturing attention of users.
responsive-modal
A dialog that pops up in the center of the screen on desktop and slide up on mobile.
ripple
An animated ripple effect typically used behind elements to emphasize them.
ripple-button
An animated button with ripple useful for user engagement.
scratch-to-reveal
The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.
scroll-based-velocity
Scrolling text whose speed changes based on scroll speed.
scroll-progress
Animated Scroll Progress for your pages.
scroll-progress
Animated scroll progress for your web pages.
shimmer-button
A button with a shimmering light which travels around the perimeter.
shine-border
Shine border is an animated background border effect.
shiny-button
A shiny button component with dynamic styles in the dark mode or light mode.
side-panel
A side panel that triggers an expansion animation.
sparkles-text
A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
spinner
A simple spinner for displaying loading state
spinning-text
Easily animate text circularly.
spotlight
A dynamic spotlight effect component that follows cursor movement.
text-animate
A framer motion text animation component.
text-animate
A text animation component that animates text using a variety of different animations.
text-effect
Easily animate text content with various effects.
text-loop
Text animation that transitions between multiple items, creating an engaging looping effect.
text-morph
Animates text by morphing shared letters between words, creating fluid transitions.
text-roll
A text roll component that rotates each character, fully customizable for nice text animations.
text-scramble
Text animation that transforms text by randomly cycling through characters before settling on the final content, creating an engaging cryptographic effect.
text-shimmer-wave
Shimmer wave effect on text.
tilt
3D tilt effect that responds to mouse movement, enhancing UI elements with a dynamic depth effect, customizable rotation factors and spring options.
toolbar-dynamic
A toolbar that changes its height as needed.
transition-panel
Easy way to switch between different pieces of content with enter and exit animations.
warp-background
A container component that applies a warp animation effect to its children.