Figma carousel components | Untitled UI
Carousel design in Figma: slides, arrows, and the click data
How these carousel components are built, and when one earns its place over a static image or grid.
The carousel has the worst evidence record of any common interface pattern, and it is still everywhere. Product galleries, onboarding tours, testimonial rows, app store screenshots. Before you build one it is worth knowing what the numbers actually say, and then deciding whether your case is the exception. These 4 components and 22 variants give you the slide, the arrows, and the indicators.
The uncomfortable data
Erik Runyon has published click statistics from real homepage carousels, and the shape of it is consistent. On the University of Notre Dame homepage roughly 1% of visitors clicked a feature at all, and 84% of those clicks landed on the first slide. Across three static carousels the opening slot took between 48% and 62% of clicks. An auto-forwarding version drew far more interaction in total and still concentrated 40% on the first frame.
Nielsen Norman Group's work on auto-forwarding content explains the rest of it: people cannot read something that is about to leave, and movement inside a banner-shaped box reads as an advertisement and gets ignored.
When a carousel still earns its place
Slide two of a marketing hero is where content goes to be unread, so put your one message in slide one and stop negotiating. The pattern is genuinely right in three situations, though. When the items are equivalent and the user intends to browse them, such as photos of a product or a hotel room, where nobody expects a ranking. When horizontal space is a hard constraint rather than a preference, which describes most of mobile. And when the thing is swipeable rather than arrow-driven, because a thumb drag costs almost nothing while clicking a 36px arrow costs a decision.
A row of testimonials clears the first two. It fails the same way every time, with unrelated messages queued behind one another because nobody in the room would give up their slot.
Slides at 640px, arrows at 36px and 44px
The slide frame is 640px by 400px in both md and lg, a 16:10 crop that suits content imagery better than a widescreen one, though a slide built around a video player will want the widescreen crop instead. Arrows come at 36px and 44px, with left and right chevrons as separate variants so you can put one inside the frame and one outside it without detaching anything.
The indicators are the part worth studying: dots at 8px and 10px or lines 40px wide at 6px and 8px, either bare or framed, where framed sits them on a pill background. Use framed whenever they overlap imagery, because bare dots disappear on a pale photograph and you will not catch it in Figma while your placeholder is an evenly toned grey. The same indicator group is shared with pagination, so a swipeable card row and a paged table use one component instead of two near-identical ones.
Prototyping and handoff
In Figma a carousel is either a set of frames wired with click-through interactions or a single wide Auto Layout row moved with smart animate. Both demo fine, and neither reproduces the momentum of a real swipe, so budget for that surprise in build.
For handoff the W3C carousel pattern is the document to hand over: rotation has to stop on hover and on keyboard focus, the rotation control belongs first in the tab order, and each slide needs a role and a position announcement so somebody not looking at it knows there are five more. If you take one rule from all of this, take auto rotation off by default. Every frame in the file is drawn twice, light and dark.
When the slides need to move for real, Untitled UI React carousels are open source, built with Tailwind CSS and React Aria, with drag, keyboard control, and the indicator state handled for you.
FAQs
Frequently asked questions
Common questions about the Untitled UI Figma carousel components, from slide sizing to arrow and dot indicators.
Do carousels actually work?
For browsing equivalent items, yes. For pushing several unrelated messages, the published numbers are bleak: Erik Runyon's click data shows first-position content taking 84% of clicks on one homepage carousel and 48% to 62% on static ones.
If four teams are queueing for slides two through five, four teams are being quietly ignored.
Should a carousel auto-rotate?
No, as a default. Auto rotation moves content away from people mid-sentence, penalises slower readers, and triggers the same blindness people have learned for ad banners.
If a stakeholder insists, the compromise is a long interval, a visible pause control first in the tab order, and rotation that stops permanently on hover or focus, which is what the W3C pattern requires anyway.
How do I build a carousel in a Figma prototype?
Two workable methods. Duplicate the frame per slide and wire click interactions on the arrows, which is quick and fine for testing. Or build one wide Auto Layout row inside a clipping frame and move it between variants with smart animate, which gives you the sliding motion.
For swipe, add a drag trigger on mobile frames. Neither approach simulates momentum, so do not promise it in handoff.
Are these carousel components included in the free version?
The carousels sit in the paid Untitled UI Figma kit. See pricing for what that includes.
The 100% free Figma UI kit covers core components from the same system if you want to work with the foundations first.
Is there a React version of these carousels?
Yes. Untitled UI React carousels are open source, built with Tailwind CSS and React Aria, and mirror these Figma components.
They include keyboard navigation between slides and the indicator states.
Figma UI components
Foundation Figma components and styles
Icons, styles, design annotations—everything you need to build the foundation of a great Figma design system.
\ \ Color styles \ \ 333 styles](/content/components/color-styles/index.html)
\ \ Typography styles \ \ 44 styles](/content/components/typography-styles/index.html)
\ \ Logos \ \ 3 components + 372 variants](/content/components/logos/index.html)
\ \ Icons \ \ 1,993 components + 352 variants](/content/components/icons/index.html)
\ \ Shadows & blurs \ \ 18 styles](/content/components/shadows-blurs/index.html)
\ \ Grids & spacing \ \ 38 variants + 8 styles](/content/components/grids-spacing/index.html)
\ \ File type icons \ \ 1 component + 153 variants](/content/components/file-icons/index.html)
\ \ Social icons \ \ 1 component + 102 variants](/content/components/social-icons/index.html)
\ \ Folder icons \ \ 1 component + 8 variants](/content/components/folder-icons/index.html)
\ \ Payment icons \ \ 1 component + 112 variants](/content/components/payment-icons/index.html)
\ \ Country flag icons \ \ 261 components + 783 variants](/content/components/flag-icons/index.html)
\ \ Integration icons \ \ 1 component + 32 variants](/content/components/integration-icons/index.html)
\ \ Cursors \ \ 1 component + 50 variants](/content/components/cursors/index.html)
Figma UI components
Figma base components
Buttons, inputs, avatars—all of the base components you need for modern product design and websites.
\ \ Avatars \ \ 280 variants + 98 styles](/content/components/avatars/index.html)
\ \ Badges \ \ 3 components + 666 variants](/content/components/badges/index.html)
\ \ Button groups \ \ 2 components + 64 variants](/content/components/button-groups/index.html)
\ \ Buttons \ \ 5 components + 940 variants](/content/components/buttons/index.html)
\ \ Checkboxes \ \ 2 components + 72 variants](/content/components/checkboxes/index.html)
\ \ Context menus \ \ 2 components + 32 variants](/content/components/context-menus/index.html)
\ \ Dropdowns \ \ 4 components + 143 variants](/content/components/dropdowns/index.html)
\ \ Inputs \ \ 7 components + 188 variants](/content/components/inputs/index.html)
\ \ Multi-select \ \ 4 components + 21 variants](/content/components/multi-select/index.html)
\ \ Progress indicators \ \ 2 components + 65 variants](/content/components/progress-indicators/index.html)
\ \ Radio groups \ \ 2 components + 168 variants](/content/components/radio-groups/index.html)
\ \ Select \ \ 6 components + 90 variants](/content/components/select/index.html)
\ \ Sliders \ \ 2 components + 39 variants](/content/components/sliders/index.html)
\ \ Tags \ \ 4 components + 210 variants](/content/components/tags/index.html)
\ \ Toggles \ \ 2 components + 64 variants](/content/components/toggles/index.html)
\ \ Tooltips \ \ 2 components + 84 variants](/content/components/tooltips/index.html)
Figma UI components
Shared Figma assets
Device mockups and useful utility pages—all of the shared assets you need for modern product design and websites.
\ \ 404 page headers \ \ 1 component + 28 variants](/content/components/404-page-headers/index.html)
\ \ Banners \ \ 1 component + 40 variants](/content/components/banners/index.html)
\ \ Credit cards \ \ 1 component + 13 variants](/content/components/credit-cards/index.html)
\ \ Design annotations \ \ 7 components + 38 variants](/content/components/design-annotations/index.html)
\ \ Device mockups \ \ 7 components + 18 variants](/content/components/device-mockups/index.html)
\ \ Email templates \ \ 3 components + 22 variants](/content/components/email-templates/index.html)
\ \ Forgot password headers \ \ 1 component + 10 variants](/content/components/forgot-password-headers/index.html)
\ \ Log in page headers \ \ 1 components + 32 variants](/content/components/log-in-headers/index.html)
\ \ Miscellaneous assets \ \ 3 components + 50 variants](/content/components/miscellaneous-assets/index.html)
\ \ Portfolio mockups \ \ 6 variants + 52 templates](/content/components/portfolio-mockups/index.html)
\ \ Sign up page headers \ \ 1 component + 42 variants](/content/components/sign-up-headers/index.html)
\ \ Verification page headers \ \ 1 component + 6 variants](/content/components/verification-headers/index.html)
\ \ Video players \ \ 3 components + 36 variants](/content/components/video-players/index.html)
Figma UI components
Application UI/Dashboard examples
Dashboard, settings, form layouts—useful examples for everything you need to design modern dashboards and products.
\ \ Dashboard examples \ \ 60 page examples](/content/components/dashboards/index.html)
\ \ Informational page examples \ \ 60 page examples](/content/components/informational-pages/index.html)
\ \ Settings page examples \ \ 42 page examples](/content/components/settings-pages/index.html)
Figma UI components
Application UI/Dashboard Figma components
Modals, tables, alerts—everything you need to design modern and beautiful apps, dashboards and products.
\ \ Activity feeds \ \ 2 components + 22 variants](/content/components/activity-feeds/index.html)
\ \ Activity gauges \ \ 3 components + 34 variants](/content/components/activity-gauges/index.html)
\ \ Alerts \ \ 1 component + 24 variants](/content/components/alerts/index.html)
\ \ Application header navigations \ \ 5 components + 80 variants](/content/components/application-header-navigations/index.html)
\ \ Breadcrumbs \ \ 2 components + 56 variants](/content/components/breadcrumbs/index.html)
\ \ Calendars \ \ 12 components + 82 variants](/content/components/calendars/index.html)
\ \ Card headers \ \ 1 component + 4 variants](/content/components/card-headers/index.html)
\ \ Carousels \ \ 4 components + 22 variants](/content/components/carousels/index.html)
\ \ Code snippets \ \ 1 component + 8 variants](/content/components/code-snippets/index.html)
\ \ Color pickers \ \ 6 components + 26 variants](/content/components/color-pickers/index.html)
\ \ Command menus (⌘+K) \ \ 5 components + 69 variants](/content/components/command-menus/index.html)
\ \ Content dividers \ \ 1 component + 18 variants](/content/components/content-dividers/index.html)
\ \ Date pickers \ \ 5 components + 68 variants](/content/components/date-pickers/index.html)
\ \ Drawers \ \ 2 components + 50 variants](/content/components/drawers/index.html)
\ \ Empty states \ \ 2 components + 36 variants](/content/components/empty-states/index.html)
\ \ File uploaders \ \ 3 components + 23 variants](/content/components/file-uploaders/index.html)
\ \ Filters \ \ 3 components + 38 variants](/content/components/filters/index.html)
\ \ Horizontal tabs \ \ 2 components + 280 variants](/content/components/horizontal-tabs/index.html)
\ \ Inline CTAs \ \ 1 component + 14 variants](/content/components/inline-ctas/index.html)
\ \ Line & bar charts \ \ 9 components + 116 variants](/content/components/line-bar-charts/index.html)
\ \ Loading indicators \ \ 1 component + 12 variants](/content/components/loading-indicators/index.html)
\ \ Messaging \ \ 3 components + 42 variants](/content/components/messaging/index.html)
\ \ Metrics \ \ 4 components + 36 variants](/content/components/metrics/index.html)
\ \ Modals \ \ 3 components + 252 variants](/content/components/modals/index.html)
\ \ Notifications \ \ 1 component + 18 variants](/content/components/notifications/index.html)
\ \ Page headers \ \ 1 component + 12 variants](/content/components/page-headers/index.html)
\ \ Pagination \ \ 3 components + 42 variants](/content/components/pagination/index.html)
\ \ Pie charts \ \ 3 components + 68 variants](/content/components/pie-charts/index.html)
\ \ Progress circles \ \ 1 component + 10 variants](/content/components/progress-circles/index.html)
\ \ Progress steps \ \ 7 components + 92 variants](/content/components/progress-steps/index.html)
\ \ Radar charts \ \ 3 components + 12 variants](/content/components/radar-charts/index.html)
\ \ Section footers \ \ 1 component + 8 variants](/content/components/section-footers/index.html)
\ \ Section headers \ \ 1 component + 12 variants](/content/components/section-headers/index.html)
\ \ Sidebar navigations \ \ 9 components + 168 variants](/content/components/sidebar-navigations/index.html)
\ \ Tables \ \ 4 components + 204 variants](/content/components/tables/index.html)
\ \ Tree views \ \ 3 components + 4 variants](/content/components/tree-views/index.html)
\ \ Vertical tabs \ \ 2 components + 264 variants](/content/components/vertical-tabs/index.html)
Figma UI components
Marketing website examples
Landing pages, blogs, sign up pages—useful examples for everything you need to design modern marketing websites.
\ \ 404 page examples \ \ 20 page examples](/content/components/404-pages/index.html)
\ \ About page examples \ \ 20 page examples](/content/components/about-pages/index.html)
\ \ Blog examples \ \ 20 page examples](/content/components/blogs/index.html)
\ \ Blog post examples \ \ 20 page examples](/content/components/blog-posts/index.html)
\ \ Contact page examples \ \ 20 page examples](/content/components/contact-pages/index.html)
\ \ FAQ page examples \ \ 20 page examples](/content/components/faq-page-examples/index.html)
\ \ Landing page examples \ \ 40 page examples](/content/components/landing-pages/index.html)
\ \ Legal page examples \ \ 10 page examples](/content/components/legal-pages/index.html)
\ \ Log in page examples \ \ 12 page examples](/content/components/log-in-pages/index.html)
\ \ Pricing page examples \ \ 20 page examples](/content/components/pricing-pages/index.html)
\ \ Sign up page examples \ \ 12 page examples](/content/components/sign-up-pages/index.html)
\ \ Team page examples \ \ 20 page examples](/content/components/team-pages/index.html)
Figma UI components
Marketing website components
Landing page header and website sections—everything you need to design modern and responsive marketing websites.
\ \ Blog post sections \ \ 3 components + 102 variants](/content/components/blog-post-sections/index.html)
\ \ Blog sections \ \ 4 components + 84 variants](/content/components/blog-sections/index.html)
\ \ Careers sections \ \ 2 components + 38 variants](/content/components/careers-sections/index.html)
\ \ Contact sections \ \ 6 components + 106 variants](/content/components/contact-sections/index.html)
\ \ Content & rich text sections \ \ 2 components + 78 variants](/content/components/content-sections/index.html)
\ \ CTA sections \ \ 1 component + 60 variants](/content/components/cta-sections/index.html)
\ \ FAQ sections \ \ 2 components + 72 variants](/content/components/faq-sections/index.html)
\ \ Features sections \ \ 2 components + 122 variants](/content/components/features-sections/index.html)
\ \ Footers \ \ 5 components + 192 variants](/content/components/footers/index.html)
\ \ Header navigations \ \ 10 components + 397 variants](/content/components/header-navigations/index.html)
\ \ Header sections \ \ 2 components + 148 variants](/content/components/header-sections/index.html)
\ \ Metrics sections \ \ 2 components + 42 variants](/content/components/metrics-sections/index.html)
\ \ Newsletter CTA sections \ \ 1 component + 32 variants](/content/components/newsletter-cta-sections/index.html)
\ \ Press mentions sections \ \ 1 component + 4 variants](/content/components/press-mentions-sections/index.html)
\ \ Pricing sections \ \ 5 components + 88 variants](/content/components/pricing-sections/index.html)
\ \ Social proof sections \ \ 1 component + 20 variants](/content/components/social-proof-sections/index.html)
\ \ Team sections \ \ 2 components + 56 variants](/content/components/team-sections/index.html)
\ \ Testimonial sections \ \ 3 components + 92 variants](/content/components/testimonial-sections/index.html)
The ultimate UI kit for Figma
What is Untitled UI?
Untitled UI Figma is the largest UI kit and design system for Figma in the world. Here's everything great about Untitled UI in just 60 seconds.
Untitled UI in 60 seconds
The ultimate Figma UI kit | Untitled UI from Untitled UI on Vimeo
Playing in picture-in-picture
Pause
Speed
Picture-in-Picture
Show controls
2x
1.5x
1.25x
1x
0.75x
0.5x
\ Preview in Figma](/content/preview/figma/index.html)
Join 380,000+ designers from the world's top companies
Untitled UI is the best $ I've spent on my business in a long time. I'm going to keep using it and recommending it to every designer I know.
Sam Pierce Lolla
Founder, Shuffleboard
Over the years we've featured hundreds of UI kits on UXCrush, but Untitled UI is by far the most comprehensive and detailed I've seen yet. A must have for any designer!
Luca Vavassori
Founder, UXCrush
I've used all UI kits on the market. I can say without a doubt that the Untitled UI kit is the best on the market. It covers everything a designer needs in a modern and efficient way.
Murat Alpay
Product Designer, @imuratalpay
Incredible, and keeps getting better. I’ve tried dozens of UI kits and Untitled UI is the only name you should care about. It stands head and shoulders above the rest.
Jérémy Franck
Designer, @jrmyfranck
Such a beautiful, detailed, and extensive UI kit. Untitled UI is the perfect foundation for any project. I highly recommend this huge time saver.
Adham Dannaway
Product Designer, Practical UI
Untitled UI has been an amazing resource that I'm learning to rely upon to spin up ideas in no time. I think I might launch a startup pretty soon by mistake here!
Riccardo Buzzotta
Senior Product Designer, Spotify
The sheer scale, details, and organization of this kit is mind-blowing. It covers nearly everything a Designer could need in a modern, efficient and systematic way.
Corey Moen
Senior Brand Designer, Webflow
I'm super impressed with this. I love poking around in other peoples UI Kits to see how they think. This is probably one of the most comprehensive I've seen.
Matt Walker
Design Systems, Mailchimp
I'm super excited to use this for quick mockups of ideas in Figma. We're always trying to streamline our design process so we can move fast! Definitely recommend.
Jenny Chu
Head of Product, Eucalyptus
Untitled UI is easily the best UI kit I've used so far. It has an insane amount of components that are all incredibly well-built. I don't even know how many hours this will save.
Sunny Trochaniak
Founder, NewPulse Labs
The attention to detail and thought Jordan has put into this UI kit is unparalleled.
Dan Mcleay
Lead Designer, Fox Sports
Untitled UI is incredibly well-organized and the attention to detail is great. I highly recommend this kit to any designer that wants to create beautiful designs fast.
Tom Bekkers
Founder & Creative Director, Flowbase
What an awesome Figma kit... it's an absolute game changer. This is the perfect base for any design system. The size and attention to detail is next level.
Dan Anisse
Co-founder, Relume
We've been using Untitled to build Himalayas 2.0 and have finished a complete redesign in just a few days. It has everything we need already pixel-perfect.
Abi Tyas Tunggal
Co-founder, Himalayas
Join our affiliate program
A simple and easy way to make 30% of every sale you refer to Untitled UI. Earn up to $2,699.70 on each sale!
Untitled UI in 60 seconds