shadcn.io is not affiliated with official shadcn/ui
Split Light Speech Bubble CTA Block for Solid
A split call to action built as a short chat: the headline at the start, and at the end a customer's quote in a bubble, answered by a reply bubble that holds the Shine Button to start free.
Installation
Overview
A closing section that turns a testimonial into a conversation, for Solid with Ark UI. Between solid rails, the start side holds the headline and a sentence about Laneboard (a fictional team handoff board); a solid divider that meets the top rule separates it from a conversation in a hairline frame with + marks on its corners. A customer's words sit in a muted chat bubble with their initials and role; below it, on the other side, an outlined reply bubble answers "Same results?" and holds the Shine Button, "Start free". The quote fades up first and the reply a beat later. It's built from Guides, Bubble, Message, Avatar and Shine Button, with CSS transitions only and your theme's tokens. On a phone the conversation stacks under the headline with a rule between, and the button stays on the first screen. For landing pages and pricing pages where a peer's quote makes the strongest opening, and a call to action phrased as the natural answer reads better than a bare button.
FAQ
How do I change the quote and the reply?
Edit CUSTOMER at the top of the file: quote, name, role and initials. The reply text and its button are written in the second BubbleContent. Keep the reply to a few words, phrased as an answer to the quote ("Same results? Start free"), and ask the customer before you quote them.
How is the reply a call to action?
The reply bubble holds a Shine Button that is a link, so the bubble frames the action without being the target itself. The button is the block's only primary control; the bubbles are muted and outlined, so the text stays readable on every preset. A band of light sweeps across the button once on hover and keyboard focus.
The button's asChild receives its props: spread them onto your router's link.
How do screen readers read it?
The customer's message is a figure with a blockquote and a figcaption for the name and role; the initials avatar is hidden since the name is written. The reply reads "Same results?" and then a single link, "Start free". The section's h2 comes first, and the frame and rules are decoration.
Does it work in right-to-left languages?
Yes. The two columns swap sides with the page direction, and inside the conversation the customer's bubble moves to the end side and the reply to the start side. The quote sits in a bdi so its marks stay put.