shadcn.io is not affiliated with official shadcn/ui
Centered Light Handwritten Arrow Scribble CTA Block for React Aria
A centred statement CTA between solid rails: a one-line headline and a sentence, then the Shine Button and a ghost button in a hairline frame, with a hand-drawn arrow that draws itself toward the Shine Button from a handwritten note.
Installation
Overview
A friendly centred call to action that points at the button, for React with React Aria. The column is a statement: a one-line headline, a sentence that opens with a bold "Welcome to Plotline", and under them a small hairline frame with + marks on its corners that holds the two actions, the Shine Button "Open workspace" and a quiet ghost "Take a tour". A hand-drawn arrow draws itself once on load from an italic serif "Start here!" note toward the Shine Button, crossing the frame's top line. Phones skip the drawing and show the two buttons directly under the copy. It's built from Shine Button, Button and Guides, with CSS transitions only and your theme's tokens for every colour, so the block follows light and dark mode and any preset. For onboarding screens, first-run welcomes, tutorials and any section where a casual cue softens the ask.
FAQ
How does the arrow draw itself?
The arrow is an inline SVG made of two strokes, and a CSS clip-path reveals it from tail to head over one second, half a second after the page loads. It plays once and the finished arrow stays. With reduced motion on, the arrow is simply there, and the text no longer fades up. There is no script and no animation library.
How do I make the arrow point at another button?
The arrow sits above the frame and spans its width, so its head lands on the first button whatever the labels are. To aim elsewhere, edit the two d paths: the head is the last point of each. The "Start here!" note is placed from the end edge, so it stays beside the tail on right-to-left pages, where the whole drawing mirrors with the buttons.
Is the scribble hidden from screen readers?
Yes. The arrow and the note are decoration, hidden from assistive technology, and they never carry information the text doesn't. Everything a visitor needs is in the headline, the sentence and the two buttons, which read in that order. The note's colour is the theme's muted text colour at full strength, so it also passes contrast.
What happens on a phone?
Below the sm breakpoint the arrow and the note are hidden, because a drawing that long would crowd a small screen, and the frame moves up under the copy. The buttons wrap and centre as before, so the call to action is unchanged. Nothing has a fixed width, so it reads at 320 pixels.