Link Effects
リンクエフェクト
Four hover treatments for inline links: a rule that grows from the left and retracts to the right, a background that wipes up behind the text, a label that rises a hair, and square brackets that slide in from either side. Each is a group of utilities rather than a branch in the component, so the markup never changes — only the class list does. Built with Tailwind pseudo-element variants↗↗.
Installation
Copy and paste the following code into a new component file:1
"use client"
import type { ReactNode } from "react"
export type LinkEffect = "underline" | "sweep" | "lift" | "bracket"
type EffectLinkProps = {
href: string,
effect?: LinkEffect,
children: ReactNode
How to use it2
"use client"
import { EffectLink } from "@/components/ui/link-effects"
export default function Page() {
return (
<EffectLink href="/docs" effect="underline">
Read the docs
</EffectLink>
)
Props
EffectLink
| Name | Default | Description |
|---|---|---|
| href | — | string Link target |
| effect | "underline" | "underline" | "sweep" | "lift" | "bracket" Which hover treatment to apply |
| children | — | ReactNode The link label |
LinkEffects
| Name | Default | Description |
|---|---|---|
| dark | false | boolean Render the dark palette; shows all four effects as a demo |