# Transition components

> Upgrade your UI with 13 smooth transition components for React and Tailwind CSS, adding seamless animations to your Next.js interfaces.

62 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/transition.

- [Grid Pixelate Wipe](https://21st.dev/@kapishdima/components/grid-pixelate-wipe.md) — by KapishDima
- [Transition Panel](https://21st.dev/@ibelick/components/transition-panel.md) — by Julien Thibeaut
- [Presence Fade](https://21st.dev/@corr/components/presence-fade.md) — by Liam Corrigan
- [Interactive Hover Button](https://21st.dev/@dillionverma/components/interactive-hover-button.md) — by Dillion Verma
- [Feature Carousel](https://21st.dev/@0xUrvish/components/feature-carousel.md) — by 0xUrvish
- [Fluid menu](https://21st.dev/@deepaksslibra/components/fluid-menu.md) — by Deepak Chandwani
- [Auth Switch](https://21st.dev/@appvibed01/components/auth-switch.md) — by AppVibed
- [Auth Switch](https://21st.dev/@appvibed01/components/auth-switch/auth-switch.md) — by AppVibed
- [Curtain Theme Toggle](https://21st.dev/@fatih-developer/components/curtain-theme-toggle.md) — by Fatih
- [Cinematic Theme Switcher](https://21st.dev/@omrohilla6/components/cinematic-theme-switcher.md) — by Om
- [BlurTextAnimation](https://21st.dev/@xubohuah/components/blur-text-animation.md) — by KainXu
- [layout preloader](https://21st.dev/@kedhareswer.12110626/components/layout-preloader.md) — by Kedhareswer Naidu
- [Text Loop](https://21st.dev/@ibelick/components/text-loop.md) — by Julien Thibeaut
- [Toggle Theme](https://21st.dev/@sshahaider/components/toggle-theme.md) — by Efferd
- [Toggle](https://21st.dev/@originui/components/toggle/theme-toggle.md) — by shadcn
- [Animated Menu](https://21st.dev/@koustubhayadiyala36/components/animated-menu.md) — by Kousthubha Yadiyala
- [Animated Background](https://21st.dev/@ibelick/components/animated-background.md) — by Julien Thibeaut
- [Number Flow](https://21st.dev/@barvian/components/number-flow.md) — by Maxwell Barvian
- [Animated Theme Toggler](https://21st.dev/@arunachalam/components/animated-theme-toggler.md) — by Arunachalam
- [Arc Preloader Hero](https://21st.dev/@ruixen.ui/components/arc-preloader-hero.md) — by Ruixen UI
- [Progress](https://21st.dev/@jshguo/components/interfaces-progress.md) — by jshguo
- [Animated Theme Toggle Button](https://21st.dev/@arunachalam/components/animated-theme-toggle-button.md) — by Arunachalam
- [Basic Avatar](https://21st.dev/@ShadcnStudio/components/basic-avatar/avatar-seventeen.md) — by ShadcnStudio
- [Action Searchbar](https://21st.dev/@koustubhayadiyala36/components/action-searchbar.md) — by Kousthubha Yadiyala
- [Warp Dialog](https://21st.dev/@molecule-lab-rushil/components/warp-dialog.md) — by Rushil Dhinoja
- [Checkbox](https://21st.dev/@originui/components/checkbox/fancy-todo-checkbox.md) — by Origin UI
- [Progress](https://21st.dev/@jshguo/components/interfaces-progress/steps.md) — by jshguo
- [Toggle](https://21st.dev/@Edil-ozi/components/toggle.md) — by Edil Ozi
- [Shared Element Gallery](https://21st.dev/@easemize/components/shared-element-gallery.md) — by Hossain Jahed
- [Preloader](https://21st.dev/@gaxocif204/components/preloader.md) — by FlyWood
- [Horizontal Theme Wipe Toggle](https://21st.dev/@arunachalam/components/theme-wipe-toggle.md) — by Arunachalam
- [Fade Slide Tabs](https://21st.dev/@ruixen.ui/components/fade-slide-tabs.md) — by Ruixen UI
- [Mask View Transition Theme Toggle](https://21st.dev/@jahirulislamrayhan07/components/mask-view-transition-theme-toggle.md) — by Jahirul Islam
- [Transition Panel](https://21st.dev/@ibelick/components/transition-panel/with-tabs.md) — by Julien Thibeaut
- [Customizable Loader / Spinner / Transition](https://21st.dev/@h0bb5/components/customizable-loader-spinner-transition.md) — by Dylan Hobbs
- [Action Button](https://21st.dev/@Codehagen/components/action-button.md) — by Prism UI
- [Animated Status Badge](https://21st.dev/@isaiahbjork/components/animated-status-badge.md) — by Isaiah
- [List Item](https://21st.dev/@0xUrvish/components/list-item.md) — by 0xUrvish
- [Hybrid Tabs](https://21st.dev/@ruixen.ui/components/hybrid-tabs.md) — by Ruixen UI
- [Animate Checkbox](https://21st.dev/@molecule-lab-rushil/components/animate-checkbox.md) — by Rushil Dhinoja
- [Switch](https://21st.dev/@ravikatiyar162/components/switch.md) — by Ravi Katiyar
- [Inline Edit](https://21st.dev/@0xUrvish/components/inline-edit.md) — by 0xUrvish
- [Toggle Switch](https://21st.dev/@prebuiltui/components/toggle-switch/toggle-switch-dark-theme.md) — by prebuiltui
- [Vertical Theme Wipe Toggle](https://21st.dev/@arunachalam/components/vertical-theme-wipe-toggle.md) — by Arunachalam
- [animation presence mode](https://21st.dev/@avanishverma4/components/animation-presence-mode.md) — by Awanish Verma
- [Collapsible](https://21st.dev/@anubra266/components/collapsible-1/collapsible-w-icon.md) — by Abraham
- [Collapsible](https://21st.dev/@anubra266/components/collapsible-1/collapsible-styled.md) — by Abraham
- [Animated Vercel-like Button](https://21st.dev/@stvenchg/components/animated-vercel-like-button.md) — by Steven Ching
- [Dynamic Status Button](https://21st.dev/@ruixen.ui/components/dynamic-status-button.md) — by Ruixen UI
- [Text Loop](https://21st.dev/@cnippet.dev/components/text-loop/horizontal-slide.md) — by Cnippet
- [Text Loop](https://21st.dev/@cnippet.dev/components/text-loop.md) — by Cnippet
- [UltraQualityTabs](https://21st.dev/@dhileepkumargm/components/ultra-quality-tabs.md) — by Dhileep Kumar GM
- [Text Loop](https://21st.dev/@cnippet.dev/components/text-loop/status-badge.md) — by Cnippet
- [Fade Through](https://21st.dev/@educlopez/components/fade-through.md) — by Edu Calvo
- [Ghost Reveal](https://21st.dev/@arlanoska/components/ghosty-reveal.md) — by Arlan
- [IMG Reveals](https://21st.dev/@dhileepkumargm/components/img-reveal.md) — by Dhileep Kumar GM
- [UltraQualityModal](https://21st.dev/@dhileepkumargm/components/ultra-quality-modal.md) — by Dhileep Kumar GM
- [Dynamic Text](https://21st.dev/@kokonutd/components/dynamic-text.md) — by Kokonut Baffier
- [Picture](https://21st.dev/@shoota/components/picture.md) — by shoota
- [Icon Swap](https://21st.dev/@ncdai/components/icon-swap.md) — by Chánh Đại

Full component directory: https://21st.dev/llms.txt