Pill Unfurl

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/pill-unfurl.tsx.

Install the pastetaste component "Pill Unfurl" (pill-unfurl) into this Next.js project and use it.

What it is: A CTA that rests as a bare disc with a chevron beside its label. On hover, focus or press the disc stretches into a pill, the chevron grows into an arrow and the label recolours where the pill passes.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/pill-unfurl.json
   (it writes components/pastetaste/pill-unfurl.tsx; install any npm packages it reports).
2. Import it: import { PillUnfurl } from "@/components/pastetaste/pill-unfurl" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- children: ReactNode = required — The label. Plain text reads best; the solid variant draws it twice (once per colour).
- href: string — Renders an <a>. Without it a <button type="button"> is rendered.
- as: 'a' | 'button' | 'span' = auto — 'span' for a visual-only CTA inside a bigger link or card; pair it with trigger="group".
- variant: 'solid' | 'outline' | 'tint' = 'solid' — solid: the pill paints over the label and recolours it. outline: a white pill with a hairline grows behind the label. tint: a soft wash grows behind it.
- size: number | string = 48 — Disc diameter and button height: a number in px or any CSS length, e.g. 'clamp(44px, 4vw, 54px)'. Label size, gap and padding scale with it.
- arrow: 'right' | 'left' | 'down' | 'up-right' = 'right' — Which way the arrow points once unfurled: down for downloads, up-right for external links, left for back links.
- side: 'start' | 'end' = 'start' — Where the disc sits. 'end' puts it after the label and unfurls toward the start (right-aligned links, nav).
- trigger: 'self' | 'group' = 'self' — 'group' also unfurls while an ancestor with the data-pt-unfurl-group attribute is hovered, keyboard-focused or pressed.
- open: boolean = false — Hold the unfurled state, e.g. for the current page or the selected row.
- caps: boolean = true — Uppercase, tracked label. Off gives sentence case.
- fill / ink / on / line: string = #1c1d21 / inherited / #fff / 28% ink — Disc and pill colour; label colour at rest; label and arrow colour on the pill (arrow only for outline and tint); outline hairline.
- duration: number = 0.42 — Seconds the unfurl takes; the arrow runs at 86% of it.
- disabled: boolean = false — Dims the CTA, keeps it folded and blocks clicks (aria-disabled on links, disabled on buttons).

Live preview: https://pastetaste.com/c/pill-unfurl
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 13