Blocks
Rating Carousel
A row of rating cards that autoplay, blur off-window slides, and page with dots.
A ready-made testimonial block built with Swiper.
Rating cards sit two-up by default (set slidesPerView to change that).
Drag or swipe the row — off-window cards fade and blur as they leave.
Autoplay pauses on hover; dots jump to a card. Pass any Swiper option
through the swiper prop.
Improved Cash Flow Management
“The dashboards are clear, automation saves us hours each week, and our team finally has full visibility into every financial movement.”
David K.
CFO
Streamlined Financial Reporting
“We can now generate comprehensive reports in minutes instead of days. Real-time analytics help us make data-driven decisions faster.”
Sarah M.
Financial Controller
Enhanced Budget Planning
“Budget planning used to live in spreadsheets. We create, track, and adjust budgets in real time, and the forecasting is accurate.”
Michael R.
Finance Director
Automated Invoice Processing
“We reduced processing time by 80% and eliminated manual errors. The system fits the tools we already use.”
Emily T.
Accounts Manager
Installation
pnpm dlx shadcn@latest add @tween-ui/rating-carouselUsage
import RatingCarousel from '@/components/tweenui/testimonial/rating-carousel';
export default function Page() {
return <RatingCarousel />;
}Pass your own quotes to make it yours:
import RatingCarousel from '@/components/tweenui/testimonial/rating-carousel';
const testimonials = [
{
id: 'maya',
title: 'Clearer handoffs',
quote: 'Handoffs used to live in three chats. Now the pipeline updates itself.',
name: 'Maya Chen',
role: 'Operations lead',
avatar: '/photos/maya.jpg',
avatarAlt: 'Portrait of Maya Chen',
},
{
id: 'jon',
title: 'Shipped in an afternoon',
quote: 'We shipped the first automation in an afternoon and never looked back.',
name: 'Jon Hale',
role: 'Founder',
avatar: '/photos/jon.jpg',
avatarAlt: 'Portrait of Jon Hale',
},
];
export default function Page() {
return <RatingCarousel testimonials={testimonials} slidesPerView={2} />;
}Tune the tray with the swiper bag — any Swiper React prop
except children. Your values merge over the defaults (speed 1100, autoplay
every 2.5s, container breakpoints, Autoplay module). Extra modules are
concatenated with Autoplay; onSwiper still wires the dots and blur:
import RatingCarousel from '@/components/tweenui/testimonial/rating-carousel';
export default function Page() {
return (
<RatingCarousel
slidesPerView={2}
swiper={{
speed: 800,
spaceBetween: 12,
autoplay: { delay: 4000, disableOnInteraction: false },
loop: true,
}}
/>
);
}The CLI installs swiper. Manual copy also lists pnpm add swiper before the
source.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
testimonials | TestimonialCardItem[] | 4-card sample | Cards shown in the carousel. |
slidesPerView | number | 2 | How many cards are visible when the tray is ≥560px. Narrower views show 1. |
swiper | TestimonialSwiperProps | — | Any Swiper option or event. Merged over the built-in defaults (speed, loop, autoplay, …). |
Each TestimonialCardItem is
{ id, title, quote, name, role, avatar, avatarAlt }. Extends native
<section> attributes (className, style, …).
Accessibility
Pagination dots are real buttons with an aria-label and aria-current on the
active one, plus a visible focus ring. The row is drag and swipe enabled. Hover
pauses autoplay. Under prefers-reduced-motion: reduce autoplay is off and
speed is 0, even if you set them on swiper. Off-window cards do not blur.