Testimonials 01
NewOne large pull quote at a time, set like a magazine, with previous and next buttons, arrow keys and four bars to cycle between customer quotes.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/testimonials-01.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Usage
This block is a section, not a page. Import it where you want it, alongside your other sections.
import { Testimonials01 } from '@/components/testimonials-01/testimonials-01'
export default function Page() {
return (
<main>
<Testimonials01 />
</main>
)
}Files
What the command adds to your project, and where.
components/testimonials-01/testimonials-01.tsxThe section. Import it into any page and render it; it fills the width of its parent.
It also installs the components it is built from, unless you already have them: Avatar, Button.
The block uses one accent colour. Installing adds a --brand variable to your global CSS (an existing one is left alone); change it to match your product.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Testimonials
- Testimonials 02A masonry-style wall of nine short quotes of different lengths, each with an initials avatar, a name and a role, and one card set apart on an inverted surface.
- Testimonials 03Three customer-story cards, each with a wordmark, one large number, a two-sentence story and a link to read more.
- Testimonials 04Two rows of quote cards drifting slowly in opposite directions with masked edges; they pause on hover, focus and a Pause button, and become a static grid under reduced motion.
- Testimonials 05A wall of short public posts with a name, a handle and a date, and topic filters down the side; no social network branding.