React Aria testimonials blocks.

They are 100 React testimonial and customer quote sections, in 13 groups: one big quote, quote grids, walls and lanes, rows and lists, carousels and decks, results and figures, ratings and reviews, chats and posts, audio, video, photo, logos and faces, filter and search, expand, flip, pin, collect a review. They turn customer words into social proof for a landing page, from one large quote to a wall, a carousel or a video story.

Blockquote Testimonial and Featured Hero Testimonial set one quote large, Masonry Testimonials and Clipped Wall Testimonials stack many short notes, and Quote Carousel Testimonials shows one at a time. Logo Bar Testimonials leads with company logos, and Rating Breakdown Testimonials sets the star spread beside the quotes.

Video Testimonials Dialog Grid opens each customer story in a player dialog with a timed transcript, Filterable Testimonials narrows the quotes by role, and Testimonial Form lets a customer write their own with a live preview of the card.

The quotes, names, companies, roles and ratings are typed data at the top of the file, and the customers are invented. Avatars are initials, so the block does not need a photo for each person.

Replace the typed quotes list with entries from your CMS or database, keeping the fields each block uses: a name, a role, a company, the quote and, where shown, a rating or a result. Only publish a customer's words with their permission, and keep the name and company they agreed to.

Testimonial Form validates the name, rating, quote and a permission switch on submit, marks the fields and focuses the first problem, then simulates sending with a timer. Replace that timer with your request and store the quote as pending until the permission is recorded and you have reviewed it.

Quote Carousel Testimonials turns itself with a progress bar and has a pause button, previous and next, and the bar's animation also pauses on hover and keyboard focus. Keep the pause control if you change the timing: people need time to read, and a moving quote should be stoppable.

Filterable Testimonials shows role chips where several can be picked, and each chip counts the quotes it would leave. Add a role to the `Role` type and the `ROLES` list, then list it in the `roles` of each quote it applies to; the status line and the clear button follow the selection.

In Video Testimonials Dialog Grid each story has a poster drawn from the page's own UI and opens a player dialog with the speaker and a timed transcript. Put your video element or hosted embed inside the dialog and keep the transcript beside it so the story can be read as well as watched.

This page lists 100 of the category's 100 testimonials blocks for React on React Aria. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The testimonials blocks here are written on React Aria primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/aria/testimonials-accordion.json). The other bases are one picker away from /testimonials-block/aria.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on React Aria. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/aria/testimonials-accordion.json for Accordion Testimonials. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Accordion Testimonials brings Accordion, Avatar, Button, Guides and Shine Button, installed before it. Nothing else changes in your project.

Use the filters above the grid: 13 kinds of testimonials block, led by results and figures (13), one big quote (12), quote grids (11) and carousels and decks (11), and sort by popular or name. A good first look: Accordion Testimonials, Animated Count Testimonials and Avatar Stack Testimonials. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a testimonials block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the layouts, what it shows and interaction kinds.

Open its page and use the full-screen viewer (/view/testimonials/aria/accordion) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each testimonials block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on React Aria, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the testimonials blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 testimonials blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a testimonials block, read it with get_block and install it on your React on React Aria stack.

Pass `category: "testimonials"` to search_blocks to search only the 100 testimonials blocks, or to list_blocks for the 13 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "testimonials", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.