shadcn.io is not affiliated with official shadcn/ui
Docblock Quote Testimonials Block for Ark UI
A split testimonial for a build tool: the headline and a Shine Button on the left, and on the right one customer quote written as a code docblock in an editor window framed by hairline corners, with line numbers, comment colours and the author as @author and @role tags. It follows the theme.
Installation
Overview
Give one engineering quote the look of the code it's about, in a testimonials section for React with Ark UI. The page column splits in two at lg with a solid divider: on the left a compact header for Brindle, a fictional build tool, and one Shine Button; on the right a docblock comment inside an editor window, with a title bar, line numbers and the author written as @author, @role and @customer tags in the theme's keyword colour. Hairline corners with + marks frame the window, and the section's top rule and rails join the other blocks on the page. On a phone the header comes first and the window follows with its line numbers dropped. It's built from Frame, Guides and Shine Button, with your theme's tokens and nothing but CSS. Made for developer tools, infrastructure products and API companies, where a quote that looks like a comment in the codebase is a small joke the audience gets.
FAQ
How do I change the quote and the tags?
Edit QUOTE and TAGS at the top of the file. Each tag is a name and a value, and the line numbers follow the list, so adding a tag shifts the closing line down by itself. Keep the quote to a few sentences: the docblock wraps as one numbered line, like an editor with word wrap on.
How do screen readers read it?
As a quote, not as code. The comment markers, the line numbers, the stars and the @author names are hidden from assistive technology; what's left is a figure with a blockquote and a figcaption that lists the author, the role and the customer. The window's title bar and the corner marks are decoration, and the header's h2 introduces the section.
Does it follow the light and dark theme?
Yes. Nothing in it forces a dark scope: the window, the borders and the comment colours all come from your theme's tokens, so it's light in a light theme and dark in a dark theme. The emphasis comes from structure (the divider, the framed window and its tinted shell), never from an inverted fill.
Does it work in right-to-left languages?
The window keeps its left-to-right direction, like any code editor, so the line numbers stay on the left. The header and the divider follow the page direction. The quote sits in a bdi, so a quote written in Arabic or Hebrew keeps its quotation marks and reads right to left inside the line.
How does it fit a phone?
Below the lg breakpoint the columns stack: the header, then the window, with no divider. Below the sm breakpoint the line numbers are dropped so the quote has the full width of the window, and the text wraps instead of scrolling. It reads at 320px with no horizontal scroll, and the quote starts inside the first screen.
How do I make it look like another language?
The comment is plain markup, so change FILE for the title bar and the markers in the two Edge lines and the * in STAR: # for Python or shell, // for Go, -- for SQL. The tag colour is text-warning-foreground; use text-info-foreground or text-success-foreground for a different accent.