Testimonials Sections
Social-proof sections — a grid of quote cards and a single oversized spotlight quote.
Social-proof sections for a landing or marketing page. Each is a self-contained, full-width Svelte
<section> built only from semantic tokens, so it restyles across every theme — the brand
colour maps to --primary. Try the theme switcher above the preview.
Preview
Testimonials
Loved by teams everywhere
“We shipped a full redesign in a week. The token system meant every screen just fell into place.”
“Support is unreal. Every question answered within minutes, and always by someone who gets it.”
“Onboarding took an afternoon. Our whole team was productive by the end of day one.”
“The analytics alone paid for the plan. We finally see what our users actually do.”
“It scales with us. We started on the free tier and never had to rethink our setup.”
“Beautiful defaults, endless flexibility. It's the rare tool designers and devs both love.”
“This is the first tool where design and engineering finally speak the same language. We moved twice as fast and the product has never looked better.”
Install
bun x bosia@latest add block testimonials/grid
bun x bosia@latest add block testimonials/spotlightThese pull @lucide/svelte for icons.
The blocks
grid— a heading over quote cards with star ratings, initials avatars and name / role.spotlight— a single oversized pull-quote with an avatar, name / company and dot indicators.
Usage
<script lang="ts">
import Testimonials from "$lib/blocks/testimonials/grid/block.svelte";
</script>
<Testimonials />Quotes and names live in hardcoded arrays at the top of each block.svelte — swap in your own.
Stars and accents use primary and status colours, so each section follows the active theme.
Source
src/lib/blocks/testimonials/*/block.svelte