Arrow Link
A text link that gives its arrow more room and changes color on hover or keyboard focus.
- Dependencies
- No extra packages
- Size
- 75 lines
- Controls
- 6 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/arrow-link.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/arrow-link.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the arrow-link.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Meet the studio" | Visible text. children override it. |
| href | string | "#" | Link destination. |
| variant | "line" | "plain" | "line" | Bottom hairline, or none. |
| color / line / accent | string | "#ededeb" / "#62625e" / "#ff4d27" | Text colour, hairline colour, and the text and arrow colour on hover and focus. |
| size | "sm" | "md" | "md" | 10px or 12px; the arrow stays 21px. |
| onClick / target | — | — | Forwarded to the anchor. |