Carousel
Shows one slide at a time from a short set, like news, tour steps or reviews, with previous and next buttons and a row of dots. Anything people must read belongs on the page, not on slide 3.
New
Recurring invoices
Send the same invoice every month, on the day you choose.
Improved
Faster bank sync
Transactions now show up in under 2 minutes.
Coming soon
Expense approvals
Managers approve team expenses from their phone.
Installation
Set up Camaleo once (Installation), then import what you need. It runs on the client, because it keeps the current slide.
import { Carousel, CarouselSlide } from "@camaleo/react";Anatomy
A <section> with the slides, then a row of controls. CarouselSlide is an optional layout for each slide; any element works. Every part has a data-slot you can target from CSS.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
New
Recurring invoices
Send the same invoice every month, on the day you choose.
Improved
Faster bank sync
Transactions now show up in under 2 minutes.
Coming soon
Expense approvals
Managers approve team expenses from their phone.
Step 1
Connect your bank
Pick your bank and sign in once. We only read transactions.
Step 2
Add your team
Invite people by email and choose what each one can see.
Step 3
Send your first invoice
Fill in the client and the amount, and we email the PDF.
Step 4
Get paid
Paid invoices are matched to your bank automatically.
Steps people jump between
Each dot is a tab: Tab reaches the row once, and the arrow keys move between slides. Hide the Play button with showAutoPlayToggle={false} when people read at their own pace.
New
Recurring invoices
Send the same invoice every month, on the day you choose.
Improved
Faster bank sync
Transactions now show up in under 2 minutes.
Coming soon
Expense approvals
Managers approve team expenses from their phone.
Rotation people start
Keep autoPlay off and leave the Play button: people who want the slides to move press it, and Pause stops them. Rotation never runs when the system asks for reduced motion.
Thu, Nov 14 · 9:00 AM
Design tokens at scale
Ana Ribeiro, Nubank
Thu, Nov 14 · 10:30 AM
Accessible charts
Marcos Lima, Globo
Thu, Nov 14 · 2:00 PM
Forms people finish
Julia Santos, iFood
Every part of a slide
CarouselSlide lays out kicker, title, description and badge. Put the date or category in the kicker, so the title stays short enough for a phone.
Close the month in minutes
Match every transaction to a category before the 5th.
Never miss a due date
Turn on reminders three days before each bill.
Your own slide content
Any element can be a slide. Start it with a heading, because the slide's own name is only its position, like "2 of 3".
Step 1
Connect your bank
Pick your bank and sign in once. We only read transactions.
Step 2
Add your team
Invite people by email and choose what each one can see.
Step 3
Send your first invoice
Fill in the client and the amount, and we email the PDF.
Step 4
Get paid
Paid invoices are matched to your bank automatically.
React to the slide
Move through the steps, then press Start over. Control activeIndex when the page must know the slide, like for a step counter or a finish button.
Starter
1 user, 50 invoices a month.
Team
Up to 10 users and unlimited invoices.
Business
Unlimited users, approvals and an audit log.
Names in your language
Screen readers hear each slide as "2 of 3, slide". Pass slideLabel, slideRoleDescription and the button labels to say "Plan 2 of 3" in the page's language.
In context
Carousels usually sit in a card or a page section, next to content that is always visible. These are whole pieces of UI you can copy, in the skin you picked.
Getting started
Step 1
Connect your bank
Pick your bank and sign in once. We only read transactions.
Step 2
Add your team
Invite people by email and choose what each one can see.
Step 3
Send your first invoice
Fill in the client and the amount, and we email the PDF.
Step 4
Get paid
Paid invoices are matched to your bank automatically.
What customers say
“We closed March in two days instead of a week.”
Carla Mendes, CFO at Pátio Foods
“Our clients pay faster since invoices go out on their own.”
Rafael Souza, owner of Souza Arquitetura
“Setting up the team took ten minutes.”
Beatriz Alves, operations at Lumen Health
This week's deals
Until Sunday
Noise-cancelling headphones
From $299 to $219.
Only online
14-inch laptop, 16 GB
From $1,299 to $999.
Free shipping
Smartwatch with GPS
From $249 to $199.
Guidelines
Recurring invoices
Send the same invoice every month, on the day you choose.
Faster bank sync
Transactions now show up in under 2 minutes.
Expense approvals
Managers approve team expenses from their phone.
People rarely go past the third slide, so a short set gets seen and the dots stay easy to tell apart.
Recurring invoices
Send the same invoice every month, on the day you choose.
Faster bank sync
Transactions now show up in under 2 minutes.
Expense approvals
Managers approve team expenses from their phone.
Recurring invoices
Send the same invoice every month, on the day you choose.
Faster bank sync
Transactions now show up in under 2 minutes.
Expense approvals
Managers approve team expenses from their phone.
Recurring invoices
Send the same invoice every month, on the day you choose.
Faster bank sync
Transactions now show up in under 2 minutes.
Eight dots look the same, and the last slides are only seen by people who click through all of them.
“We closed March in two days instead of a week.”
Carla Mendes, CFO at Pátio Foods
“Our clients pay faster since invoices go out on their own.”
Rafael Souza, owner of Souza Arquitetura
People scanning, and screen reader users jumping by heading, know what a slide is about before reading it.
We closed March in two days instead of a week, and the team finally stopped asking finance for spreadsheets every Friday afternoon.
Our clients pay faster since invoices go out on their own.
Without a title, people have to read the whole slide to decide if it matters to them.
Props
autoPlay is off, so people can start rotation themselves.aria-roledescription). Translate it on non-English pages.Both take the attributes of their element: Carousel those of <section> (its aria-label defaults to "Carousel", so always pass one), CarouselSlide those of <div>, with children after the description.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the carousel itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- The carousel is a section with aria-roledescription="carousel". It follows the tabbed carousel pattern: the dots are tabs, each with aria-controls pointing to its slide, and each slide is a role="tabpanel" named by its position, like "2 of 3". Hidden slides are removed from the page with hidden.
- Rotation is off by default and never runs with reduced motion. It holds while the pointer or keyboard focus is inside the carousel, and the Play/Pause button stops it for good.
- A slide the person picks is announced (the viewport is aria-live="polite"); automatic rotation is not. Start each slide with a heading, so the announcement is short and clear.
- The default names are in English. On other languages, pass roleDescription, slideLabel, goToSlideLabel and the button labels.