shadcn.io is not affiliated with official shadcn/ui
Inset Code Snippet Copy CTA Block for Ark UI
A card-in-card call to action for a data SDK, split by a hairline: the headline, one sentence and a Shine Button at the start, and a three-line quickstart snippet with a copy button on every line and a Copy all button at the end.
Installation
Overview
A call to action that shows the code instead of describing it, for React with Ark UI. A muted shell with + marks on its corners wraps a raised panel that follows your theme, split by a hairline. The start half holds the headline, one sentence and two buttons, the Shine Button and an outline "Read the quickstart"; the end half is tinted and holds a small editor window with three lines of SDK code. Each line has its own copy button, so a visitor can take just the import or just the call, and the window's header has a Copy all button for the three joined. On a phone the snippet follows the text, and a line too wide for the window scrolls inside it. It's built from Guides, Syntax Text, Copy Button, Button and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For API landing pages, SDK documentation, developer tools and any launch page where a working snippet is the pitch.
FAQ
How do I change the snippet?
Edit LINES at the top of the file: one string per row, and the window and its buttons follow. Keep each line to one statement, since a row holds one line of code. Copy all joins the rows with line breaks, so what lands on the clipboard is exactly what the window shows, with no gutter or prompt in it.
How does the copying work?
Each button is our Copy Button with the row's text as its content. Pressing it writes that text to the clipboard, swaps the copy icon for a check for three seconds and sets a polite status that screen readers read as "Copied". When the clipboard refuses (a page not served over HTTPS), the icon turns into a cross and the status reads "Couldn't copy". The buttons are independent: copying one line doesn't change the others.
How are the buttons named for screen readers?
The row buttons are icon-only and each carries its own name, "Copy line 1", "Copy line 2" and "Copy line 3". The header button reads "Copy all three lines". The code in each row sits in a focusable region named after its line, so a keyboard can scroll a line that is wider than the window.
Does the panel follow my theme?
Yes. The panel has no forced scope: it is light on a light page and dark on a dark one, and its ring, shadow and the shell around it keep it set apart in both. Nothing in the block is a fixed colour, so a different theme repaints it, and the code's colours come from the theme as well.