shadcn.io is not affiliated with official shadcn/ui
Permissions Matrix Testimonial Contact Block for Svelte
A story form for a plant subscription: the quote, name and role, one circular photo, and a checkbox matrix that says where the words may be used and whether with the name or photo.
Installation
Overview
A testimonial section for Svelte with Ark UI, built as one band under a start-aligned header, with a + mark on each rail. At the end of the band, behind a split divider, the visitor writes a quote, gives a name and an optional role, and may add one photo that previews as a circle with a remove button. At the start, a matrix of checkboxes lays out the rows (website, social, case study, ads) against the columns (quote, name, photo), and a live line counts what is ticked. A name or photo may only go where the quote does. The quote is first in the page and the matrix is drawn first from the lg breakpoint; on a phone the matrix follows the quote. There is no star rating and no preview card (the testimonials form in the testimonials category has both). Submitting checks every field and every row, and a valid story turns into a confirmation that reads the matrix back. It's built from Checkbox, File Upload, Textarea, Field, Guides, Shine Button and Button, with your theme's tokens for every colour. For subscription brands, shops and services that collect customer stories and want clear consent for each use.
FAQ
Is the photo really uploaded?
No. It stays in the visitor's browser tab and the circle is a preview of their own file; nothing is sent, and the block ships no photographs. To make it real, send file where submit waits, and check the type and size again on your server, because the drop zone's limits (one image, 4 MB) are only a courtesy. A wrong file is refused with a polite line saying which file and why.
How does the permissions matrix work?
It is a real table with row and column headers, and each box is a checkbox named after its row and column, such as "Name on Social". Ticking is free, but the form checks three rules on submit: at least one Quote box is ticked, a Name or Photo box only appears on a row whose Quote is ticked, and a photo is only added if some row allows it. The message says which rows to fix and focus lands on the first box that needs attention.
What does the line under the table say?
A live count ("Quote on 2 of 4 places, name on 1, photo on 0") that a screen reader hears when a box changes. The confirmation reads the same choices back in words, one line per row ("Website, with your name").
Where does the story go?
Nowhere yet. The submit waits 800 milliseconds as a stand-in for a request, then shows the confirmation, which says plainly that it was saved in the demo only. Replace the timer in submit with your call: details, picked (keys like website:quote) and file hold everything.