UUibrary
Open-source UI components for your projects.
3dcard-effect
A card perspective effect, hover over the card to elevate card elements..
3dpin
A gradient pin that animates on hover, perfect for product links..
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-modal
A customizable, compound modal component with animated transitions.
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.
animated-testimonials
Minimal testimonials sections with image and quote..
animated-tooltip
A cool tooltip that reveals on hover, follows mouse pointer.
apple-cards-carousel
A sleek and minimal carousel implementation, as seen on apple.com.
aurora-background
A subtle Aurora or Southern Lights background for your website..
autosize-textarea
Auto resize textarea height based on content.
avatar
Displays a user's profile picture or initials with neobrutalism design style.
background-beams
Multiple background beams that follow a path of SVG, makes a good hero section background..
background-beams-with-collision
Exploding beams in the background.
background-boxes
A full width background box container that highlights on hover.
background-gradient
An animated gradient that sits at the background of a card, button or anything..
background-gradient-animation
A smooth and elegant background gradient animation that changes the gradient position over time..
background-lines
A set of svg paths that animate in a wave pattern.
badge
Displays a small badge or label with neobrutalism design style.
bento-grid
A skewed grid layout with Title, description and a header component.
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.
canvas-reveal-effect
A dot background that expands on hover, as seen on Clerk's website.
card-hover-effect
Hover over the cards and the effect slides to the currently hovered card..
card-spotlight
A card component with a spotlight effect revealing a radial gradient background.
card-stack
Cards stack on top of each other after some interval.
cards
A set of cards that can be used for different use cases.
carousel
A customizable carousel with microinteractions and slider..
carousel
A flexible and easy-to-use carousel with customizable navigation and indicators.
code-block
A configurable code block component built on top of react-syntax-highlighter..
color-picker
A color picker component that allows users to select and customize colors with various formats and options..
colourful-text
A text component with various colours, filter and scale effects..
compare
A comparison component between two images, slide or drag to compare.
confetti
Confetti animations are best used to delight your users when something special happens.
container-cover
A Cover component that wraps any children, providing beams and space effect, hover to reveal speed..
container-scroll-animation
A scroll animation that rotates in 3d on scroll.
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-hover
A direction aware hover effect using Framer Motion, Tailwindcss and good old javascript..
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.
evervault-card
A cool card with amazing hover effect, reveals encrypted text and a mixed gradient..
expandable
Expandable Card primitive to easily condense and expand details.
expandable-card
Click cards to expand them and show additional information.
feature-carousel
An animated carousel component for showcasing features with smooth transitions and interactive elements..
feature-sections
A set of feature sections ranging from bento grids to simple layouts.
file-tree
A component used to showcase the folder and file structure of a directory.
file-upload
A minimal file upload form with background grid, drag and drop, and micro interactions..
flickering-grid
A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
flip-words
A component that flips through a list of words.
floating-dock
A floating dock mac os style component, acts as a navigation bar..
floating-navbar
A sticky Navbar that hides on scroll, reveals when scrolled up..
floating-panel
A headless, composable floating panel component.
focus-cards
Hover over the card to focus on it, blurring the rest of the cards..
following-pointer
A custom pointer that follows mouse arrow and animates in pointer and content..
github-globe
A globe animation as seen on GitHub's homepage.
glare-card
A glare effect that happens on hover, as seen on Linear's website.
globe
An autorotating, interactive, and highly performant globe made using WebGL.
glow-effect
A customizable glow effect with animation modes, colors, blur, and transitions.
glowing-stars-effect
Card background stars that animate on hover and animate anyway.
google-gemini-effect
An effect of SVGs as seen on the Google Gemini Website.
grid-and-dot-backgrounds
A simple grid and dots background to make your sections stand out..
grid-pattern
A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
heading-with-anchor
Add anchor for every heading.
hero-highlight
A background effect with a text highlight component, perfect for hero sections..
hero-parallax
A scroll effect with rotation, translation and opacity animations..
hover-border-gradient
A hover effect that expands to the entire container with a gradient border..
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.
images-slider
A full page slider with images that can be navigated with the keyboard..
in-view
Easily animate elements when they come into view.
infinite-moving-cards
A customizable group of cards that move infinitely in a loop.
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..
lamp-effect
A lamp effect as seen on linear, great for section headers..
layout-grid
A layout effect that animates the grid item on click, powered by framer motion layout.
lens
A lens component to zoom into images, videos, or practically anything..
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.
link-preview
Dynamic link previews for your anchor tags.
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..
macbook-scroll
Scroll through the page and see the image come out of the screen, as seen on Fey.com website..
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.
meteors
A group of beams in the background of a container, sort of like meteors..
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.
moving-border
A border that moves around the container.
multi-step-loader
A step loader for screens that take a lot of time to load..
multiple-selector
Fast, composable, fully-featured multiple selector for React.
navbar-menu
A navbar menu that animates its children on hover, makes a beautiful bignav.
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.
parallax-scroll
A grid where two columns scroll in oposite directions, giving a parallax effect..
particles
Particles are a fun way to add some visual flair to your website.
placeholders-and-vanish-input
Sliding in placeholders and vanish effect of input on submit.
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.
shooting-stars-and-stars-background
A shooting star animation on top of a starry background, as seen on figmaplug.in.
side-panel
A side panel that triggers an expansion animation.
sidebar
Expandable sidebar that expands on hover, mobile responsive and dark mode support.
signup-form
A customizable form built on top of shadcn's input and label, with a touch of framer motion.
sparkles
A configurable sparkles component that can be used as a background or as a standalone component..
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 spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page..
spotlight
A dynamic spotlight effect component that follows cursor movement.
spotlight-
A new spotlight component with left and right spotlight, configurable and customizable..
sticky-scroll-reveal
A sticky container that sticks while scrolling, text reveals on scroll.
svg-mask-effect
A mask reveal effect, hover the cursor over a container to reveal what's underneath..
tabs
Tabs to switch content, click on a tab to check background animation..
tailwindcss-buttons
A curated list of awesome, battle tested Tailwind CSS buttons components.
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-generate-effect
A cool text effect that fades in text on page load, one by one..
text-hover-effect
A text hover effect that animates and outlines gradient on hover, as seen on x.ai.
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-reveal-card
Mousemove effect to reveal text content at the bottom of the card..
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.
tracing-beam
A Beam that follows the path of an SVG as the user scrolls.
transition-panel
Easy way to switch between different pieces of content with enter and exit animations.
typewriter-effect
Text generates as if it is being typed on the screen..
vortex
A wavy, swirly, vortex background ideal for CTAs and backgrounds..
warp-background
A container component that applies a warp animation effect to its children.
wavy-background
A cool background effect with waves that move..
wobble-card
A card effect that translates and scales on mousemove, perfect for feature cards..
world-map
A world map with animated lines and dots, programatically generated..